Bug 1556561 - Remove <children> usage from autocomplete binding. r=dao,surkov

Differential Revision: https://phabricator.services.mozilla.com/D33568 --HG-- extra : moz-landing-system : lando
2024-11-23 21:01:08 +00:00 · 2019-06-08 08:16:18 +00:00 · 2019-06-08 08:16:18 +00:00 · aba8c723e5
commit aba8c723e5
parent f1fbd2ff00
10 changed files with 46 additions and 126 deletions
--- a/accessible/tests/mochitest/name/test_general.xul
+++ b/accessible/tests/mochitest/name/test_general.xul
@ -144,13 +144,7 @@
      // Name from the @title attribute of <toolbaritem/> (original bug 237249).

      // Direct child of toolbaritem.
-      var textboxAcc = testName("toolbaritem_textbox", "ooospspss");
-
-      // Element from anonymous content of direct child of toolbaritem.
-      var entryAcc = textboxAcc.firstChild;
-      testRole(entryAcc, ROLE_ENTRY);
-      is(entryAcc.name, "ooospspss",
-         "Wrong name for text entry of autocomplete textbox 'toolbaritem_textbox'.");
+      var toolbarItemChildAcc = testName("toolbaritem_child", "ooospspss");

      // Child from subtree of toolbaritem.
      testName("toolbaritem_hboxbutton", "ooospspss");
@ -330,14 +324,13 @@
  <!-- and the name from label of a toolbarbutton -->
  <toolbar>
    <toolbaritem title="ooospspss">
-      <textbox id="toolbaritem_textbox"
-               flex="1"
-               type="autocomplete"
-               enablehistory="true">
+      <box id="toolbaritem_child"
+           role="group"
+           flex="1">
        <hbox role="button" id="toolbaritem_hboxbutton">
-           <description value="button"/>
+          <description value="button"/>
        </hbox>
-      </textbox>
+      </box>
    </toolbaritem>
    <toolbarbutton id="toolbarbuttonwithlabel">
      <label flex="1">I am the button</label>
--- a/accessible/tests/mochitest/tree/test_combobox.xul
+++ b/accessible/tests/mochitest/tree/test_combobox.xul
@ -82,41 +82,6 @@

      testAccessibleTree("autocomplete", accTree);

-      //////////////////////////////////////////////////////////////////////////
-      // textbox@type=autocomplete #2 (child menupoup)
-
-      accTree = {
-        // textbox
-        role: ROLE_AUTOCOMPLETE,
-        children: [
-          {
-            // menupopup
-            role: ROLE_COMBOBOX_LIST, // autocomplete menu popup
-            children: [
-              {
-                // menuitem
-                role: ROLE_COMBOBOX_OPTION,
-                children: []
-              }
-            ]
-          },
-          {
-            // html:input
-            role: ROLE_ENTRY,
-            children: [
-              // no text leaf accessible for text node
-            ]
-          },
-          {
-            // xul:menupopup
-            role: ROLE_COMBOBOX_LIST, // context menu popup
-            children: []
-          }
-        ]
-      };
-
-      testAccessibleTree("autocomplete2", accTree);
-
      SimpleTest.finish()
    }

@ -155,12 +120,6 @@
      <textbox id="autocomplete" type="autocomplete"
               autocompletesearch="unifiedcomplete"
               value="http://mochi.test:8888/redirect-a11y.html"/>
-
-      <textbox id="autocomplete2" type="autocomplete">
-        <menupopup>
-          <menuitem label="item1"/>
-        </menupopup>
-      </textbox>
    </vbox>
  </hbox>

--- a/browser/components/search/content/autocomplete-popup.js
+++ b/browser/components/search/content/autocomplete-popup.js
@ -56,13 +56,6 @@ class MozSearchAutocompleteRichlistboxPopup extends MozElements.MozAutocompleteR
      this.updateHeader();
    });

-    this.addEventListener("popuphiding", (event) => {
-      this._isHiding = true;
-      Services.tm.dispatchToMainThread(() => {
-        this._isHiding = false;
-      });
-    });
-
    /**
     * This handles clicks on the topmost "Foo Search" header in the
     * popup (hbox.search-panel-header]).
@ -80,14 +73,6 @@ class MozSearchAutocompleteRichlistboxPopup extends MozElements.MozAutocompleteR
      this.oneOffButtons.handleSearchCommand(event, engine);
    });

-    /**
-     * Popup rollup is triggered by native events before the mousedown event
-     * reaches the DOM. The will be set to true by the popuphiding event and
-     * false after the mousedown event has been triggered to detect what
-     * caused rollup.
-     */
-    this._isHiding = false;
-
    this._bundle = null;
  }

