[chrome:omnibox]: Refactoring HTML generation part 3/3, create OutputResultsGroup helper class.

This is the 3rd of 3 CL's to replace the global static helper functions which manipulate the DOM with classes. In this CL, we replace the function addResultToOutput with OutputResultsGroup, which is responsible for generating HTML for each response from C++ AutocompleteController. Multiple responses can be returned for a single query, each is handled by unique OutputResultsGroup.

Bug: 891303
Change-Id: I385ee9b3b299d640f9cfb62d0b3bef5c704adbe8
Reviewed-on: https://chromium-review.googlesource.com/c/1294412
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603484}

chrome/browser/resources/omnibox/omnibox.html

@@ -73,6 +73,25 @@
     <div id="contents"></div>
   </template>
 
+  <template id="results-group-template">
+    <div class="details"></div>
+    <div class="combined-results">
+      <p>Combined results</p>
+    </div>
+    <div class="individual-results"></div>
+  </template>
+
+  <template id="results-group-details-template">
+    <p>cursor position = <span class="cursor-position"></span></p>
+    <p>elapsed time = <span class="time"></span>ms</p>
+    <p>all providers done = <span class="done"></span></p>
+    <p>host = <span class="host"></span>, has isTypedHost = <span class="is-typed-host"></span></p>
+  </template>
+
+  <template id="results-group-individual-results-template">
+    <p>individual results</p>
+  </template>
+
   <template id="results-table-template">
     <table class="autocomplete-results-table">
       <tbody class="results-table-body">

chrome/browser/resources/omnibox/omnibox.js

