Bug 1686530 - Refresh button spacing and style in toolbar for Proton r=mstriemer,ntim,harry

Updated spacing in toolbar to match figma.

https://www.figma.com/file/FjUe6ORvXZgJvI3rPuTV33/Desktop-UI?node-id=1729%3A26278

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

browser/themes/shared/browser.inc.css

@@ -79,6 +79,14 @@
   border-bottom-style: none;
 }
 
+@supports -moz-bool-pref("browser.proton.toolbar.enabled") {
+/*** Adds padding to beginning of toolbar while making that space click the first button ***/
+#nav-bar-customization-target > toolbarbutton:first-child,
+#nav-bar-customization-target > toolbaritem:first-child > toolbarbutton {
+  padding-inline-start: var(--toolbar-start-end-padding);
+}
+} /*** END proton ***/
+
 :root[sessionrestored] #nav-bar:-moz-lwtheme {
   transition: @themeTransition@;
 }
@@ -88,8 +96,19 @@
 #PersonalToolbar {
   overflow: clip;
   max-height: 4em;
+}
+
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
+#PersonalToolbar {
   padding: 2px 6px;
 }
+} /*** END !proton ***/
+
+@supports -moz-bool-pref("browser.proton.toolbar.enabled") {
+#PersonalToolbar {
+  padding-inline: 2px;
+}
+} /*** END proton ***/
 
 :root[uidensity=compact] #PersonalToolbar {
   padding-inline: 2px;

browser/themes/shared/customizableui/panelUI.inc.css

@@ -106,6 +106,7 @@
 
 } /*** END proton ***/
 
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
 :root:not([uidensity=compact], [chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
@@ -126,6 +127,7 @@
     transparent calc(100% - 4px)
   );
 }
+} /*** END !proton ***/
 
 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;

browser/themes/shared/toolbarbuttons.inc.css

@@ -5,8 +5,9 @@
 :root {
   --toolbarbutton-hover-transition-duration: 150ms;
 
+  --toolbar-start-end-padding: 8px;
   --toolbarbutton-outer-padding: 2px;
-  --toolbarbutton-inner-padding: 6px;
+  --toolbarbutton-inner-padding: 8px;
 
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
@@ -21,7 +22,7 @@
 
   --toolbarseparator-color: var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.3));
 
-  --bookmark-block-padding: 4px;
+  --bookmark-block-padding: 1px;
 
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
@@ -39,7 +40,15 @@
 :root {
   --toolbarbutton-focus-outline: var(--focus-outline);
 }
-} /*** END !proton ***/
+} /*** END proton ***/
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
+:root {
+
+  --toolbarbutton-outer-padding: 2px;
+  --toolbarbutton-inner-padding: 6px;
+  --bookmark-block-padding: 4px;
+}
+} /** END !proton **/
 
 :root[uidensity=compact] {
   --toolbarbutton-outer-padding: 1px;
@@ -133,6 +142,7 @@ toolbar .toolbarbutton-1 {
   -moz-box-pack: center;
 }
 
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
 :root:not([uidensity=compact]) #PanelUI-button {
   padding-inline-start: 5px;
 }
@@ -140,6 +150,13 @@ toolbar .toolbarbutton-1 {
 :root:not([uidensity=compact]) #PanelUI-menu-button {
   padding-inline-end: 5px;
 }
+} /*** END !proton ***/
+@supports -moz-bool-pref("browser.proton.toolbar.enabled") {
+/*** Adds padding to end of toolbar while making that space click the first button ***/
+#PanelUI-menu-button {
+  padding-inline-end: var(--toolbar-start-end-padding);
+}
+} /*** END proton ***/
 
 toolbar .toolbarbutton-1 > menupopup {
   margin-top: -3px;
@@ -279,6 +296,7 @@ toolbar .toolbarbutton-1:-moz-focusring {
   outline: none;
 }
 
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
 :root:not([uidensity=compact]) #back-button {
   padding-block: 3px;
   padding-inline: 3px 0;
@@ -338,6 +356,7 @@ toolbar .toolbarbutton-1:-moz-focusring {
   background-color: var(--backbutton-active-background) !important;
   border-color: hsla(240,5%,5%,.40);
 }
+} /*** END !proton ***/
 
 /* bookmarks menu button */
 

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

@@ -49,6 +49,17 @@
   color: FieldText;
 }
 
+@supports -moz-bool-pref("browser.proton.toolbar.enabled") {
+#urlbar-container,
+#search-container {
+  padding-block: 8px;
+}
+#urlbar,
+#searchbar {
+  min-height: 32px;
+}
+} /* END proton */
+
 #urlbar-background,
 #searchbar {
   background-color: Field;

browser/themes/windows/browser.css

@@ -14,7 +14,7 @@
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
-  --toolbarbutton-border-radius: 2px;
+  --toolbarbutton-border-radius: 4px;
   --toolbarbutton-icon-fill-opacity: 1;
 
   --panel-separator-color: ThreeDLightShadow;
@@ -27,6 +27,12 @@
   --chrome-content-separator-color: ThreeDShadow;
 }
 
+@supports not -moz-bool-pref("browser.proton.toolbar.enabled") {
+:root {
+  --toolbarbutton-border-radius: 2px;
+}
+} /* END !proton */
+
 #navigator-toolbox {
   --tabs-border-color: threedshadow;
 }