--- a/browser/components/search/content/searchbar.js
+++ b/browser/components/search/content/searchbar.js
@ -43,17 +43,14 @@ class MozSearchbar extends MozXULElement {

    this.content = MozXULElement.parseXULToFragment(`
      <stringbundle src="chrome://browser/locale/search.properties"></stringbundle>
-      <textbox class="searchbar-textbox" type="autocomplete" inputtype="search" placeholder="&searchInput.placeholder;" flex="1" autocompletepopup="PopupSearchAutoComplete" autocompletesearch="search-autocomplete" autocompletesearchparam="searchbar-history" maxrows="10" completeselectedindex="true" minresultsforpopup="0">
-        <box>
-          <hbox class="searchbar-search-button" tooltiptext="&searchIcon.tooltip;">
-            <image class="searchbar-search-icon"></image>
-            <image class="searchbar-search-icon-overlay"></image>
-          </hbox>
-        </box>
-        <hbox class="search-go-container">
-          <image class="search-go-button urlbar-icon" hidden="true" onclick="handleSearchCommand(event);" tooltiptext="&contentSearchSubmit.tooltip;"></image>
-        </hbox>
-      </textbox>
+      <hbox class="searchbar-search-button" tooltiptext="&searchIcon.tooltip;">
+        <image class="searchbar-search-icon"></image>
+        <image class="searchbar-search-icon-overlay"></image>
+      </hbox>
+      <textbox class="searchbar-textbox" type="autocomplete" inputtype="search" placeholder="&searchInput.placeholder;" flex="1" autocompletepopup="PopupSearchAutoComplete" autocompletesearch="search-autocomplete" autocompletesearchparam="searchbar-history" maxrows="10" completeselectedindex="true" minresultsforpopup="0"/>
+      <hbox class="search-go-container">
+        <image class="search-go-button urlbar-icon" hidden="true" onclick="handleSearchCommand(event);" tooltiptext="&contentSearchSubmit.tooltip;"></image>
+      </hbox>
    `, ["chrome://browser/locale/browser.dtd"]);
  }

@ -75,7 +72,6 @@ class MozSearchbar extends MozXULElement {
    window.addEventListener("unload", this.destroy);
    this._ignoreFocus = false;

-    this._clickClosedPopup = false;
    this._engines = null;

    this.FormHistory = (ChromeUtils.import("resource://gre/modules/FormHistory.jsm", {})).FormHistory;
@ -433,12 +429,6 @@ class MozSearchbar extends MozXULElement {
      this.openSuggestionsPanel();
    }, true);

-    this.addEventListener("mousedown", (event) => {
-      if (event.originalTarget.classList.contains("searchbar-search-button")) {
-        this._clickClosedPopup = this._textbox.popup._isHiding;
-      }
-    }, true);
-
    this.addEventListener("mousedown", (event) => {
      // Ignore right clicks
      if (event.button != 0) {
@ -457,14 +447,12 @@ class MozSearchbar extends MozXULElement {

      let isIconClick = event.originalTarget.classList.contains("searchbar-search-button");

-      // Ignore clicks on the icon if they were made to close the popup
-      if (isIconClick && this._clickClosedPopup) {
-        return;
-      }
-
-      // Open the suggestions whenever clicking on the search icon or if there
-      // is text in the textbox.
-      if (isIconClick || this._textbox.value) {
+      // Hide popup when icon is clicked while popup is open
+      if (isIconClick && this.textbox.popup.popupOpen) {
+        this.textbox.popup.closePopup();
+      } else if (isIconClick || this._textbox.value) {
+        // Open the suggestions whenever clicking on the search icon or if there
+        // is text in the textbox.
        this.openSuggestionsPanel(true);
      }
    });
@ -647,19 +635,14 @@ class MozSearchbar extends MozXULElement {

        document.popupNode = null;

-        let outerRect = this.textbox.getBoundingClientRect();
-        let innerRect = this.textbox.inputField.getBoundingClientRect();
-        let width = RTL_UI ?
-          innerRect.right - outerRect.left :
-          outerRect.right - innerRect.left;
+        let anchor = this.closest("searchbar");
+        let { width } = anchor.getBoundingClientRect();
        popup.setAttribute("width", width > 100 ? width : 100);

        // invalidate() depends on the width attribute
        popup._invalidate();

-        let yOffset = outerRect.bottom - innerRect.bottom;
-        popup.openPopup(this.textbox.inputField, "after_start",
-                        0, yOffset, false, false);
+        popup.openPopup(anchor, "after_start");
      }
    };

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -197,7 +197,7 @@ menuitem.bookmark-item {

 #urlbar:not(:-moz-lwtheme):not([focused="true"]),
 #urlbar:not(:-moz-lwtheme).hidden-focus,
-.searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
+#searchbar:not(:-moz-lwtheme):not(:focus-within) {
  border-color: ThreeDShadow;
 }

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@ -249,7 +249,7 @@
 }

 #urlbar,
-.searchbar-textbox {
+#searchbar {
  font-size: 1.25em;
 }

@ -260,7 +260,7 @@ html|input.urlbar-input {
 }

 #urlbar:not(.hidden-focus)[focused="true"],
-.searchbar-textbox[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
@ -25,7 +25,7 @@
 }

 #urlbar,
-.searchbar-textbox {
+#searchbar {
  -moz-appearance: none;
  background-clip: content-box;
  border: 1px solid @fieldBorderColor@;
@ -38,42 +38,49 @@
  overflow: -moz-hidden-unscrollable;
 }

+.searchbar-textbox {
+  -moz-appearance: none;
+  background: none;
+  color: inherit;
+  margin: 0;
+}
+
 #urlbar:hover,
-.searchbar-textbox:hover {
+#searchbar:hover {
  border-color: @fieldHoverBorderColor@;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }

 #urlbar:-moz-lwtheme,
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme {
+#navigator-toolbox #searchbar:-moz-lwtheme {
  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
  color: var(--lwt-toolbar-field-color, black);
 }

 #urlbar:not([focused="true"]):-moz-lwtheme,
 #urlbar.hidden-focus:-moz-lwtheme,
-#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
+#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme {
  border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
 }

 #urlbar:not([focused="true"]):-moz-lwtheme:hover,
 #urlbar.hidden-focus:-moz-lwtheme:hover,
