Bug 1567406 - Use ids instead of classes for urlbar-input and urlbar-scheme. r=harry

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

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

browser/base/content/browser.css

@@ -530,7 +530,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 }
 
 /* Display URLs left-to-right but right aligned in RTL mode. */
-html|input.urlbar-input:-moz-locale-dir(rtl) {
+html|*#urlbar-input:-moz-locale-dir(rtl) {
   direction: ltr !important;
   text-align: right !important;
 }
@@ -538,7 +538,7 @@ html|input.urlbar-input:-moz-locale-dir(rtl) {
 /* Make sure that the location bar's alignment in RTL mode changes according
    to the input box direction if the user switches the text direction using
    cmd_switchTextDirection (which applies a dir attribute to the <input>). */
-html|input.urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
+html|*#urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
   text-align: left !important;
 }
 
@@ -564,11 +564,11 @@ html|input.urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
 }
 
 /* Show the url scheme in a static box when overflowing to the left */
-moz-input-box.urlbar-input-box {
+.urlbar-input-box {
   position: relative;
   direction: ltr;
 }
-html|input.urlbar-scheme {
+html|*#urlbar-scheme {
   position: absolute;
   height: 100%;
   visibility: hidden;
@@ -578,22 +578,22 @@ html|input.urlbar-scheme {
 
 /* Visible if the urlbar is not focused and it overflows at the start.
    Uses the required-valid trick to check if it contains a value */
-#urlbar[textoverflow="start"]:not([focused]) > .urlbar-input-box > html|input.urlbar-scheme:valid {
+#urlbar[textoverflow="start"]:not([focused]) > .urlbar-input-box > html|*#urlbar-scheme:valid {
   visibility: visible;
 }
 
 /* Fade out URL on overflow
    This mask may be overriden when a Contextual Feature Recommendation is shown,
    see browser/themes/shared/urlbar-searchbar.inc.css for details */
-#urlbar[textoverflow="end"]:not([focused]) > .urlbar-input-box > html|input.urlbar-input {
+#urlbar[textoverflow="end"]:not([focused]) > .urlbar-input-box > html|*#urlbar-input {
   mask-image: linear-gradient(to left, transparent, black 3ch);
 }
 
-#urlbar[textoverflow="start"]:not([focused]) > .urlbar-input-box > html|input.urlbar-input {
+#urlbar[textoverflow="start"]:not([focused]) > .urlbar-input-box > html|*#urlbar-input {
   mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
 }
 
-html|input.urlbar-input {
+html|*#urlbar-input {
   mask-repeat: no-repeat;
 }
 

browser/base/content/browser.xhtml

@@ -954,11 +954,10 @@
               <moz-input-box tooltip="aHTMLTooltip"
                              class="urlbar-input-box"
                              flex="1">
-                <html:input class="urlbar-scheme"
+                <html:input id="urlbar-scheme"
                             required="required"/>
                 <html:input id="urlbar-input"
                             anonid="input"
-                            class="urlbar-input"
                             role="combobox"
                             aria-owns="urlbarView-results"
                             aria-controls="urlbarView-results"

browser/components/extensions/test/browser/browser_ext_tabs_create_url.js

@@ -84,7 +84,7 @@ add_task(async function test_urlbar_focus() {
   info(`After opening an empty tab, gURLBar.focused: ${gURLBar.focused}`);
 
   is(active.tagName, "html:input", "Input element focused");
-  ok(active.classList.contains("urlbar-input"), "Urlbar focused");
+  is(active.id, "urlbar-input", "Urlbar focused");
 
   extension.sendMessage("remove", tab2.id);
   await extension.awaitMessage("result");

browser/components/urlbar/UrlbarInput.jsm

@@ -154,7 +154,7 @@ class UrlbarInput {
       });
     }
 
