Bug 1421497 - Combine searchbar.css platform-specific files into one shared file. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 10 Jan 2018 17:31:14 +0000
changeset 718602 a0cf492f27587a106d6079b2a2ae73264aba607f
parent 718409 6c6f3fd9c5e114a1cb0ebb7fb5c19933954e94dd
child 718603 a9a9edb61bff73286a0bf6a1df0918b046b6380f
push id95001
push userbmo:ntim.bugs@gmail.com
push dateWed, 10 Jan 2018 17:32:06 +0000
reviewersdao
bugs1421497
milestone59.0a1
Bug 1421497 - Combine searchbar.css platform-specific files into one shared file. r=dao MozReview-Commit-ID: E7QTlYIiqKJ
browser/themes/linux/jar.mn
browser/themes/linux/searchbar.css
browser/themes/osx/jar.mn
browser/themes/osx/searchbar.css
browser/themes/shared/searchbar.inc.css
browser/themes/windows/jar.mn
browser/themes/windows/searchbar.css
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -11,17 +11,17 @@ browser.jar:
 * skin/classic/browser/syncedtabs/sidebar.css     (syncedtabs/sidebar.css)
 * skin/classic/browser/browser.css
 * skin/classic/browser/compacttheme.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
 * skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
   skin/classic/browser/page-livemarks.png
-  skin/classic/browser/searchbar.css
+* skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
 * skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
 * skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png             (feeds/feedIcon.png)
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -1,253 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.searchbar-engine-image {
-  height: 16px;
-  width: 16px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
-  margin-inline-start: -1px;
-}
+%include ../shared/searchbar.inc.css
 
 menuitem[cmd="cmd_clearhistory"] {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
 }
 
 menuitem[cmd="cmd_clearhistory"][disabled] {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
 }
