[omnibox] [chrome://omnibox] Toggle expanded row height on click.

This makes it easier to read long URLs or other fields.

Change-Id: I33a943a82fe9a3a9a4d2f2f5ef30c8fbb6197bcd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2107691
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751390}

chrome/browser/resources/omnibox/omnibox_output.js

@@ -394,6 +394,15 @@ class OutputResultsTable extends HTMLTableSectionElement {
 
 /** Helps track and render a single match. */
 class OutputMatch extends HTMLTableRowElement {
+  constructor() {
+    super();
+    let mouseMoved;
+    this.addEventListener('mousedown', () => mouseMoved = false);
+    this.addEventListener('mousemove', () => mouseMoved = true);
+    this.addEventListener(
+        'click', () => !mouseMoved && this.classList.toggle('expanded'));
+  }
+
   /**
    * @param {!mojom.AutocompleteMatch} match
    * @return {!OutputMatch}

chrome/browser/resources/omnibox/output_results_group.css

@@ -53,6 +53,14 @@ table {
   max-height: 28px;
 }
 
+.body tr.expanded {
+  height: 200px;
+}
+
+.body tr.expanded td > * {
+  max-height: 190px;
+}
+
 .body td {
   white-space: pre-wrap;
   word-break: break-all;