-#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
+#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme:hover {
  border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }

 #urlbar:-moz-lwtheme:hover,
-#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
+#navigator-toolbox #searchbar:-moz-lwtheme:hover {
  background-color: var(--lwt-toolbar-field-background-color, white);
 }

 #urlbar:not(.hidden-focus)[focused="true"],
-.searchbar-textbox[focused="true"] {
+#searchbar:focus-within {
  border-color: var(--toolbar-field-focus-border-color);
 }

 #urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
-#navigator-toolbox .searchbar-textbox:-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));
 }
@ -85,14 +92,14 @@
 }

 :root[uidensity=compact] #urlbar,
-:root[uidensity=compact] .searchbar-textbox {
+:root[uidensity=compact] #searchbar {
  min-height: 26px;
  margin-top: 3px;
  margin-bottom: 3px;
 }

 :root[uidensity=touch] #urlbar,
-:root[uidensity=touch] .searchbar-textbox {
+:root[uidensity=touch] #searchbar {
  min-height: 32px;
 }

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@ -548,14 +548,14 @@ menuitem.bookmark-item {
 %include ../shared/urlbar-searchbar.inc.css

 #urlbar,
-.searchbar-textbox {
+#searchbar {
  font-size: 1.15em;
 }

@media (-moz-windows-default-theme: 0) {
  #urlbar:not(:-moz-lwtheme):not([focused="true"]),
  #urlbar:not(:-moz-lwtheme).hidden-focus,
-  .searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
+  #searchbar:not(:-moz-lwtheme):not(:focus-within) {
    border-color: ThreeDShadow;
  }
 }
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@ -14,8 +14,6 @@ add_task(async function setup() {
 });

 add_task(async function test_support_toolbar_field_properties() {
-  let searchbar = BrowserSearch.searchBar;
-
  const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
  const TOOLBAR_FIELD_COLOR = "#00ff00";
  const TOOLBAR_FIELD_BORDER = "#aaaaff";
@ -51,7 +49,7 @@ add_task(async function test_support_toolbar_field_properties() {
  let toolbox = document.querySelector("#navigator-toolbox");
  let fields = [
    toolbox.querySelector("#urlbar"),
-    searchbar.querySelector(".searchbar-textbox"),
+    BrowserSearch.searchBar,
  ].filter(field => {
    let bounds = field.getBoundingClientRect();
    return bounds.width > 0 && bounds.height > 0;
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@ -12,17 +12,12 @@
  <binding id="autocomplete"
           extends="chrome://global/content/bindings/textbox.xml#textbox">
    <content sizetopopup="pref">
-      <children includes="image|box"/>
-
      <xul:moz-input-box anonid="moz-input-box" flex="1">
-        <children/>
        <html:input anonid="input" class="textbox-input"
                    allowevents="true"
                    autocomplete="off"
                    xbl:inherits="value,type=inputtype,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,mozactionhint"/>
      </xul:moz-input-box>
-      <children includes="hbox"/>
-
      <xul:popupset anonid="popupset" class="autocomplete-result-popupset"/>
    </content>