[omnibox chrome:omnibox]: Fix table overflowing.

Certain table cells contain children div's with negative right-margins
as a workaround for the lack of flex-gap-support (see comments in
omnibox_output.js for more details). When the direct child of a table
cell has negative margins, the child overflows the right side of the
cell causing:

1) The overflowing cell's scrollbar will overlay adjacent cells.
2) If the overflowing cell is in the rightmost table column, it
overflows the table as well, causing the page to receive a horizontal
scroll bar.

To avoid these issues, this CL nests div's with negative margins inside
'dummy' parent div's.

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

chrome/browser/resources/omnibox/omnibox_output.js

@@ -577,13 +577,34 @@ cr.define('omnibox_output', function() {
     }
   }
 
-  class OutputPairProperty extends OutputProperty {
+  class FlexWrappingOutputProperty extends OutputProperty {
     constructor() {
       super();
 
+      // We use margin-right on .pair-item's to separate them. To compensate,
+      // .pair-container has negative margin-right. This means .pair-container's
+      // overflow their parent. Overflowing a table cell is problematic, as 1)
+      // scroll bars overlay adjacent cell, and 2) the page receives a
+      // horizontal scroll bar when the right most column overflows. To avoid
+      // this, we ensure the parent of any element with negative margins (e.g.
+      // .pair-container) is not a table cell; hence, we introduce
+      // scrollContainer_.
+      // Flex gutters may provide a cleaner alternative once implemented.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items
+      /** @private {!Element} */
+      this.scrollContainer_ = document.createElement('div');
+      this.appendChild(this.scrollContainer_);
+
+      /** @private {!Element} */
       this.container_ = document.createElement('div');
       this.container_.classList.add('pair-container');
-      this.appendChild(this.container_);
+      this.scrollContainer_.appendChild(this.container_);
+    }
+  }
+
+  class OutputPairProperty extends FlexWrappingOutputProperty {
+    constructor() {
+      super();
 
       /** @type {!Element} */
       this.first_ = document.createElement('div');
@@ -633,15 +654,10 @@ cr.define('omnibox_output', function() {
     }
   }
 
-  class OutputAnswerProperty extends OutputProperty {
+  class OutputAnswerProperty extends FlexWrappingOutputProperty {
     constructor() {
       super();
 
-      /** @private {!Element} */
-      this.container_ = document.createElement('div');
-      this.container_.classList.add('pair-container');
-      this.appendChild(this.container_);
-
       /** @type {!Element} */
       this.image_ = document.createElement('img');
       this.image_.classList.add('pair-item');
@@ -789,15 +805,10 @@ cr.define('omnibox_output', function() {
     }
   }
 
-  class OutputUrlProperty extends OutputProperty {
+  class OutputUrlProperty extends FlexWrappingOutputProperty {
     constructor() {
       super();
 
-      /** @private {!Element} */
-      this.container_ = document.createElement('div');
-      this.container_.classList.add('pair-container');
-      this.appendChild(this.container_);
-
       /** @private {!Element} */
       this.iconAndUrlContainer_ = document.createElement('div');
       this.iconAndUrlContainer_.classList.add('pair-item');