Bug 1691545 - Update identity box and urlbar icons spacing and borders (Proton). r=harry

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

browser/themes/shared/browser.inc.css

@@ -6,8 +6,6 @@
 %include addons/extension-controlled.inc.css
 
 %filter substitution
-%define identityBoxPaddingInline 6px
-%define identityBoxMarginInline 3px
 %define lwtPopupBrighttextLinkColor #74c0ff
 %define themeTransition background-color 0.1s cubic-bezier(.17,.67,.83,.67)
 %define urlbarBreakoutExtend 2px
@@ -23,11 +21,15 @@
   --buttons-secondary-hover-bgcolor: hsla(0,0%,80%,.5);
   --buttons-secondary-active-bgcolor: hsla(0,0%,80%,.8);
   --buttons-secondary-color: currentColor;
+
+  --identity-box-padding-inline: 6px;
+  --identity-box-margin-inline: 4px;
 }
 
 @supports not -moz-bool-pref("browser.proton.enabled") {
   :root {
     --focus-outline-width: 0;
+    --identity-box-margin-inline: 3px;
   }
 }
 

browser/themes/shared/identity-block/identity-block.inc.css

@@ -7,7 +7,12 @@
 %filter substitution
 
 #identity-box {
-  margin-inline: @identityBoxMarginInline@;
+  margin-inline-end: var(--identity-box-margin-inline);
+}
+
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+#identity-box {
+  margin-inline-start: var(--identity-box-margin-inline);
 }
 
 /* The tracking protection icon will be hidden if it is a chrome page. There
@@ -16,6 +21,7 @@
 #identity-box[pageproxystate="valid"].chromeUI {
   margin-inline-start: 0;
 }
+} /*** END !proton ***/
 
 #identity-box,
 #tracking-protection-icon-container {
@@ -25,9 +31,11 @@
   fill-opacity: .6;
 }
 
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
 #identity-box[pageproxystate="invalid"] {
-  margin-inline-end: calc(@identityBoxMarginInline@ + 2px);
+  margin-inline-end: calc(var(--identity-box-margin-inline) + 2px);
 }
+} /*** END !proton ***/
 
 #urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"],
 #identity-box[pageproxystate="invalid"] > #identity-permission-box,
@@ -45,7 +53,6 @@
 .identity-box-button:hover:not([open=true]),
 #tracking-protection-icon-container:hover:not([open=true]) {
   background-color: hsla(0,0%,70%,.2);
-  fill-opacity: .8;
 }
 
 .identity-box-button:hover:active,
@@ -53,8 +60,18 @@
 #tracking-protection-icon-container:hover:active,
 #tracking-protection-icon-container[open=true] {
   background-color: hsla(0,0%,70%,.3);
+}
+
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.identity-box-button:hover:not([open=true]),
+.identity-box-button:hover:active,
+.identity-box-button[open=true],
+#tracking-protection-icon-container:hover:not([open=true]),
+#tracking-protection-icon-container:hover:active,
+#tracking-protection-icon-container[open=true] {
   fill-opacity: .8;
 }
+} /*** END !proton ***/
 
 .identity-box-button:not(:active):-moz-focusring,
 #tracking-protection-icon-container:not(:active):-moz-focusring {
@@ -64,9 +81,17 @@
 }
 
 .identity-box-button {
-  padding-inline: calc(@identityBoxPaddingInline@ / 2);
+  padding-inline: var(--identity-box-padding-inline);
+  border-radius: var(--toolbarbutton-border-radius);
 }
 
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+.identity-box-button {
+  padding-inline: calc(var(--identity-box-padding-inline) / 2);
+  border-radius: 0;
+}
+} /*** END !proton ***/
+
 #identity-box[pageproxystate="valid"].chromeUI #identity-icon-label,
 .urlbar-label {
   opacity: .6;
@@ -235,14 +260,21 @@
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon-container {
-  padding-inline: @identityBoxPaddingInline@;
+  padding-inline: var(--identity-box-padding-inline);
+  border-radius: var(--toolbarbutton-border-radius);
+  /* This is needed in order to position the blue dot indicator. */
+  position: relative;
+}
+
+@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
+#tracking-protection-icon-container {
+  border-radius: 0;
   /* Separator */
   border-inline-end: 1px solid var(--urlbar-separator-color);
   border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
   border-image-slice: 1;
-  /* This is needed in order to position the blue dot indicator. */
-  position: relative;
 }
