Remove fomantic breadcrumb module (#24463)

### File path before/after

<img width="522" alt="Screenshot 2023-05-01 at 13 23 33"
src="https://user-images.githubusercontent.com/115237/235445636-57776038-c98e-4cab-8abe-045138a76958.png">
<img width="522" alt="Screenshot 2023-05-01 at 13 24 08"
src="https://user-images.githubusercontent.com/115237/235445638-70bef62a-1b70-41f8-ba51-728db4d54402.png">


### File edit before/after

<img width="499" alt="Screenshot 2023-05-01 at 13 24 46"
src="https://user-images.githubusercontent.com/115237/235445676-7b3cc23e-289b-40a6-8d4f-0d7fb2efb55e.png">
<img width="497" alt="Screenshot 2023-05-01 at 13 24 52"
src="https://user-images.githubusercontent.com/115237/235445677-db9f3974-8456-46de-a32b-9198110c0540.png">

### Cherry-pick before/after

<img width="590" alt="Screenshot 2023-05-01 at 13 25 30"
src="https://user-images.githubusercontent.com/115237/235445717-99445024-1bb2-46d4-9bd8-8086bad57d34.png">
<img width="582" alt="Screenshot 2023-05-01 at 13 25 37"
src="https://user-images.githubusercontent.com/115237/235445720-9c1dc497-eb23-4e10-a727-27f4d6df69e6.png">

templates/repo/editor/cherry_pick.tmpl

@@ -8,8 +8,7 @@
 			<input type="hidden" name="last_commit" value="{{.last_commit}}">
 			<input type="hidden" name="page_has_posted" value="true">
 			<input type="hidden" name="revert" value="{{if eq .CherryPickType "revert"}}true{{else}}false{{end}}">
-			<div class="ui secondary menu">
+			<div class="repo-editor-header">
-				<div class="fitted item treepath">
 				<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					{{$shaurl := printf "%s/commit/%s" $.RepoLink (PathEscape .SHA)}}
 					{{$shalink := printf "<a class=\"ui primary sha label\" href=\"%s\">%s</a>" (Escape $shaurl) (ShortSha .SHA)}}
@@ -24,7 +23,6 @@
 					<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$shaurl}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
 				</div>
 			</div>
-			</div>
 			{{template "repo/editor/commit_form" .}}
 		</form>
 	</div>

templates/repo/editor/edit.tmpl

@@ -7,9 +7,8 @@
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="last_commit" value="{{.last_commit}}">
 			<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
-			<div class="ui secondary menu">
+			<div class="repo-editor-header">
-				<div class="fitted item treepath">
+				<div class="ui breadcrumb field{{if .Err_TreePath}} error{{end}}">
-					<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
 					{{$n := len .TreeNames}}
 					{{$l := Eval $n "-" 1}}
@@ -26,7 +25,6 @@
 					<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
 				</div>
 			</div>
-			</div>
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
 					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{.locale.Tr "repo.editor.new_file"}}{{else}}{{.locale.Tr "repo.editor.edit_file"}}{{end}}</a>

templates/repo/editor/patch.tmpl

@@ -7,8 +7,7 @@
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="last_commit" value="{{.last_commit}}">
 			<input type="hidden" name="page_has_posted" value="{{.PageHasPosted}}">
-			<div class="ui secondary menu">
+			<div class="repo-editor-header">
-				<div class="fitted item treepath">
 				<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					{{.locale.Tr "repo.editor.patching"}}
 					<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
@@ -19,7 +18,6 @@
 					<input id="file-name" type="hidden" value="diff.patch">
 				</div>
 			</div>
-			</div>
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write">
 					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "gt-mr-2"}}{{.locale.Tr "repo.editor.new_patch"}}</a>

templates/repo/editor/upload.tmpl

@@ -5,8 +5,7 @@
 		{{template "base/alert" .}}
 		<form class="ui comment form" method="post">
 			{{.CsrfTokenHtml}}
-			<div class="ui secondary menu">
+			<div class="repo-editor-header">
-				<div class="item fitted treepath">
 				<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					<a class="section" href="{{$.BranchLink}}">{{.Repository.Name}}</a>
 					{{$n := len .TreeNames}}
@@ -24,7 +23,6 @@
 					<input type="hidden" id="tree_path" name="tree_path" value="{{.TreePath}}" required>
 				</div>
 			</div>
-			</div>
 			<div class="field">
 				{{template "repo/upload" .}}
 			</div>

templates/repo/home.tmpl

@@ -109,7 +109,7 @@
 					</a>
 				{{end}}
 				{{if ne $n 0}}
-					<span class="ui breadcrumb repo-path gt-ml-2">
+					<span class="breadcrumb repo-path gt-ml-2">
 						<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
 						{{- range $i, $v := .TreeNames -}}
 							<span class="divider">/</span>

web_src/css/base.css

@@ -332,8 +332,7 @@ progress::-moz-progress-bar {
   user-select: none;
 }
 
