Bug 1575822 - Rename #urlbar-display-box and friends and consolidate related styling. r=ntim

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -636,10 +636,10 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
   }
 }
 
-#urlbar[actionoverride] > #urlbar-input-container > #urlbar-display-box,
-#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-input-container > #urlbar-display-box,
-#urlbar:not([actiontype="switchtab"]) > #urlbar-input-container > #urlbar-display-box > #switchtab,
-#urlbar:not([actiontype="extension"]) > #urlbar-input-container > #urlbar-display-box > #extension {
+#urlbar[actionoverride] > #urlbar-input-container > #urlbar-label-box,
+#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-input-container > #urlbar-label-box,
+#urlbar:not([actiontype="switchtab"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-switchtab,
+#urlbar:not([actiontype="extension"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-extension {
   display: none;
 }
 

browser/base/content/browser.xhtml

@@ -977,9 +977,9 @@
                   <label id="identity-icon-country-label" class="plain"/>
                 </hbox>
               </box>
-              <box id="urlbar-display-box" align="center">
-                <label id="switchtab" class="urlbar-display urlbar-display-switchtab" value="&urlbar.switchToTab.label;"/>
-                <label id="extension" class="urlbar-display urlbar-display-extension" value="&urlbar.extension.label;"/>
+              <box id="urlbar-label-box" align="center">
+                <label id="urlbar-label-switchtab" class="urlbar-label" value="&urlbar.switchToTab.label;"/>
+                <label id="urlbar-label-extension" class="urlbar-label" value="&urlbar.extension.label;"/>
               </box>
               <moz-input-box tooltip="aHTMLTooltip"
                              class="urlbar-input-box"

browser/components/urlbar/tests/browser/browser_switchTab_override.js

@@ -39,9 +39,9 @@ add_task(async function test_switchtab_override() {
 
   // Check to see if the switchtab label is visible and
   // all other labels are hidden
-  const allLabels = document.getElementById("urlbar-display-box").children;
+  const allLabels = document.getElementById("urlbar-label-box").children;
   for (let label of allLabels) {
-    if (label.id == "switchtab") {
+    if (label.id == "urlbar-label-switchtab") {
       Assert.ok(BrowserTestUtils.is_visible(label));
     } else {
       Assert.ok(BrowserTestUtils.is_hidden(label));

browser/components/urlbar/tests/browser/browser_urlbar_display_selectedAction_Extensions.js

@@ -39,12 +39,12 @@ add_task(async function testSwitchToTabTextDisplay() {
   EventUtils.synthesizeKey("KEY_ArrowUp");
 
   // Checks to see if "Extension:" text in URL bar is visible
-  const extensionText = document.getElementById("extension");
+  const extensionText = document.getElementById("urlbar-label-extension");
   Assert.ok(BrowserTestUtils.is_visible(extensionText));
   Assert.equal(extensionText.value, "Extension:");
 
   // Check to see if all other labels are hidden
-  const allLabels = document.getElementById("urlbar-display-box").children;
+  const allLabels = document.getElementById("urlbar-label-box").children;
   for (let label of allLabels) {
     if (label != extensionText) {
       Assert.ok(BrowserTestUtils.is_hidden(label));

browser/themes/linux/browser.css

@@ -186,15 +186,6 @@ menuitem.bookmark-item {
   border-color: ThreeDShadow;
 }
 
-#urlbar-display-box {
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.urlbar-display {
-  margin-inline-start: 0;
-}
-
 /* identity box */
 
 %include ../shared/identity-block/identity-block.inc.css

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

@@ -66,7 +66,13 @@
   color: #30e60b;
 }
 
-#identity-box[pageproxystate="valid"].chromeUI > #identity-icon-labels {
+#identity-box[pageproxystate="valid"].chromeUI > #identity-icon-labels:not(:-moz-lwtheme),
+.urlbar-label:not(:-moz-lwtheme) {
+  color: GrayText;
+}
+
+#identity-box[pageproxystate="valid"].chromeUI > #identity-icon-labels:-moz-lwtheme,
+.urlbar-label:-moz-lwtheme {
   opacity: .6;
 }
 
@@ -87,7 +93,7 @@
 #identity-box[pageproxystate="valid"].verifiedIdentity,
 #identity-box[pageproxystate="valid"].chromeUI,
 #identity-box[pageproxystate="valid"].extensionPage,
-#urlbar-display-box {
+#urlbar-label-box {
   margin-inline-end: 8px;
   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%);
@@ -101,11 +107,13 @@
   padding-inline-end: 8px;
 }
 
-#urlbar-display-box {
-  padding-inline-start: 4px;
+#urlbar-label-box {
+  padding-inline: 4px;
   border-inline-start: 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;
+}
+
+.urlbar-label {
+  margin: 0;
 }
 
 .sharing-icon,

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

@@ -286,7 +286,7 @@
 }
 
 #pageActionSeparator {
-  /* This draws the separator the same way that #urlbar-display-box draws its
+  /* This draws the separator the same way that #urlbar-label-box draws its
      left and right borders, which end up looking like separators.  It might not
      be the best way in this case, but it makes sure that all these vertical
      lines in the urlbar look the same: same height, vertical position, etc. */
@@ -363,19 +363,6 @@
   -moz-outline-radius: var(--toolbarbutton-border-radius);
 }
 
-.urlbar-display {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.urlbar-display:not(:-moz-lwtheme) {
-  color: GrayText;
-}
-
-.urlbar-display:-moz-lwtheme {
-  opacity: 0.5;
-}
-
 #urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/forward.svg");

browser/themes/windows/browser.css

@@ -560,12 +560,6 @@ menuitem.bookmark-item {
   }
 }
 
-/* ::::: URL Bar Zoom Reset Button ::::: */
-
-.urlbar-display {
-  margin-inline-start: 0;
-}
-
 #pageAction-urlbar-shareURL,
 #pageAction-panel-shareURL {
   list-style-image: url("chrome://browser/skin/share.svg");