+} /*** END !proton ***/
 
 #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI {
   display: none;

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

@@ -7,7 +7,7 @@
 %define fieldBorderColor hsla(240,5%,5%,.25)
 %define fieldHoverBorderColor hsla(240,5%,5%,.35)
 %define urlbarMarginInline 5px
-%define urlbarSearchButtonWidth calc(16px + 2 * @identityBoxPaddingInline@)
+%define urlbarSearchButtonWidth calc(16px + 2 * var(--identity-box-padding-inline))
 
 :root {
   /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
@@ -17,12 +17,14 @@
 @supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
 :root {
   --toolbar-field-focus-border-color: -moz-accent-color;
+  --urlbar-container-padding: 0;
 }
 } /*** END !proton ***/
 
 @supports -moz-bool-pref("browser.proton.urlbar.enabled") {
 :root {
   --toolbar-field-focus-border-color: var(--focus-outline-color);
+  --urlbar-container-padding: 2px;
 }
 /* Override this value in the default dark theme. This value should be moved
     to default-theme/manifest.json when the Proton prefs are removed. */
@@ -242,6 +244,7 @@
 #urlbar-input-container {
   /* Match urlbar-background's border. */
   border: 1px solid transparent;
+  padding: var(--urlbar-container-padding);
 }
 
 #urlbar-container[breakout] {
@@ -309,8 +312,8 @@
 @supports -moz-bool-pref("browser.proton.urlbar.enabled") {
 #urlbar[breakout][breakout-extend] > #urlbar-input-container {
   height: var(--urlbar-toolbar-height);
-  padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
-  padding-inline: @urlbarMarginInline@;
+  padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
+  padding-inline: calc(@urlbarMarginInline@ + var(--urlbar-container-padding));
 }
 } /*** END proton ***/
 
@@ -612,13 +615,20 @@
 .urlbar-icon {
   width: 28px;
   height: 28px;
-  padding: var(--urlbar-icon-padding);
+  padding-inline: var(--urlbar-icon-padding);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   color: inherit;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+.urlbar-icon,
+.urlbar-icon-wrapper {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+} /*** END proton ***/
+
 .urlbar-page-action[disabled] {
   fill-opacity: 0.3;
 }

browser/themes/shared/urlbarView.inc.css

@@ -6,7 +6,7 @@
 
 %filter substitution
 %define urlbarViewPadding 4px
-%define urlbarViewIconMarginEnd (@identityBoxPaddingInline@ + @identityBoxMarginInline@)
+%define urlbarViewIconMarginEnd (var(--identity-box-padding-inline) + var(--identity-box-margin-inline))
 %define urlbarViewMarginInline 7px
 %define urlbarViewItemInlinePadding 6px
 %define urlbarViewFaviconWidth 16px
@@ -190,10 +190,10 @@
   }
   /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */
   .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
-    padding-left: calc(@urlbarViewItemInlinePadding@ + @identityBoxMarginInline@ + @urlbarViewFaviconWidth@);
+    padding-left: calc(@urlbarViewItemInlinePadding@ + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
   }
   .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
-    padding-right: calc(@urlbarViewItemInlinePadding@ + @identityBoxMarginInline@ + @urlbarViewFaviconWidth@);
+    padding-right: calc(@urlbarViewItemInlinePadding@ + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
   }
   /* Note: switchtab entries show the url only in override mode,
      remotetab and sponsored ones only when selected or :hover. */
@@ -208,7 +208,7 @@
   }
   .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
     flex-basis: 100%;
-    margin-inline-start: calc(@urlbarViewItemInlinePadding@ + @identityBoxMarginInline@ + @urlbarViewFaviconWidth@);
+    margin-inline-start: calc(@urlbarViewItemInlinePadding@ + var(--identity-box-margin-inline) + @urlbarViewFaviconWidth@);
   }
 }