Bug 1695276 - Partially restyle the search bar panel to make it more consistent with the Address Bar in Proton. r=harry

Differential Revision: https://phabricator.services.mozilla.com/D109102

browser/components/search/SearchOneOffs.jsm

@@ -41,6 +41,7 @@ class SearchOneOffs {
         <button class="searchbar-engine-one-off-item search-setting-button-compact" tabindex="-1" data-l10n-id="search-one-offs-change-settings-compact-button"/>
       </box>
       <vbox class="search-add-engines"/>
+      <menuseparator class="searchbar-separator"/>
       <button class="search-setting-button" data-l10n-id="search-one-offs-change-settings-button"/>
       <box>
         <menupopup class="search-one-offs-context-menu">

browser/components/search/content/autocomplete-popup.js

@@ -105,7 +105,9 @@
         <image class="searchbar-engine-image"></image>
         <label class="searchbar-engine-name" flex="1" crop="end" role="presentation"></label>
       </hbox>
+      <menuseparator class="searchbar-separator"/>
       <richlistbox class="autocomplete-richlistbox search-panel-tree" flex="1"></richlistbox>
+      <menuseparator class="searchbar-separator"/>
       <hbox class="search-one-offs"></hbox>
     `;
     }

browser/themes/osx/searchbar.css

@@ -8,6 +8,7 @@
   border-radius: 4px;
 }
 
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
 .search-panel-current-engine {
   border-radius: 4px 4px 0 0;
 }
@@ -15,3 +16,4 @@
 .search-setting-button {
   border-radius: 0 0 4px 4px;
 }
+} /*** END !proton ***/

browser/themes/shared/searchbar.inc.css

@@ -12,14 +12,12 @@
 
 .search-one-offs {
   -moz-box-orient: vertical;
-  border-top: 1px solid var(--panel-separator-color);
   width: 100%;
 }
 
 .search-panel-header {
   font-weight: normal;
   margin: 0;
-  padding: 3px;
 }
 
 .search-panel-header > label {
@@ -45,14 +43,23 @@
 .search-panel-current-engine {
   -moz-box-align: center;
   border-top: none !important;
-  border-bottom: 1px solid var(--panel-separator-color);
-  padding-inline-start: 6px;
+  padding-inline: 8px;
 }
 
-.search-panel-tree[collapsed=true] + .search-one-offs {
-  border-top: none;
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.search-panel-header {
+  padding-block: 3px;
 }
 
+.search-panel-current-engine {
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+.search-panel-tree:not([collapsed=true]) ~ .search-one-offs {
+  border-top: 1px solid var(--panel-separator-color);
+}
+} /*** END !proton ***/
+
 .search-panel-one-offs:not([hidden]),
 .search-panel-one-offs-container {
   display: flex;
@@ -72,13 +79,21 @@
 .searchbar-engine-one-off-item {
   appearance: none;
   display: inline-block;
-  min-width: 48px;
+  min-width: 32px;
   height: 32px;
-  margin: 0;
+  margin: var(--arrowpanel-menuitem-margin);
   padding: 0;
   color: inherit;
+  border-radius: var(--toolbarbutton-border-radius);
 }
 
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.searchbar-engine-one-off-item {
+  border-radius: 0;
+  min-width: 48px;
+}
+} /*** END !proton ***/
+
 .searchbar-engine-one-off-item:not([selected]):hover,
 .addengine-item:hover {
   background-color: var(--arrowpanel-dimmed);
@@ -109,13 +124,20 @@
   appearance: none;
   color: inherit;
   height: 32px;
-  margin: 0;
+  margin: var(--arrowpanel-menuitem-margin);
+  border-radius: var(--toolbarbutton-border-radius);
   padding: 0 10px;
 }
 
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.addengine-item {
+  border-radius: 0;
+}
+
 .addengine-item:first-of-type {
   border-top: 1px solid var(--panel-separator-color);
 }
+} /*** END !proton ***/
 
 .addengine-item[selected] {
   background-color: var(--autocomplete-popup-highlight-background);
@@ -173,13 +195,14 @@
 }
 
 .search-panel-tree > .autocomplete-richlistitem {
-  padding: 1px;
+  padding: 1px 3px;
 }
 
 .search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
   display: -moz-box;
   width: 14px;
   height: 14px;
+  margin-inline-end: 7px;
 }
 
 .search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon {
@@ -195,12 +218,35 @@
 
 .search-setting-button {
   appearance: none;
-  margin: 0;
+  margin: var(--arrowpanel-menuitem-margin);
   min-height: 32px;
+  color: inherit !important; /* Overriding toolbarbutton.css on Linux. */
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+.searchbar-separator {
+  appearance: none;
+  margin: var(--panel-separator-margin);
+  padding: 0;
   border-top: 1px solid var(--panel-separator-color);
   color: inherit;
 }
 
+.search-panel-tree[collapsed=true] + .searchbar-separator {
+  display: none;
+}
+
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.search-setting-button {
+  border-top: 1px solid var(--panel-separator-color);
+  border-radius: 0;
+}
+
+.searchbar-separator {
+  display: none;
+}
+} /*** END !proton ***/
+
 .search-setting-button-compact {
   max-height: 32px;
   align-self: end;

browser/themes/shared/urlbar-searchbar.inc.css

@@ -1030,6 +1030,14 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
   margin-top: -13px;
 }
 
+#urlbar .searchbar-separator {
+  display: none;
+}
+
+#urlbar .search-one-offs {
+  border-top: 1px solid var(--panel-separator-color);
+}
+
 moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
   /* These differ from the urlbar and searchbar because the context menu
      may not have enough space */

browser/themes/shared/urlbarView.inc.css

@@ -750,18 +750,22 @@
 /* search bar popup */
 
 #PopupSearchAutoComplete {
-  background: var(--autocomplete-popup-background);
+  background-color: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
   border-color: var(--arrowpanel-border-color);
 }
 
 @supports -moz-bool-pref("browser.proton.urlbar.enabled") {
 #PopupSearchAutoComplete {
+  background-color: var(--lwt-toolbar-field-focus);
   border: 1px solid var(--arrowpanel-border-color);
   /* Remove the top border since the panel is flush with the input. */
   border-top-width: 0;
+  border-radius: var(--arrowpanel-border-radius);
+  /* override autocomplete.css padding */
+  padding: var(--panel-subview-body-padding) !important;
 }
-} /*** END !proton ***/
+} /*** END proton ***/
 
 #PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
   background: var(--autocomplete-popup-highlight-background);