Bug 1427350 - Part 1 - Use "autocomplete-rich-result-popup" instead of "autocomplete-result-popup" for the search bar. r=mak

MozReview-Commit-ID: AO926Wmhkbm

--HG--
extra : source : c16a5935dcadd320f54f5989d9f93f8710444b29

browser/base/content/browser.xul

@@ -143,7 +143,10 @@
            nomaxresults="true" />
 
     <!-- for search with one-off buttons -->
-    <panel type="autocomplete" id="PopupSearchAutoComplete" noautofocus="true" hidden="true"/>
+    <panel type="autocomplete-richlistbox"
+           id="PopupSearchAutoComplete"
+           noautofocus="true"
+           hidden="true" />
 
     <!-- for url bar autocomplete -->
     <panel type="autocomplete-richlistbox"

browser/components/search/content/search.xml

@@ -742,8 +742,8 @@
             }
 
             popup.mInput = this;
-            popup.view = this.controller.QueryInterface(Ci.nsITreeView);
-            popup.invalidate();
+            // clear any previous selection, see bugs 400671 and 488357
+            popup.selectedIndex = -1;
 
             popup.showCommentColumn = this.showCommentColumn;
             popup.showImageColumn = this.showImageColumn;
@@ -759,6 +759,9 @@
                         outerRect.right - innerRect.left;
             popup.setAttribute("width", width > 100 ? width : 100);
 
+            // invalidate() depends on the width attribute
+            popup._invalidate();
+
             var yOffset = outerRect.bottom - innerRect.bottom;
             popup.openPopup(this.inputField, "after_start", 0, yOffset, false, false);
           }
@@ -808,8 +811,7 @@
             }
             engine = oneOff.engine;
           }
-          if (this._selectionDetails &&
-              this._selectionDetails.currentIndex != -1) {
+          if (this._selectionDetails) {
             BrowserSearch.searchBar.telemetrySearchDetails = this._selectionDetails;
             this._selectionDetails = null;
           }
@@ -839,8 +841,8 @@
             return;
 
           let suggestionsHidden =
-            popup.tree.getAttribute("collapsed") == "true";
-          let numItems = suggestionsHidden ? 0 : this.popup.view.rowCount;
+            popup.richlistbox.getAttribute("collapsed") == "true";
+          let numItems = suggestionsHidden ? 0 : this.popup._matchCount;
           this.popup.oneOffButtons.handleKeyPress(aEvent, numItems, true);
         ]]></body>
       </method>
@@ -927,7 +929,7 @@
     </handlers>
   </binding>
 
-  <binding id="browser-search-autocomplete-result-popup" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-result-popup">
+  <binding id="browser-search-autocomplete-result-popup" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-rich-result-popup">
     <resources>
       <stylesheet src="chrome://browser/content/search/searchbarBindings.css"/>
       <stylesheet src="chrome://browser/skin/searchbar.css"/>
@@ -939,14 +941,7 @@
         <xul:label anonid="searchbar-engine-name" flex="1" crop="end"
                    role="presentation"/>
       </xul:hbox>
-      <xul:tree anonid="tree" flex="1"
-                class="autocomplete-tree plain search-panel-tree"
-                hidecolumnpicker="true" seltype="single">
-        <xul:treecols anonid="treecols">
-          <xul:treecol id="treecolAutoCompleteValue" class="autocomplete-treecol" flex="1" overflow="true"/>
-        </xul:treecols>
-        <xul:treechildren class="autocomplete-treebody searchbar-treebody" noSelectOnMouseMove="true"/>
-      </xul:tree>
+      <xul:richlistbox anonid="richlistbox" class="autocomplete-richlistbox search-panel-tree" flex="1"/>
       <xul:vbox anonid="search-one-off-buttons" class="search-one-offs"/>
     </content>
     <implementation>
@@ -976,7 +971,7 @@
           var popupForSearchBar = searchBar && searchBar.textbox == this.mInput;
           if (popupForSearchBar) {
             searchBar.telemetrySearchDetails = {
-              index: controller.selection.currentIndex,
+              index: this.selectedIndex,
               kind: "mouse"
             };
           }
