[chrome:omnibox] Output table styling.

This CL intends to style the output table to approximately resemble the end goal. There will be more styling changes in future as 1) a single CL for all the styling changes would be too large, and 2) some of the styling changes depend on changes to how we generate and manage the HTML elements from the JS code.
In addition to 1) trivial CSS styling, this CL also 2) scales the table and column widths with the page width (down to a minimum width) and therefore gives all tables the equal width and consistent column widths; and 3) merges the combined results and individual provider results tables into a single table delimited with inner header rows.

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

chrome/browser/browser_resources.grd

@@ -358,6 +358,7 @@
       <include name="IDR_LOCAL_STATE_HTML" file="resources\local_state\local_state.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_LOCAL_STATE_JS" file="resources\local_state\local_state.js" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_HTML" file="resources\omnibox\omnibox.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_OMNIBOX_COLUMN_WIDTHS_CSS" file="resources\omnibox\omnibox_column_widths.css" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_CSS" file="resources\omnibox\omnibox.css" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_ELEMENT_JS" file="resources\omnibox\omnibox_element.js" type="BINDATA" compress="gzip" />
       <include name="IDR_OMNIBOX_INPUTS_JS" file="resources\omnibox\omnibox_inputs.js" type="BINDATA" compress="gzip" />

chrome/browser/resources/omnibox/omnibox.css

@@ -2,21 +2,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.autocomplete-results-table {
-  margin-bottom: 1.5em;
-}
-
-.autocomplete-results-table th {
-  background-color: #C0C0C0;
-}
-
-.autocomplete-results-table tr {
-  background-color: #F0F0F0;
-}
+@import url(omnibox_column_widths.css);
 