-
-.search-panel-current-engine {
-  -moz-box-align: center;
-}
-
-/**
- * The borders of the various elements are specified as follows.
- *
- * The current engine always has a bottom border.
- * The search results never have a border.
- *
- * When the search results are not collapsed:
- * - The elements underneath the search results all have a top border.
- *
- * When the search results are collapsed:
- * - The elements underneath the search results all have a bottom border, except
- *   the lowest one: search-setting-button.
- */
-
-.search-panel-current-engine {
-  border-top: none !important;
-  border-bottom: 1px solid var(--panel-separator-color) !important;
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type {
-  border-top: none !important;
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
-  border-bottom: 1px solid var(--panel-separator-color) !important;
-}
-
-.search-panel-header {
-  font-weight: normal;
-  background-color: var(--arrowpanel-dimmed);
-  border: none;
-  border-top: 1px solid var(--panel-separator-color);
-  padding: 3px 5px;
-  color: GrayText;
-}
-
-.search-panel-header > label {
-  margin-top: 2px !important;
-  margin-bottom: 1px !important;
-}
-
-.search-panel-current-input > label {
-  margin: 2px 0 1px !important;
-}
-
-.search-panel-input-value {
-  color: -moz-fieldtext;
-}
-
-.search-panel-one-offs {
-  margin: 0 !important;
-  border-top: 1px solid var(--panel-separator-color);
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.searchbar-engine-one-off-item {
-  -moz-appearance: none;
-  display: inline-block;
-  border: none;
-  min-width: 48px;
-  height: 32px;
-  margin: 0;
-  padding: 0;
-  background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
-  background-size: 1px auto;
-  background-repeat: no-repeat;
-  background-position: right center;
-  color: GrayText;
-}
-
-.searchbar-engine-one-off-item:-moz-locale-dir(rtl) {
-  background-position: left center;
-}
-
-.searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
-  border-bottom: 1px solid var(--panel-separator-color);
-}
-
-.search-setting-button-compact {
-  border-bottom: none !important;
-}
-
-.search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row,
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine,
-.search-setting-button-compact {
-  background-image: none;
-}
-
-.searchbar-engine-one-off-item:not([selected]):not(.dummy):hover,
-.addengine-item:hover {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: inherit;
-}
-
-.searchbar-engine-one-off-item[selected] {
-  background-color: Highlight;
-  background-image: none;
-  color: HighlightText;
-}
-
-.searchbar-engine-one-off-item > .button-box {
-  padding: 0;
-}
-
-.searchbar-engine-one-off-item > .button-box > .button-text {
-  display: none;
-}
-
-.searchbar-engine-one-off-item > .button-box > .button-icon {
-  display: -moz-box;
-  margin-inline-end: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.search-add-engines {
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.addengine-item {
-  -moz-appearance: none;
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  height: 32px;
-  margin: 0;
-  padding: 0 10px;
-}
-
-.addengine-item:first-of-type {
-  border-top: 1px solid var(--panel-separator-color);
-}
-
-.addengine-item[selected] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-.addengine-item[type=menu][selected] {
-  color: inherit;
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  display: -moz-box;
-  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
-  box-shadow: none;
-  /* "!important" is necessary to override the rule in toolbarbutton.css */
-  margin: -4px 0 0 !important;
-  margin-inline-end: -4px !important;
-  width: 11px;
-  height: 11px;
-  min-width: 11px;
-  min-height: 11px;
-}
-
-.addengine-item > .toolbarbutton-text {
-  text-align: start;
-  padding-inline-start: 10px;
-}
-
-.addengine-item:not([image]) {
-  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .addengine-item:not([image]) {
-    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
-  }
-}
-
-.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
-  display: -moz-box;
-  -moz-appearance: menuarrow !important;
-  list-style-image: none;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  border-top: none !important;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
-  padding-inline-start: 4px;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  padding-inline-start: 5px;
-  width: 14px;
-  height: 14px;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
-  list-style-image: url("chrome://browser/skin/history.svg");
-  -moz-context-properties: fill;
-  fill: graytext;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
-  fill: HighlightText;
-}
-
-.search-setting-button {
-  -moz-appearance: none;
-  margin: 0;
-  min-height: 32px;
-}
-
-.search-setting-button:hover,
-.search-setting-button[selected] {
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.search-setting-button-compact > .button-box > .button-icon {
-  list-style-image: url("chrome://browser/skin/settings.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -13,17 +13,17 @@ browser.jar:
   skin/classic/browser/subtle-pattern.png
   skin/classic/browser/panel-expander-closed.png
   skin/classic/browser/panel-expander-closed@2x.png
   skin/classic/browser/panel-expander-open.png
   skin/classic/browser/panel-expander-open@2x.png
   skin/classic/browser/panel-plus-sign.png
   skin/classic/browser/page-livemarks.png
 * skin/classic/browser/pageInfo.css
-  skin/classic/browser/searchbar.css
+* skin/classic/browser/searchbar.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/toolbarbutton-dropmarker.png
   skin/classic/browser/toolbarbutton-dropmarker@2x.png
   skin/classic/browser/webRTC-indicator.css
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
 * skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css)
 * skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -1,247 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.searchbar-textbox {
-  border-radius: 10000px;
+%include ../shared/searchbar.inc.css
+
+.search-panel-header,
+.addengine-item {
+  font-size: 10px;
 }
 
 .searchbar-popup {
   margin-top: 4px;
   margin-inline-start: 3px;
 }
 
-.searchbar-engine-image {
-  width: 16px;
-  height: 16px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
+#PopupSearchAutoComplete {
+  border-radius: 4px;
 }
 
 .search-panel-current-engine {
   border-radius: 4px 4px 0 0;
 }
 
-/**
- * The borders of the various elements are specified as follows.
- *
- * The current engine always has a bottom border.
- * The search results never have a border.
- *
- * When the search results are not collapsed:
- * - The elements underneath the search results all have a top border.
- *
- * When the search results are collapsed:
- * - The elements underneath the search results all have a bottom border, except
- *   the lowest one: search-setting-button.
- */
-
-.search-panel-current-engine {
-  border-top: none !important;
-  border-bottom: 1px solid var(--panel-separator-color);
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type {
-  border-top: none;
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
-  border-bottom: 1px solid var(--panel-separator-color);
-}
-
-.search-panel-header {
-  font-size: 10px;
-  font-weight: normal;
-  background-color: var(--arrowpanel-dimmed);
-  border-top: 1px solid var(--panel-separator-color);
-  margin: 0;
-  padding: 3px 6px;
-  color: GrayText;
-}
-
-.search-panel-header > label {
-  margin-top: 2px !important;
-  margin-bottom: 2px !important;
-}
-
-.search-panel-current-input > label {
-  margin: 2px 0 !important;
-}
-
-.search-panel-input-value {
-  color: -moz-fieldtext;
-}
-
-.search-panel-one-offs {
-  margin: 0 !important;
-  border-top: 1px solid var(--panel-separator-color);
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.searchbar-engine-one-off-item {
-  -moz-appearance: none;
-  display: inline-block;
-  min-width: 48px;
-  height: 32px;
-  margin: 0;
-  padding: 0;
-  background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
-  background-size: 1px auto;
-  background-repeat: no-repeat;
-  background-position: right center;
-  color: GrayText;
-}
-
-.searchbar-engine-one-off-item:-moz-locale-dir(rtl) {
-  background-position: left center;
-}
-
-.searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
-  border-bottom: 1px solid var(--panel-separator-color);
-}
-
-.search-setting-button-compact {
-  border-bottom: none !important;
-}
-
-.search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row,
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine,
-.search-setting-button-compact {
-  background-image: none;
-}
-
-.searchbar-engine-one-off-item:not([selected]):not(.dummy):hover,
-.addengine-item:hover {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: inherit;
-}
-
-.searchbar-engine-one-off-item[selected] {
-  background-color: Highlight;
-  background-image: none;
-  color: HighlightText;
-}
-
-.searchbar-engine-one-off-item > .button-box > .button-text {
-  display: none;
+.search-setting-button {
+  border-radius: 0 0 4px 4px;
 }
-
-.searchbar-engine-one-off-item > .button-box > .button-icon {
-  margin-inline-start: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.search-add-engines {
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.addengine-item {
-  -moz-appearance: none;
-  font-size: 10px;
-  height: 32px;
-  margin: 0;
-  padding: 0 10px;
-}
-
-.addengine-item:first-of-type {
-  border-top: 1px solid var(--panel-separator-color);
-}
-
-.addengine-item[selected] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-.addengine-item[type=menu][selected] {
-  color: inherit;
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  display: -moz-box;
-  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
-  box-shadow: none;
-  /* "!important" is necessary to override the rule in toolbarbutton.css */
-  margin: -4px 0 0 !important;
-  margin-inline-end: -4px !important;
-  width: 11px;
-  height: 11px;
-  min-width: 11px;
-  min-height: 11px;
-}
-
-.addengine-item > .toolbarbutton-text {
-  text-align: start;
-  padding-inline-start: 10px;
-}
-
-.addengine-item:not([image]) {
-  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
-}
-
-@media (min-resolution: 2dppx) {
-  .addengine-item:not([image]) {
-    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
-  }
-}
-
-.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
-  display: -moz-box;
-  -moz-appearance: menuarrow !important;
-  list-style-image: none;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  border-top: none !important;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  padding-inline-start: 4px;
-  padding-inline-end: 2px;
-  width: 14px;
-  height: 14px;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
-  list-style-image: url("chrome://browser/skin/history.svg");
-  -moz-context-properties: fill;
-  fill: graytext;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
-  fill: HighlightText;
-}
-
-#PopupSearchAutoComplete {
-  border-radius: 4px;
-}
-
-.search-setting-button {
-  -moz-appearance: none;
-  border-radius: 0 0 4px 4px;
-  min-height: 32px;
-}
-
-.search-setting-button:hover,
-.search-setting-button[selected] {
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.search-setting-button-compact > .button-box > .button-icon {
-  list-style-image: url("chrome://browser/skin/settings.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
copy from browser/themes/linux/searchbar.css
copy to browser/themes/shared/searchbar.inc.css
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -1,29 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .searchbar-engine-image {
+  width: 16px;
   height: 16px;
-  width: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
-  margin-inline-start: -1px;
-}
-
-menuitem[cmd="cmd_clearhistory"] {
-  list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
-}
-
-menuitem[cmd="cmd_clearhistory"][disabled] {
-  list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
-}
-
-.search-panel-current-engine {
-  -moz-box-align: center;
 }
 
 /**
  * The borders of the various elements are specified as follows.
  *
  * The current engine always has a bottom border.
  * The search results never have a border.
  *
@@ -31,78 +18,80 @@ menuitem[cmd="cmd_clearhistory"][disable
  * - The elements underneath the search results all have a top border.
  *
  * When the search results are collapsed:
  * - The elements underneath the search results all have a bottom border, except
  *   the lowest one: search-setting-button.
  */
 
 .search-panel-current-engine {
+  -moz-box-align: center;
   border-top: none !important;
-  border-bottom: 1px solid var(--panel-separator-color) !important;
+  border-bottom: 1px solid var(--panel-separator-color);
 }
 
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header,
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
 .search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type {
-  border-top: none !important;
+  border-top: none;
 }
 
 .search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item,
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
 .search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
-  border-bottom: 1px solid var(--panel-separator-color) !important;
+  border-bottom: 1px solid var(--panel-separator-color);
 }
 
 .search-panel-header {
   font-weight: normal;
   background-color: var(--arrowpanel-dimmed);
-  border: none;
   border-top: 1px solid var(--panel-separator-color);
-  padding: 3px 5px;
+  margin: 0;
+  padding: 3px 6px;
   color: GrayText;
 }
 
 .search-panel-header > label {
   margin-top: 2px !important;
   margin-bottom: 1px !important;
 }
 
 .search-panel-current-input > label {
-  margin: 2px 0 1px !important;
+  margin: 2px 0 !important;
 }
 
 .search-panel-input-value {
   color: -moz-fieldtext;
 }
 
 .search-panel-one-offs {
   margin: 0 !important;
   border-top: 1px solid var(--panel-separator-color);
   background-color: var(--arrowpanel-dimmed);
+  /* Bug 1108841: prevent font-size from affecting the layout */
+  line-height: 0;
 }
 
 .searchbar-engine-one-off-item {
   -moz-appearance: none;
   display: inline-block;
-  border: none;
   min-width: 48px;
   height: 32px;
   margin: 0;
   padding: 0;
   background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
   background-size: 1px auto;
   background-repeat: no-repeat;
   background-position: right center;
   color: GrayText;
 }
 
 .searchbar-engine-one-off-item:-moz-locale-dir(rtl) {
-  background-position: left center;
+  background-position-x: left;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
   box-sizing: content-box;
   border-bottom: 1px solid var(--panel-separator-color);
 }
 
 .search-setting-button-compact {
@@ -133,31 +122,29 @@ menuitem[cmd="cmd_clearhistory"][disable
   padding: 0;
 }
 
 .searchbar-engine-one-off-item > .button-box > .button-text {
   display: none;
 }
 
 .searchbar-engine-one-off-item > .button-box > .button-icon {
-  display: -moz-box;
+  margin-inline-start: 0;
   margin-inline-end: 0;
   width: 16px;
   height: 16px;
 }
 
 .search-add-engines {
   background-color: var(--arrowpanel-dimmed);
 }
 
 .addengine-item {
   -moz-appearance: none;
-  background-color: transparent;
   color: inherit;
-  border: none;
   height: 32px;
   margin: 0;
   padding: 0 10px;
 }
 
 .addengine-item:first-of-type {
   border-top: 1px solid var(--panel-separator-color);
 }
@@ -210,22 +197,19 @@ menuitem[cmd="cmd_clearhistory"][disable
   -moz-appearance: menuarrow !important;
   list-style-image: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   border-top: none !important;
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
-  padding-inline-start: 4px;
-}
-
 .search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  padding-inline-start: 5px;
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
   width: 14px;
   height: 14px;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
   list-style-image: url("chrome://browser/skin/history.svg");
   -moz-context-properties: fill;
   fill: graytext;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -9,17 +9,17 @@ browser.jar:
   skin/classic/browser/aboutSessionRestore-window-icon.png
 * skin/classic/browser/syncedtabs/sidebar.css     (syncedtabs/sidebar.css)
 * skin/classic/browser/browser.css
 * skin/classic/browser/compacttheme.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
-  skin/classic/browser/searchbar.css
+* skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
   skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
   skin/classic/browser/customizableui/menu-arrow.svg           (customizableui/menu-arrow.svg)
 * skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -1,246 +1,9 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.searchbar-engine-image {
-  height: 16px;
-  width: 16px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
-  margin-inline-start: -1px;
-}
-
-.search-panel-current-engine {
-  -moz-box-align: center;
-}
-
-/**
- * The borders of the various elements are specified as follows.
- *
- * The current engine always has a bottom border.
- * The search results never have a border.
- *
- * When the search results are not collapsed:
- * - The elements underneath the search results all have a top border.
- *
- * When the search results are collapsed:
- * - The elements underneath the search results all have a bottom border, except
- *   the lowest one: search-setting-button.
- */
-
-.search-panel-current-engine {
-  border-top: none !important;
-  border-bottom: 1px solid var(--panel-separator-color) !important;
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-header,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:first-of-type {
-  border-top: none !important;
-}
-
-.search-panel-tree[collapsed=true] + .search-one-offs > .searchbar-engine-one-off-item,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
-.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
-.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
-  border-bottom: 1px solid var(--panel-separator-color) !important;
-}
-
-.search-panel-header {
-  font-weight: normal;
-  background-color: var(--arrowpanel-dimmed);
-  border: none;
-  border-top: 1px solid var(--panel-separator-color);
-  margin: 0;
-  padding: 3px 6px;
-  color: GrayText;
-}
-
-.search-panel-header > label {
-  margin-top: 2px !important;
-  margin-bottom: 1px !important;
-}
-
-.search-panel-current-input > label {
-  margin: 2px 0 1px !important;
-}
-
-.search-panel-input-value {
-  color: -moz-fieldtext;
-}
-
-.search-panel-one-offs {
-  margin: 0 !important;
-  border-top: 1px solid var(--panel-separator-color);
-  line-height: 0;
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.searchbar-engine-one-off-item {
-  -moz-appearance: none;
-  display: inline-block;
-  border: none;
-  min-width: 48px;
-  height: 32px;
-  margin: 0;
-  padding: 0;
-  background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
-  background-size: 1px auto;
-  background-repeat: no-repeat;
-  background-position: right center;
-  color: GrayText;
-}
-
-.searchbar-engine-one-off-item:-moz-locale-dir(rtl) {
-  background-position: left center;
-}
-
-.searchbar-engine-one-off-item:not(.last-row) {
-  box-sizing: content-box;
-  border-bottom: 1px solid var(--panel-separator-color);
-}
+%include ../shared/searchbar.inc.css
 
 .searchbar-engine-one-off-item:-moz-focusring {
   outline: none;
 }
-
-.search-setting-button-compact {
-  border-bottom: none !important;
-}
-
-.search-panel-one-offs:not([compact=true]) > .searchbar-engine-one-off-item.last-of-row,
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-of-row:not(.dummy),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.dummy:not(.last-of-row),
-.search-panel-one-offs[compact=true] > .searchbar-engine-one-off-item.last-engine,
-.search-setting-button-compact {
-  background-image: none;
-}
-
-.searchbar-engine-one-off-item:not([selected]):not(.dummy):hover,
-.addengine-item:hover {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: inherit;
-}
-
-.searchbar-engine-one-off-item[selected] {
-  background-color: Highlight;
-  background-image: none;
-  color: HighlightText;
-}
-
-.searchbar-engine-one-off-item > .button-box {
-  padding: 0;
-}
-
-.searchbar-engine-one-off-item > .button-box > .button-text {
-  display: none;
-}
-
-.searchbar-engine-one-off-item > .button-box > .button-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.search-add-engines {
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.addengine-item {
-  -moz-appearance: none;
-  border: none;
-  height: 32px;
-  margin: 0;
-  padding: 0 10px;
-}
-
-.addengine-item:first-of-type {
-  border-top: 1px solid var(--panel-separator-color);
-}
-
-.addengine-item[selected] {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-.addengine-item[type=menu][selected] {
-  color: inherit;
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.addengine-item > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  display: -moz-box;
-  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
-  box-shadow: none;
-  /* "!important" is necessary to override the rule in toolbarbutton.css */
-  margin: -4px 0 0 !important;
-  margin-inline-end: -4px !important;
-  width: 11px;
-  height: 11px;
-  min-width: 11px;
-  min-height: 11px;
-}
-
-.addengine-item > .toolbarbutton-text {
-  text-align: start;
-  padding-inline-start: 10px;
-}
-
-.addengine-item:not([image]) {
-  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .addengine-item:not([image]) {
-    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
-  }
-}
-
-.addengine-item[type=menu] > .toolbarbutton-menu-dropmarker {
-  display: -moz-box;
-  -moz-appearance: menuarrow !important;
-  list-style-image: none;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  border-top: none !important;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
-  padding-inline-start: 4px;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  padding-inline-start: 5px;
-  width: 14px;
-  height: 14px;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
-  list-style-image: url("chrome://browser/skin/history.svg");
-  -moz-context-properties: fill;
-  fill: graytext;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
-  fill: HighlightText;
-}
-
-.search-setting-button {
-  -moz-appearance: none;
-  min-height: 32px;
-}
-
-.search-setting-button:hover,
-.search-setting-button[selected] {
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.search-setting-button-compact > .button-box > .button-icon {
-  list-style-image: url("chrome://browser/skin/settings.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}