[chrome:omnibox] Join columns 'Fill Into Edit' and 'Inline Autocompletion'.

Additionally, typically the inline text is a suffix of the fill text; e.g.
typing 'g', may result in the inline text 'oogle.com' and fill text
'google.com'. To conserve space and mimick how the actual omnibox displays the
inline and fill texts, we display the inline text only once, and format it (1px
border & bold font) to distinguish it from the fill text; e.g. g|oogle.com|. In
the yet-unencountered case where the inline text is not a suffix of the fill
text, we display both adjacent.

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

chrome/browser/resources/omnibox/omnibox.css

@@ -183,3 +183,22 @@ tbody:not(:first-of-type) td.cell-provider-and-type .pair-item:first-child {
 .cell-contents-and-description .pair-item:first-child {
   color: blue;
 }
+
+.cell-fill-and-inline .pair-item {
+  display: inline-block;
+  vertical-align: middle;
+  word-break: break-all;
+}
+
+.cell-fill-and-inline .pair-item:first-child {
+  border: 1px solid white;
+}
+
+.cell-fill-and-inline .pair-item:nth-child(2):not(:empty) {
+  border: 1px solid;
+  font-weight: bold;
+}
+
+.cell-fill-and-inline .overlap-warning {
+  color: red;
+}

chrome/browser/resources/omnibox/omnibox_column_widths.css

@@ -18,11 +18,7 @@
   width: 220%;
 }
 
-.header-fill-into-edit {
-  width: 180%;
-}
-
-.header-inline-autocompletion {
+.header-fill-and-inline {
   width: 180%;
 }
 

chrome/browser/resources/omnibox/omnibox_output.js

@@ -487,19 +487,19 @@ cr.define('omnibox_output', function() {
     constructor() {
       super();
 
-      const container = document.createElement('span');
-      container.classList.add('pair-container');
-      this.appendChild(container);
+      this.container_ = document.createElement('div');
+      this.container_.classList.add('pair-container');
+      this.appendChild(this.container_);
 
       /** @type {!Element} */
       this.first_ = document.createElement('div');
       this.first_.classList.add('pair-item');
-      container.appendChild(this.first_);
+      this.container_.appendChild(this.first_);
 
       /** @type {!Element} */
       this.second_ = document.createElement('div');
       this.second_.classList.add('pair-item');
-      container.appendChild(this.second_);
+      this.container_.appendChild(this.second_);
     }
 
     /** @private @override */
@@ -514,6 +514,32 @@ cr.define('omnibox_output', function() {
     }
   }
 
+  class OutputOverlappingPairProperty extends OutputPairProperty {
+    constructor() {
+      super();
+
+      this.notOverlapWarning_ = document.createElement('div');
+      this.notOverlapWarning_.classList.add('overlap-warning');
+      this.container_.appendChild(this.notOverlapWarning_);
+    }
+
+    /** @private @override */
+    render_() {
+      const overlap = this.values_[0].endsWith(this.values_[1]);
+      const firstText = this.values_[1] && overlap ?
+          this.values_[0].slice(0, -this.values_[1].length) :
+          this.values_[0];
+
+      this.first_.textContent = firstText;
+      this.second_.textContent = this.values_[1];
+      this.notOverlapWarning_.textContent = overlap ?
+          '' :
+          `btw, these texts do not overlap; '${
+              this.values_[1]}' was expected to be a suffix of '${
+              this.values_[0]}'`;
+    }
+  }
+
   class OutputBooleanProperty extends OutputProperty {
     constructor() {
       super();
@@ -777,14 +803,12 @@ cr.define('omnibox_output', function() {
         'URL', '', 'destinationUrl', true, 'The URL for the result.',
         ['destinationUrl'], OutputLinkProperty),
     new Column(
-        'Fill Into Edit', '', 'fillIntoEdit', false,
-        'The text shown in the omnibox when the result is selected.',
-        ['fillIntoEdit'], OutputTextProperty),
-    new Column(
-        'Inline Autocompletion', '', 'inlineAutocompletion', false,
-        'The text shown in the omnibox as a blue highlight selection ' +
+        'Fill & Inline', '', 'fillAndInline', false,
+        'The text shown in the omnibox when the result is selected. / The ' +
+            'text shown in the omnibox as a blue highlight selection ' +
             'following the cursor, if this match is shown inline.',
-        ['inlineAutocompletion'], OutputTextProperty),
+        ['fillIntoEdit', 'inlineAutocompletion'],
+        OutputOverlappingPairProperty),
     new Column(
         'Del', '', 'deletable', false,
         'A green checkmark indicates that the result can be deleted from the ' +
@@ -840,6 +864,9 @@ cr.define('omnibox_output', function() {
   customElements.define('output-haeder', OutputHeader, {extends: 'th'});
   customElements.define(
       'output-pair-property', OutputPairProperty, {extends: 'td'});
+  customElements.define(
+      'output-overlapping-pair-property', OutputOverlappingPairProperty,
+      {extends: 'td'});
   customElements.define(
       'output-boolean-property', OutputBooleanProperty, {extends: 'td'});
   customElements.define(