-.group-separator {
-  display: block;
-  text-decoration: underline;
+.details-and-table {
+  margin-bottom: 60px;
 }
 
 .left-20 {
@@ -41,28 +30,78 @@
   background-image: url(../../../../ui/webui/resources/images/cancel_red.svg);
 }
 
-p {
+p,
+pre {
   margin: 0;
 }
 
 .section {
-  margin-bottom: 1em;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
-.table-header {
+body {
+  background-color: #fcfcfc;
+}
+
+table {
+  background-color: white;
+  border: 2px solid #ccc;
+  border-collapse: collapse;
+  font-family: monospace;
+  font-size: 12px;
+  min-width: 900px;
+  overflow-wrap: break-word;
+  table-layout: fixed;
+  text-align: left;
+  width: 100%;
+}
+
+table * {
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.additional-info-property,
-.additional-info-value {
+thead tr {
+  background-color: #f8f8f8;
+  color: #555;
+  font-size: 15px;
+  font-weight: bold;
+  letter-spacing: 0;
+  vertical-align: bottom;
   white-space: nowrap;
 }
 
+tbody tr {
+  height: 44px;
+  transition-duration: 300ms;
+}
+
+tbody tr:hover * {
+  background-color: #f8f8f8;
+  white-space: normal;
+}
+
+th,
+td {
+  padding: 0 5px;
+}
+
+th {
+  padding-bottom: 10px;
+  padding-top: 20px;
+}
+
+tbody:not(:first-of-type) td:first-of-type {
+  font-size: 0;
+}
+
 .filtered-hidden {
   display: none;
 }
 
-.autocomplete-results-table .filtered-highlighted {
+.filtered-highlighted {
   background-color: lightskyblue;
   /* TODO(manukh) This is a placholder color until other ui changes occur. */
 }

chrome/browser/resources/omnibox/omnibox.html

@@ -76,6 +76,7 @@
       <button id="copy-text" title="Copy visible table in text format. This is affected by the visibility of ouput; i.e. toggling `Show all details` affects what will be copied.">Copy as text</button>
       <button id="copy-json" title="Copy responses in JSON format. This is not affected by the visibility of output and will copy responses in their entirety.">Copy as JSON</button>
     </div>
+
     <div class="section">
       <input id="filter-text" type="text" size="60" placeholder="Filter output">
       <label class="toggle left-20">
@@ -91,32 +92,20 @@
     <div id="contents"></div>
   </template>
 
-  <template id="results-group-template">
-    <div class="details"></div>
-    <div class="combined-results">
-      <p>Combined results</p>
+  <template id="details-and-table-template">
+    <div class="details-and-table">
+      <div class="details"></div>
+      <table class="table"></table>
     </div>
-    <div class="individual-results"></div>
   </template>
 
-  <template id="results-group-details-template">
+  <template id="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">
-      </tbody>
-    </table>
-  </template>
-
   <div class="section">
     <omnibox-inputs id="omnibox-inputs"></omnibox-inputs>
   </div>

chrome/browser/resources/omnibox/omnibox_column_widths.css

+/* Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+.column-provider-name {
+  width: 100%;
+}
+
+.column-type {
+  width: 160%;
+}
+
+.column-relevance {
+  width: 100%;
+}
+
+.column-contents {
+  width: 200%;
+}
+
+.column-description {
+  width: 280%;
+}
+
+.column-destination-url {
+  width: 220%;
+}
+
+.column-fill-into-edit {
+  width: 180%;
+}
+
+.column-inline-autocompletion {
+  width: 180%;
+}
+
+.column-transition {
+  width: 60px;
+}
+
+.column-associated-keyword {
+  width: 120%;
+}
+
+.column-keyword {
+  width: 120%;
+}
+
+.column-additional-info {
+  width: 240%;
+}
+
+.column-additional-properties {
+  width: 240%;
+}
+
+.column-allowed-to-be-default-match,
+.column-starred,
+.column-has-tab-match,
+.column-deletable,
+.column-from-previous,
+.column-provider-done,
+.column-duplicates {
+  width: 18px;
+}

chrome/browser/resources/omnibox/omnibox_output.js

@@ -345,19 +345,31 @@ cr.define('omnibox_output', function() {
      * @return {!Element}
      */
     render(showDetails, showIncompleteResults, showAllProviders) {
-      const resultsGroupNode =
-          OmniboxElement.getTemplate('results-group-template');
+      const detailsAndTable =
+          OmniboxElement.getTemplate('details-and-table-template');
       if (showDetails || showIncompleteResults) {
-        resultsGroupNode.querySelector('.details')
+        detailsAndTable.querySelector('.details')
             .appendChild(this.renderDetails_());
       }
-      resultsGroupNode.querySelector('.combined-results')
-          .appendChild(this.combinedResults.render(showDetails));
+
+      const showAdditionalPropertiesColumn =
+          this.showAdditionalPropertiesColumn_(showDetails);
+
+      detailsAndTable.querySelector('.table').appendChild(
+          OutputResultsTable.renderHeader(
+              showDetails, showAdditionalPropertiesColumn));
+      detailsAndTable.querySelector('.table').appendChild(
+          this.combinedResults.render(showDetails));
       if (showAllProviders) {
-        resultsGroupNode.querySelector('.individual-results')
-            .appendChild(this.renderIndividualResults_(showDetails));
+        this.individualResultsList.forEach(individualResults => {
+          detailsAndTable.querySelector('.table').appendChild(
+              individualResults.renderInnerHeader(
+                  showDetails, showAdditionalPropertiesColumn));
+          detailsAndTable.querySelector('.table').appendChild(
+              individualResults.render(showDetails));
+        });
       }
-      return resultsGroupNode;
+      return detailsAndTable;
     }
 
     /**
@@ -365,8 +377,7 @@ cr.define('omnibox_output', function() {
      * @return {!Element}
      */
     renderDetails_() {
-      const details =
-          OmniboxElement.getTemplate('results-group-details-template');
+      const details = OmniboxElement.getTemplate('details-template');
       details.querySelector('.cursor-position').textContent =
           this.details.cursorPosition;
       details.querySelector('.time').textContent = this.details.time;
@@ -380,15 +391,13 @@ cr.define('omnibox_output', function() {
     /**
      * @private
      * @param {boolean} showDetails
-     * @return {!Element}
+     * @return {boolean}
      */
-    renderIndividualResults_(showDetails) {
-      const individualResultsNode = OmniboxElement.getTemplate(
-          'results-group-individual-results-template');
-      this.individualResultsList.forEach(
-          individualResults => individualResultsNode.appendChild(
-              individualResults.render(showDetails)));
-      return individualResultsNode;
+    showAdditionalPropertiesColumn_(showDetails) {
+      return showDetails &&
+          (this.combinedResults.hasAdditionalProperties ||
+           this.individualResultsList.some(
+               results => results.hasAdditionalProperties));
     }
 
     /** @return {!Array<!OutputMatch>} */
@@ -410,24 +419,59 @@ cr.define('omnibox_output', function() {
       this.matches = results.map(match => new OutputMatch(match));
     }
 
+    /**
+     * @param {boolean} showDetails
+     * @param {boolean} showAdditionalPropertiesColumn
+     * @return {Element}
+     */
+    static renderHeader(showDetails, showAdditionalPropertiesColumn) {
+      const head = document.createElement('thead');
+      const row = document.createElement('tr');
+      const cells =
+          OutputMatch.displayedProperties(showDetails)
+              .map(
+                  ({header, url, tooltip}) =>
+                      OutputMatch.renderHeaderCell(header, url, tooltip));
+      if (showAdditionalPropertiesColumn)
+        cells.push(OutputMatch.renderHeaderCell('Additional Properties'));
+      cells.forEach(cell => row.appendChild(cell));
+      head.appendChild(row);
+      return head;
+    }
+
     /**
      * Creates a HTML Node representing this data.
      * @param {boolean} showDetails
      * @return {!Element}
      */
     render(showDetails) {
-      const resultsTable = OmniboxElement.getTemplate('results-table-template');
-      // The additional properties column only needs be displayed if at least
-      // one of the results have additional properties.
-      const showAdditionalPropertiesHeader = this.matches.some(
-          match => match.showAdditionalProperties(showDetails));
-      resultsTable.querySelector('.results-table-body')
-          .appendChild(OutputMatch.renderHeader_(
-              showDetails, showAdditionalPropertiesHeader));
+      const body = document.createElement('tbody');
       this.matches.forEach(
-          match => resultsTable.querySelector('.results-table-body')
-                       .appendChild(match.render(showDetails)));
-      return resultsTable;
+          match => body.appendChild(match.render(showDetails)));
+      return body;
+    }
+
+    /**
+     * @param {boolean} showDetails
+     * @param {boolean} showAdditionalPropertiesColumn
+     * @return {!Element}
+     */
+    renderInnerHeader(showDetails, showAdditionalPropertiesColumn) {
+      const head = document.createElement('thead');
+      const row = document.createElement('tr');
+      const cell = document.createElement('th');
+      // Reserve 1 more column if showing the additional properties column.
+      cell.colSpan = OutputMatch.displayedProperties(showDetails).length +
+          showAdditionalPropertiesColumn;
+      cell.textContent = this.matches[0].properties.providerName;
+      row.appendChild(cell);
+      head.appendChild(row);
+      return head;
+    }
+
+    /** @return {boolean} */
+    get hasAdditionalProperties() {
+      return this.matches.some(match => match.hasAdditionalProperties);
     }
   }
 
@@ -485,7 +529,7 @@ cr.define('omnibox_output', function() {
           })
           .forEach(cell => row.appendChild(cell));
 
-      if (this.showAdditionalProperties(showDetails)) {
+      if (showDetails && this.hasAdditionalProperties) {
         row.appendChild(
             OutputMatch.renderJsonProperty_(this.additionalProperties));
       }
@@ -563,35 +607,12 @@ cr.define('omnibox_output', function() {
     }
 
     /**
-     * @private
-     * @param {boolean} showDetails
-     * @param {boolean} showAdditionalHeader
-     * @return {!Element}
-     */
-    static renderHeader_(showDetails, showAdditionalHeader) {
-      const row = document.createElement('tr');
-      const headerCells =
-          OutputMatch.displayedProperties(showDetails)
-              .map(
-                  displayProperty => OutputMatch.renderHeaderCell_(
-                      displayProperty.header, displayProperty.url,
-                      displayProperty.tooltip));
-      if (showAdditionalHeader) {
-        headerCells.push(
-            OutputMatch.renderHeaderCell_('Additional Properties'));
-      }
-      headerCells.forEach(headerCell => row.appendChild(headerCell));
-      return row;
-    }
-
-    /**
-     * @private
      * @param {string} name
      * @param {string=} url
      * @param {string=} tooltip
      * @return {!Element}
      */
-    static renderHeaderCell_(name, url, tooltip) {
+    static renderHeaderCell(name, url, tooltip) {
       const cell = document.createElement('th');
       if (url) {
         const link = document.createElement('a');
@@ -601,6 +622,8 @@ cr.define('omnibox_output', function() {
       } else {
         cell.textContent = name;
       }
+      cell.className =
+          'column-' + name.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
       cell.title = tooltip || '';
       return cell;
     }
@@ -616,12 +639,11 @@ cr.define('omnibox_output', function() {
     }
 
     /**
-     * @return {boolean} True if the additional properties column is required
-     * to be displayed for this result. False if the column can be hidden
-     * because this result does not have additional properties.
+     * @return {boolean} Used to determine if the additional properties column
+     * needs to be displayed for this match.
      */
-    showAdditionalProperties(showDetails) {
-      return showDetails && Object.keys(this.additionalProperties).length;
+    get hasAdditionalProperties() {
+      return Object.keys(this.additionalProperties).length > 0;
     }
   }
 

chrome/browser/ui/webui/omnibox/omnibox_ui.cc

@@ -18,6 +18,8 @@ OmniboxUI::OmniboxUI(content::WebUI* web_ui) : ui::MojoWebUIController(web_ui) {
   // Set up the chrome://omnibox/ source.
   content::WebUIDataSource* source =
       content::WebUIDataSource::Create(chrome::kChromeUIOmniboxHost);
+  source->AddResourcePath("omnibox_column_widths.css",
+                          IDR_OMNIBOX_COLUMN_WIDTHS_CSS);
   source->AddResourcePath("omnibox.css", IDR_OMNIBOX_CSS);
   source->AddResourcePath("omnibox_element.js", IDR_OMNIBOX_ELEMENT_JS);
   source->AddResourcePath("omnibox_inputs.js", IDR_OMNIBOX_INPUTS_JS);