@@ -82,79 +82,11 @@
    * for each autocomplete match.  The input parameter is an OmniboxResultMojo.
    */
   function addResultToOutput(result) {
-    const inDetailedMode = omniboxInputs.$$('show-details').checked;
-
-    // Output the result-level features in detailed mode and in
-    // show incomplete results mode.  We do the latter because without
-    // these result-level features, one can't make sense of each
-    // batch of results.
-    if (omniboxInputs.$$('show-details').checked
-        || omniboxInputs.$$('show-incomplete-results').checked) {
-      addParagraph(`cursor position = ${cursorPosition}`);
-      addParagraph(`inferred input type = ${result.type}`);
-      addParagraph(`elapsed time = ${result.timeSinceOmniboxStartedMs}ms`);
-      addParagraph(`all providers done = ${result.done}`);
-      const p = document.createElement('p');
-      p.textContent = `host = ${result.host}`;
-      // The field isn't actually optional in the mojo object; instead it assumes
-      // failed lookups are not typed hosts.  Fix this to make it optional.
-      // http://crbug.com/863201
-      if ('isTypedHost' in result) {
-        // Only output the isTypedHost information if available.  (It may
-        // be missing if the history database lookup failed.)
-        p.textContent =
-            p.textContent + ` has isTypedHost = ${result.isTypedHost}`;
-      }
-      omniboxOutput.addOutput(p);
-    }
-
-    // Combined results go after the lines below.
-    const group = document.createElement('a');
-    group.className = 'group-separator';
-    group.textContent = 'Combined results.';
-    omniboxOutput.addOutput(group);
-
-    // Add combined/merged result table.
-    const p = document.createElement('p');
-    const table = new omnibox_output.OutputResultsTable(result.combinedResults)
-                      .render(inDetailedMode);
-    p.appendChild(table);
-    omniboxOutput.addOutput(p);
-
-    // Move forward only if you want to display per provider results.
-    if (!omniboxInputs.$$('show-all-providers').checked) {
-      return;
-    }
-
-    // Individual results go after the lines below.
-    const individualGroup = document.createElement('a');
-    individualGroup.className = 'group-separator';
-    individualGroup.textContent = 'Results for individual providers.';
-    omniboxOutput.addOutput(individualGroup);
-
-    // Add the per-provider result tables with labels. We do not append the
-    // combined/merged result table since we already have the per provider
-    // results.
-    result.resultsByProvider.forEach(providerResults => {
-      // If we have no results we do not display anything.
-      if (providerResults.results.length === 0)
-        return;
-      const p = document.createElement('p');
-      const table =
-          new omnibox_output.OutputResultsTable(providerResults.results)
-              .render(inDetailedMode);
-      p.appendChild(table);
-      omniboxOutput.addOutput(p);
-    });
-  }
-
-  /**
-   * Appends a paragraph node containing text to the parent node.
-   */
-  function addParagraph(text) {
-    const p = document.createElement('p');
-    p.textContent = text;
-    omniboxOutput.addOutput(p);
+    const resultsGroup = new omnibox_output.OutputResultsGroup(result).render(
+        omniboxInputs.$$('show-details').checked,
+        omniboxInputs.$$('show-incomplete-results').checked,
+        omniboxInputs.$$('show-all-providers').checked);
+    omniboxOutput.addOutput(resultsGroup);
   }
 
   class BrowserProxy {

chrome/browser/resources/omnibox/omnibox_output.js

@@ -191,7 +191,96 @@ cr.define('omnibox_output', function() {
     }
   }
 
-  /** Helps track and render a list of results. */
+  /**
+   * Helps track and render a results group. C++ Autocomplete typically returns
+   * 3 result groups per query. It may return less if the next query is
+   * submitted before all 3 have been returned. Each result group contains
+   * top level information (e.g., how long the result took to generate), as well
+   * as a single list of combined results and multiple lists of individual
+   * results. Each of these lists is tracked and rendered by OutputResultsTable
+   * below.
+   */
+  class OutputResultsGroup {
+    /** @param {!mojom.OmniboxResult} resultsGroup */
+    constructor(resultsGroup) {
+      /** @struct */
+      this.details = {
+        cursorPosition: 0,
+        time: resultsGroup.timeSinceOmniboxStartedMs,
+        done: resultsGroup.done,
+        host: resultsGroup.host,
+        isTypedHost: resultsGroup.isTypedHost
+      };
+      /** @type {OutputResultsTable} */
+      this.combinedResults =
+          new OutputResultsTable(resultsGroup.combinedResults);
+      /** @type {Array<OutputResultsTable>} */
+      this.individualResultsList =
+          resultsGroup.resultsByProvider
+              .map(resultsWrapper => resultsWrapper.results)
+              .filter(results => results.length > 0)
+              .map(results => new OutputResultsTable(results));
+    }
+
+    /**
+     * Creates a HTML Node representing this data.
+     * @param {boolean} showDetails
+     * @param {boolean} showIncompleteResults
+     * @param {boolean} showAllProviders
+     * @return {Element}
+     */
+    render(showDetails, showIncompleteResults, showAllProviders) {
+      const resultsGroupNode =
+          OmniboxElement.getTemplate('results-group-template');
+      if (showDetails || showIncompleteResults) {
+        resultsGroupNode.querySelector('.details')
+            .appendChild(this.renderDetails_());
+      }
+      resultsGroupNode.querySelector('.combined-results')
+          .appendChild(this.combinedResults.render(showDetails));
+      if (showAllProviders) {
+        resultsGroupNode.querySelector('.individual-results')
+            .appendChild(this.renderIndividualResults_(showDetails));
+      }
+      return resultsGroupNode;
+    }
+
+    /**
+     * @private
+     * @return {Element}
+     */
+    renderDetails_() {
+      const details =
+          OmniboxElement.getTemplate('results-group-details-template');
+      details.querySelector('.cursor-position').textContent =
+          this.details.cursorPosition;
+      details.querySelector('.time').textContent = this.details.time;
+      details.querySelector('.done').textContent = this.details.done;
+      details.querySelector('.host').textContent = this.details.host;
+      details.querySelector('.is-typed-host').textContent =
+          this.details.isTypedHost;
+      return details;
+    }
+
+    /**
+     * @private
+     * @param {boolean} showDetails
+     * @return {Element}
+     */
+    renderIndividualResults_(showDetails) {
+      const individualResultsNode = OmniboxElement.getTemplate(
+          'results-group-individual-results-template');
+      this.individualResultsList.forEach(
+          individualResults => individualResultsNode.appendChild(
+              individualResults.render(showDetails)));
+      return individualResultsNode;
+    }
+  }
+
+  /**
+   * Helps track and render a list of results. Each result is tracked and
+   * rendered by OutputMatch below.
+   */
   class OutputResultsTable {
     /** @param {Array<!mojom.AutocompleteMatch>} results */
     constructor(results) {
@@ -202,7 +291,7 @@ cr.define('omnibox_output', function() {
     /**
      * Creates a HTML Node representing this data.
      * @param {boolean} showDetails
-     * @return {Node}
+     * @return {Element}
      */
     render(showDetails) {
       const resultsTable = OmniboxElement.getTemplate('results-table-template');
@@ -248,10 +337,10 @@ cr.define('omnibox_output', function() {
     /**
      * Creates a HTML Node representing this data.
      * @param {boolean} showDetails
-     * @return {Node}
+     * @return {Element}
      */
     render(showDetails) {
-      const match = document.createElement('tr');
+      const row = document.createElement('tr');
       OutputMatch.displayedProperties(showDetails)
           .map(property => {
             const value = this.properties[property.propertyName];
@@ -261,13 +350,13 @@ cr.define('omnibox_output', function() {
               return OutputMatch.renderBooleanProperty_(value);
             return OutputMatch.renderTextProperty_(value);
           })
-          .forEach(cell => match.appendChild(cell));
+          .forEach(cell => row.appendChild(cell));
 
       if (this.showAdditionalProperties(showDetails)) {
-        match.appendChild(
+        row.appendChild(
             OutputMatch.renderJsonProperty_(this.additionalProperties));
       }
-      return match;
+      return row;
     }
 
     /**
@@ -275,7 +364,7 @@ cr.define('omnibox_output', function() {
      * rendering becomes more substantial
      * @private
      * @param {string} propertyValue
-     * @return {Node}
+     * @return {Element}
      */
     static renderTextProperty_(propertyValue) {
       const cell = document.createElement('td');
@@ -286,7 +375,7 @@ cr.define('omnibox_output', function() {
     /**
      * @private
      * @param {Object} propertyValue
-     * @return {Node}
+     * @return {Element}
      */
     static renderJsonProperty_(propertyValue) {
       const cell = document.createElement('td');
@@ -299,7 +388,7 @@ cr.define('omnibox_output', function() {
     /**
      * @private
      * @param {boolean} propertyValue
-     * @return {Node}
+     * @return {Element}
      */
     static renderBooleanProperty_(propertyValue) {
       const cell = document.createElement('td');
@@ -314,7 +403,7 @@ cr.define('omnibox_output', function() {
      * @private
      * @param {boolean} showDetails
      * @param {boolean} showAdditionalHeader
-     * @return {Node}
+     * @return {Element}
      */
     static renderHeader_(showDetails, showAdditionalHeader) {
       const row = document.createElement('tr');
@@ -337,7 +426,7 @@ cr.define('omnibox_output', function() {
      * @param {string} name
      * @param {string=} url
      * @param {string=} tooltip
-     * @return {Node}
+     * @return {Element}
      */
     static renderHeaderCell_(name, url, tooltip) {
       const cell = document.createElement('th');
@@ -381,6 +470,6 @@ cr.define('omnibox_output', function() {
   // https://chromium.googlesource.com/chromium/src/+/master/styleguide/web/es6.md#object-literal-extensions
   return {
     OmniboxOutput: OmniboxOutput,
-    OutputResultsTable: OutputResultsTable,
+    OutputResultsGroup: OutputResultsGroup,
   };
 });