Bug 1567406 - Use ids instead of classes for urlbar-input and urlbar-scheme. r=harry
authorDão Gottwald <dao@mozilla.com>
Fri, 19 Jul 2019 13:22:23 +0000
changeset 483489 40791748c0406c8e7d45a86cfc62b44d2f10dcd7
parent 483488 ce5d76c8be1b2dca90f9e512c19d98b64c754fe0
child 483490 3f42be452e8e534b5af356fc5c03b67f47270926
push id36321
push usermalexandru@mozilla.com
push dateFri, 19 Jul 2019 21:56:14 +0000
treeherdermozilla-central@23d4ebd5f8e7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry
bugs1567406
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1567406 - Use ids instead of classes for urlbar-input and urlbar-scheme. r=harry Differential Revision: https://phabricator.services.mozilla.com/D38631
browser/base/content/browser.css
browser/base/content/browser.xhtml
browser/components/extensions/test/browser/browser_ext_tabs_create_url.js
browser/components/urlbar/UrlbarInput.jsm
browser/components/urlbar/UrlbarValueFormatter.jsm
browser/themes/osx/browser.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser.css
testing/firefox-ui/tests/puppeteer/test_toolbars.py
testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -525,25 +525,25 @@ toolbar:not(#TabsToolbar) > #personal-bo
 .searchbar-textbox {
   /* Setting a width and min-width to let the location & search bars maintain
      a constant width in case they haven't be resized manually. (bug 965772) */
   width: 1px;
   min-width: 1px;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /*
  * Display visual cue that browser is under remote control by Marionette.
  * This is to help users visually distinguish a user agent session that
  * is under remote control from those used for normal browsing sessions.
  *
@@ -559,46 +559,46 @@ html|input.urlbar-input[dir=ltr]:-moz-lo
   background-color: rgba(255,170,68,.8);
   color: black;
 }
 :root[remotecontrol] #urlbar #identity-box {
   background: white;
 }
 
 /* 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;
   direction: ltr;
   pointer-events: none;
 }
 
 /* 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;
 }
 
 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
 @media (resolution: 2dppx) {
   .searchbar-engine-image {
     image-rendering: -moz-crisp-edges;
   }
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -949,21 +949,20 @@
               </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>
               <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"
                             aria-autocomplete="both"
                             allowevents="true"
                             inputmode="mozAwesomebar"
                             placeholder="&urlbar.placeholder2;"/>
               </moz-input-box>
--- a/browser/components/extensions/test/browser/browser_ext_tabs_create_url.js
+++ b/browser/components/extensions/test/browser/browser_ext_tabs_create_url.js
@@ -79,17 +79,17 @@ add_task(async function test_urlbar_focu
     `Parent element: ${parent.tagName}, id: ${parent.id}, class: ${
       parent.className
     }`
   );
 
   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");
 
   await extension.unload();
 });
 
 add_task(async function default_url() {
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -149,17 +149,17 @@ class UrlbarInput {
           return this.inputField[property];
         },
         set(val) {
           return (this.inputField[property] = val);
         },
       });
     }
 
-    this.inputField = this.querySelector(".urlbar-input");
+    this.inputField = this.querySelector("#urlbar-input");
     this.dropmarker = this.querySelector(".urlbar-history-dropmarker");
 
     XPCOMUtils.defineLazyGetter(this, "valueFormatter", () => {
       return new UrlbarValueFormatter(this);
     });
 
     // If the toolbar is not visible in this window or the urlbar is readonly,
     // we'll stop here, so that most properties of the input object are valid,
--- a/browser/components/urlbar/UrlbarValueFormatter.jsm
+++ b/browser/components/urlbar/UrlbarValueFormatter.jsm
@@ -41,17 +41,17 @@ class UrlbarValueFormatter {
     this.window.removeEventListener("resize", this);
   }
 
   get inputField() {
     return this.urlbarInput.inputField;
   }
 
   get scheme() {
-    return this.urlbarInput.textbox.querySelector(".urlbar-scheme");
+    return this.urlbarInput.querySelector("#urlbar-scheme");
   }
 
   update() {
     if (!this.inputField.value) {
       return;
     }
 
     // Remove the current formatting.
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -250,17 +250,17 @@
 
 #urlbar,
 #searchbar {
   font-size: 1.25em;
 }
 
 /* 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;
 }
 
 #urlbar:not(.hidden-focus)[focused="true"],
 #searchbar:focus-within {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -80,17 +80,17 @@
 }
 
 #urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
 #navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   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);
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] #searchbar {
   min-height: 26px;
@@ -107,18 +107,18 @@
   /* Remove excess space between the address bar and the menu button in popups. */
   margin-inline-end: 0;
 }
 
 :root[customizing] .urlbar-input-box {
   visibility: hidden;
 }
 
-.urlbar-input,
-.urlbar-scheme {
+#urlbar-input,
+#urlbar-scheme {
   -moz-box-flex: 1;
   background-color: transparent;
   color: inherit;
   border: none;
   padding: 0;
 }
 
 #urlbar-container {
@@ -644,31 +644,31 @@
 #urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
   transform: translateX(calc(var(--cfr-label-width) * -1));
 }
 #urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker:-moz-locale-dir(rtl) {
   transform: translateX(calc(var(--cfr-label-width)));
 }
 
 /* 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
      url bar may be obscured without overflow). */
   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));
 }
 
 /* Reader mode icon */
 
 #reader-mode-button {
   list-style-image: url(chrome://browser/skin/readerMode.svg);
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -555,17 +555,17 @@ menuitem.bookmark-item {
 @media (-moz-windows-default-theme: 0) {
   #urlbar:not(:-moz-lwtheme):not([focused="true"]),
   #urlbar:not(:-moz-lwtheme).hidden-focus,
   #searchbar:not(:-moz-lwtheme):not(:focus-within) {
     border-color: ThreeDShadow;
   }
 }
 
-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;
 }
 
 /* ::::: URL Bar Zoom Reset Button ::::: */
 @keyframes urlbar-zoom-reset-pulse {
   0% {
--- a/testing/firefox-ui/tests/puppeteer/test_toolbars.py
+++ b/testing/firefox-ui/tests/puppeteer/test_toolbars.py
@@ -80,20 +80,18 @@ class TestNavBar(PuppeteerMixin, Marione
 class TestLocationBar(PuppeteerMixin, MarionetteTestCase):
 
     def setUp(self):
         super(TestLocationBar, self).setUp()
 
         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')
         self.assertEqual(self.locationbar.identity_organization_label.get_property('localName'),
                          'label')
         self.assertEqual(self.locationbar.identity_icon.get_property('localName'), 'image')
         self.assertEqual(self.locationbar.reload_button.get_property('localName'),
                          'toolbarbutton')
@@ -148,17 +146,16 @@ class TestIdentityPopup(PuppeteerMixin, 
     def test_elements(self):
         self.locationbar.open_identity_popup()
 
         # Test main view elements
         main = self.identity_popup.view.main
         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'),
                          'description')
         self.assertEqual(main.secure_connection_label.get_property('localName'),
                          'description')
 
         self.assertEqual(main.permissions.get_property('localName'), 'vbox')
--- a/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
+++ b/testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/browser/toolbars.py
@@ -86,24 +86,16 @@ class LocationBar(UIBaseLib):
         """Clears the contents of the url bar (via the DELETE shortcut)."""
         self.focus('shortcut')
         self.urlbar.send_keys(keys.Keys.DELETE)
         Wait(self.marionette).until(
             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.
 
         :returns: `True` if focused, otherwise `False`
         """
         return self.urlbar.get_attribute('focused') == 'true'
 
     @property
@@ -238,17 +230,17 @@ class LocationBar(UIBaseLib):
         return self.marionette.find_element(By.ID, 'urlbar')
 
     @property
     def urlbar_input(self):
         """Provides access to the urlbar input element.
 
         :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):
         """Provides access to the currently displayed value of the urlbar.
 
         :returns: The urlbar value.
         """
         return self.urlbar_input.get_property('value')