-a,
+a {
-.ui.breadcrumb a {
   color: var(--color-primary);
   cursor: pointer;
   text-decoration-skip-ink: all;
@@ -347,8 +346,7 @@ a.muted,
 a:hover,
 a.muted:hover,
 a.muted:hover [class*="color-text"],
-.muted-links a:hover,
+.muted-links a:hover {
-.ui.breadcrumb a:hover {
   color: var(--color-primary);
 }
 
@@ -737,14 +735,6 @@ a.label,
   padding-bottom: 7.42px !important;
 }
 
-.ui.breadcrumb a:hover {
-  text-decoration: underline !important;
-}
-
-.ui.breadcrumb .divider {
-  color: var(--color-text-light-2);
-}
-
 .ui.divider:not(.vertical,.horizontal) {
   border-top-color: var(--color-secondary) !important;
   border-bottom: none !important;

web_src/css/editor.css

@@ -12,6 +12,12 @@
   border-bottom: 0;
 }
 
+.repo-editor-header {
+  display: flex;
+  margin: 1rem 0;
+  padding: 3px 0;
+}
+
 .editor-toolbar {
   border-color: var(--color-secondary);
 }

web_src/css/index.css

@@ -11,6 +11,7 @@
 @import "./features/projects.css";
 @import "./modules/tippy.css";
 @import "./modules/modal.css";
+@import "./modules/breadcrumb.css";
 @import "./code/linebutton.css";
 @import "./markup/content.css";
 @import "./markup/codecopy.css";

web_src/css/modules/breadcrumb.css

@@ -0,0 +1,9 @@
+.breadcrumb .divider {
+  color: var(--color-text-light-2);
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.breadcrumb > * {
+  display: inline;
+}

web_src/css/repository.css

@@ -223,11 +223,6 @@
   word-break: break-word;
 }
 
-.repository.file.list .repo-path .section,
-.repository.file.list .repo-path .divider {
-  display: inline;
-}
-
 .repository.file.list #repo-files-table {
   table-layout: fixed;
 }
@@ -448,16 +443,15 @@
   width: 16px;
 }
 
-.repository.file.editor .treepath {
+.repo-editor-header {
   width: 100%;
 }
 
-.repository.file.editor .treepath input {
+.repo-editor-header input {
-  vertical-align: middle;
+  vertical-align: middle !important;
-  box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 2px inset;
+  width: auto !important;
-  width: inherit;
+  padding: 7px 8px !important;
-  padding: 7px 8px;
+  margin-right: 5px !important;
-  margin-right: 5px;
 }
 
 .repository.file.editor .tabular.menu .svg {

web_src/fomantic/build/semantic.css

@@ -8,151 +8,6 @@
  * http://opensource.org/licenses/MIT
  *
  */
-/*!
- * # Fomantic-UI - Breadcrumb
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-           Breadcrumb
-*******************************/
-
-.ui.breadcrumb {
-  line-height: 1.4285em;
-  display: inline-block;
-  margin: 0 0;
-  vertical-align: middle;
-}
-
-.ui.breadcrumb:first-child {
-  margin-top: 0;
-}
-
-.ui.breadcrumb:last-child {
-  margin-bottom: 0;
-}
-
-/*******************************
-          Content
-*******************************/
-
-/* Divider */
-
-.ui.breadcrumb .divider {
-  display: inline-block;
-  opacity: 0.7;
-  margin: 0 0.21428571rem 0;
-  font-size: 0.92857143em;
-  color: rgba(0, 0, 0, 0.4);
-  vertical-align: baseline;
-}
-
-/* Link */
-
-.ui.breadcrumb a {
-  color: #4183C4;
-}
-
-.ui.breadcrumb a:hover {
-  color: #1e70bf;
-}
-
-/* Icon Divider */
-
-.ui.breadcrumb .icon.divider {
-  font-size: 0.85714286em;
-  vertical-align: baseline;
-}
-
-/* Section */
-
-.ui.breadcrumb a.section {
-  cursor: pointer;
-}
-
-.ui.breadcrumb .section {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
-
-/* Loose Coupling */
-
-.ui.breadcrumb.segment {
-  display: inline-block;
-  padding: 0.78571429em 1em;
-}
-
-/* Inverted */
-
-.ui.inverted.breadcrumb {
-  color: #DCDDDE;
-}
-
-.ui.inverted.breadcrumb > .active.section {
-  color: #FFFFFF;
-}
-
-.ui.inverted.breadcrumb > .divider {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.breadcrumb .active.section {
-  font-weight: 500;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-.ui.breadcrumb {
-  font-size: 1rem;
-}
-
-.ui.mini.breadcrumb {
-  font-size: 0.78571429rem;
-}
-
-.ui.tiny.breadcrumb {
-  font-size: 0.85714286rem;
-}
-
-.ui.small.breadcrumb {
-  font-size: 0.92857143rem;
-}
-
-.ui.large.breadcrumb {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.breadcrumb {
-  font-size: 1.28571429rem;
-}
-
-.ui.huge.breadcrumb {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.breadcrumb {
-  font-size: 1.71428571rem;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-         Site Overrides
-*******************************/
 /*!
  * # Fomantic-UI - Button
  * http://github.com/fomantic/Fomantic-UI/

web_src/fomantic/semantic.json

@@ -22,7 +22,6 @@
   "admin": false,
   "components": [
     "api",
-    "breadcrumb",
     "button",
     "card",
     "checkbox",