-    this.inputField = this.querySelector(".urlbar-input");
+    this.inputField = this.querySelector("#urlbar-input");
     this.dropmarker = this.querySelector(".urlbar-history-dropmarker");
 
     XPCOMUtils.defineLazyGetter(this, "valueFormatter", () => {

browser/components/urlbar/UrlbarValueFormatter.jsm

@@ -46,7 +46,7 @@ class UrlbarValueFormatter {
   }
 
   get scheme() {
-    return this.urlbarInput.textbox.querySelector(".urlbar-scheme");
+    return this.urlbarInput.querySelector("#urlbar-scheme");
   }
 
   update() {

browser/themes/osx/browser.css

@@ -255,7 +255,7 @@
 
 /* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
  * even in non-Latin scripts. */
-html|input.urlbar-input {
+#urlbar-input {
   line-height: 1.745em;
 }
 

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

@@ -85,7 +85,7 @@
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
 }
 
-:root[lwt-selection] .urlbar-input:-moz-lwtheme::selection,
+:root[lwt-selection] #urlbar-input:-moz-lwtheme::selection,
 :root[lwt-selection] .searchbar-textbox:-moz-lwtheme::selection {
   background-color: var(--lwt-toolbar-field-highlight, Highlight);
   color: var(--lwt-toolbar-field-highlight-text, HighlightText);
@@ -112,8 +112,8 @@
   visibility: hidden;
 }
 
-.urlbar-input,
-.urlbar-scheme {
+#urlbar-input,
+#urlbar-scheme {
   -moz-box-flex: 1;
   background-color: transparent;
   color: inherit;
@@ -649,7 +649,7 @@
 }
 
 /* Shift the url-bar text fading to stop the recommendation overlapping */
-#urlbar[cfr-recommendation-state] html|input.urlbar-input {
+#urlbar[cfr-recommendation-state] #urlbar-input {
   /* A mask-image is usually only defined for the url bar when text overflows.
      We need to re-define the mask image here so that it shows up correctly when
      we transition to or from an `expanded` state (in which the right end of the
@@ -657,13 +657,13 @@
   mask-image: linear-gradient(to left, transparent, black 3ch);
   transition: mask-position-x ease-in-out var(--cfr-animation-duration);
 }
-#urlbar[cfr-recommendation-state] html|input.urlbar-input:-moz-locale-dir(rtl) {
+#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) {
   mask-image: linear-gradient(to right, transparent, black 3ch);
 }
-#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input {
   mask-position-x: calc(var(--cfr-label-width) * -1);
 }
-#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input:-moz-locale-dir(rtl) {
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) {
   mask-position-x: calc(var(--cfr-label-width));
 }
 

browser/themes/windows/browser.css

@@ -560,7 +560,7 @@ menuitem.bookmark-item {
   }
 }
 
-html|*.urlbar-input:-moz-lwtheme::placeholder,
+#urlbar-input:-moz-lwtheme::placeholder,
 .searchbar-textbox:-moz-lwtheme > moz-input-box > html|*.textbox-input::placeholder {
   opacity: 1.0;
   color: #777;

testing/firefox-ui/tests/puppeteer/test_toolbars.py

@@ -85,10 +85,8 @@ class TestLocationBar(PuppeteerMixin, MarionetteTestCase):
         self.locationbar = self.browser.navbar.locationbar
 
     def test_elements(self):
-        self.assertEqual(self.locationbar.urlbar.get_property('localName'), 'textbox')
-        self.assertIn('urlbar-input', self.locationbar.urlbar_input.get_property('className'))
+        self.assertEqual(self.locationbar.urlbar_input.get_property('id'), 'urlbar-input')
 
-        self.assertEqual(self.locationbar.connection_icon.get_property('localName'), 'image')
         self.assertEqual(self.locationbar.identity_box.get_property('localName'), 'box')
         self.assertEqual(self.locationbar.identity_country_label.get_property('localName'),
                          'label')
@@ -153,7 +151,6 @@ class TestIdentityPopup(PuppeteerMixin, MarionetteTestCase):
         self.assertEqual(main.element.get_property('localName'), 'panelview')
 
         self.assertEqual(main.expander.get_property('localName'), 'button')
-        self.assertEqual(main.host.get_property('localName'), 'label')
         self.assertEqual(main.insecure_connection_label.get_property('localName'),
                          'description')
         self.assertEqual(main.internal_connection_label.get_property('localName'),

testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py

@@ -90,14 +90,6 @@ class LocationBar(UIBaseLib):
             lambda _: self.value == '',
             message='Contents of location bar could not be cleared.')
 
-    @property
-    def connection_icon(self):
-        """ Provides access to the urlbar connection icon.
-
-        :returns: Reference to the connection icon element.
-        """
-        return self.marionette.find_element(By.ID, 'connection-icon')
-
     @property
     def focused(self):
         """Checks the focus state of the location bar.
@@ -243,7 +235,7 @@ class LocationBar(UIBaseLib):
 
         :returns: Reference to the urlbar input.
         """
-        return self.urlbar.find_element(By.CLASS_NAME, 'urlbar-input')
+        return self.marionette.find_element(By.ID, 'urlbar-input')
 
     @property
     def value(self):