@@ -1114,14 +1109,14 @@
 
           // Setting this with an xbl-inherited attribute gets overridden the
           // second time the user clicks the glass icon for some reason...
-          this.tree.collapsed = true;
+          this.richlistbox.collapsed = true;
         } else {
           this.removeAttribute("showonlysettings");
-          // Uncollapse as long as we have a tree with a view which has >= 1 row.
+          // Uncollapse as long as we have a view which has >= 1 row.
           // The autocomplete binding itself will take care of uncollapsing later,
           // if we currently have no rows but end up having some in the future
           // when the search string changes
-          this.tree.collapsed = !this.tree.view || !this.tree.view.rowCount;
+          this.richlistbox.collapsed = (this._matchCount == 0);
         }
 
         // Show the current default engine in the top header of the panel.

browser/components/search/test/browser_426329.js

@@ -33,16 +33,10 @@ function checkMenuEntries(expectedValues) {
 }
 
 function getMenuEntries() {
-  var entries = [];
-  var autocompleteMenu = searchBar.textbox.popup;
   // Could perhaps pull values directly from the controller, but it seems
-  // more reliable to test the values that are actually in the tree?
-  var column = autocompleteMenu.tree.columns[0];
-  var numRows = autocompleteMenu.tree.view.rowCount;
-  for (var i = 0; i < numRows; i++) {
-    entries.push(autocompleteMenu.tree.view.getValueAt(i, column));
-  }
-  return entries;
+  // more reliable to test the values that are actually in the richlistbox?
+  return Array.map(searchBar.textbox.popup.richlistbox.children,
+                   item => item.getAttribute("ac-value"));
 }
 
 function countEntries(name, value) {

browser/components/search/test/browser_private_search_perwindowpb.js

@@ -63,14 +63,8 @@ add_task(async function() {
 });
 
 function getMenuEntries(searchBar) {
-  let entries = [];
-  let autocompleteMenu = searchBar.textbox.popup;
   // Could perhaps pull values directly from the controller, but it seems
-  // more reliable to test the values that are actually in the tree?
-  let column = autocompleteMenu.tree.columns[0];
-  let numRows = autocompleteMenu.tree.view.rowCount;
-  for (let i = 0; i < numRows; i++) {
-    entries.push(autocompleteMenu.tree.view.getValueAt(i, column));
-  }
-  return entries;
+  // more reliable to test the values that are actually in the richlistbox?
+  return Array.map(searchBar.textbox.popup.richlistbox.children,
+                   item => item.getAttribute("ac-value"));
 }

browser/modules/test/browser/browser_UsageTelemetry_searchbar.js

@@ -40,27 +40,13 @@ let searchInSearchbar = async function(inputText) {
  *        The name of the elemet to click on.
  */
 function clickSearchbarSuggestion(entryName) {
-  let popup = BrowserSearch.searchBar.textbox.popup;
-  let column = popup.tree.columns[0];
+  let richlistbox = BrowserSearch.searchBar.textbox.popup.richlistbox;
+  let richlistitem = Array.prototype.find.call(richlistbox.children,
+                     item => item.getAttribute("ac-value") == entryName);
 
-  for (let rowID = 0; rowID < popup.tree.view.rowCount; rowID++) {
-    const suggestion = popup.tree.view.getValueAt(rowID, column);
-    if (suggestion !== entryName) {
-      continue;
-    }
-
-    // Make sure the suggestion is visible, just in case.
-    let tbo = popup.tree.treeBoxObject;
-    tbo.ensureRowIsVisible(rowID);
-    // Calculate the click coordinates.
-    let rect = tbo.getCoordsForCellItem(rowID, column, "text");
-    let x = rect.x + rect.width / 2;
-    let y = rect.y + rect.height / 2;
-    // Simulate the click.
-    EventUtils.synthesizeMouse(popup.tree.body, x, y, {},
-                               popup.tree.ownerGlobal);
-    break;
-  }
+  // Make sure the suggestion is visible and simulate the click.
+  richlistbox.ensureElementIsVisible(richlistitem);
+  EventUtils.synthesizeMouseAtCenter(richlistitem, {});
 }
 
 add_task(async function setup() {

browser/themes/shared/autocomplete.inc.css

@@ -28,29 +28,13 @@
   padding: 0;
 }
 
-.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
-  color: GrayText;
-}
-
-.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
-.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) {
-  color: GrayText;
-  font-size: smaller;
-}
-
-.autocomplete-treebody::-moz-tree-cell(suggesthint) {
-  border-top: 1px solid GrayText;
-}
-
 /* Popup states */
 
-.autocomplete-richlistitem:hover,
-treechildren.searchbar-treebody::-moz-tree-row(hover) {
+.autocomplete-richlistitem:hover {
   background-color: var(--arrowpanel-dimmed);
 }
 
-.autocomplete-richlistitem[selected],
-treechildren.searchbar-treebody::-moz-tree-row(selected) {
+.autocomplete-richlistitem[selected] {
   background-color: Highlight;
   color: HighlightText;
 }

browser/themes/shared/searchbar.inc.css

@@ -200,37 +200,37 @@
   list-style-image: none;
 }
 
-.search-panel-tree > .autocomplete-treebody,
-.search-panel-tree > .autocomplete-treebody::-moz-tree-row {
-  background: none;
+.search-panel-tree {
+  background: transparent;
+  color: inherit;
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
-  border-top: none !important;
+.search-panel-tree > .autocomplete-richlistitem {
+  padding: 1px;
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
-  color: var(--autocomplete-popup-color) !important;
-}
-
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  padding-inline-start: 2px;
-  padding-inline-end: 2px;
+.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
   width: 14px;
   height: 14px;
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon {
   list-style-image: url("chrome://browser/skin/history.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   fill-opacity: 0.6;
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory, selected) {
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon {
   fill-opacity: 1;
 }
 
+.search-panel-tree > .autocomplete-richlistitem > .ac-site-icon,
+.search-panel-tree > .autocomplete-richlistitem > .ac-separator,
+.search-panel-tree > .autocomplete-richlistitem > .ac-url {
+  display: none;
+}
+
 .search-setting-button {
   -moz-appearance: none;
   margin: 0;

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

@@ -11,10 +11,6 @@
   --autocomplete-popup-highlight-color: HighlightText;
 }
 
-#treecolAutoCompleteImage {
-  max-width: 36px;
-}
-
 #PopupAutoCompleteRichResult,
 #PopupSearchAutoComplete {
   background: var(--autocomplete-popup-background);
@@ -40,15 +36,11 @@
 }
 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem[selected],
-.search-panel-tree > .autocomplete-treebody::-moz-tree-row(selected) {
+#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
   background: var(--autocomplete-popup-highlight-background);
   color: var(--autocomplete-popup-highlight-color);
 }
 
-.search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text(selected) {
-  color: var(--autocomplete-popup-highlight-color) !important;
-}
-
 :root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
   min-height: 40px;
 }

toolkit/components/places/nsTaggingService.js

@@ -541,13 +541,7 @@ TagAutoCompleteResult.prototype = {
    * Get the style hint for the result at the given index
    */
   getStyleAt: function PTACR_getStyleAt(index) {
-    if (!this._comments[index])
-      return null; // not a category label, so no special styling
-
-    if (index == 0)
-      return "suggestfirst"; // category label on first line of results
-
-    return "suggesthint"; // category label on any other line of results
+    return null;
   },
 
   /**

toolkit/content/widgets/autocomplete.xml

@@ -501,9 +501,9 @@
                 if (aEvent.metaKey)
                   aEvent.preventDefault();
               }
-              if (this.mController.selection) {
+              if (this.popup.selectedIndex >= 0) {
                 this._selectionDetails = {
-                  index: this.mController.selection.currentIndex,
+                  index: this.popup.selectedIndex,
                   kind: "key"
                 };
               }