[chrome://omnibox]: Add download link to 'additional info' cells on hover.

The 'additional info' column can contain arbitrarily large contents. To make
viewing easier, this CL adds a download link to the cell on hover. Downloads
as JSON.

Change-Id: I004e050da09043fe9692e6a4b4e153645b2dc281
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1685896
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#676637}

chrome/browser/resources/omnibox/omnibox_output.js

@@ -824,25 +824,47 @@ cr.define('omnibox_output', function() {
      * @return {string|undefined}
      */
     static classifyJsonWord(word) {
-      if (/^\d+$/.test(word)) {
+      // Statically creating the regexes only once.
+      OutputJsonProperty.classifications =
+          OutputJsonProperty.classifications || [
+            {re: /^"[^]*":$/, clazz: 'key'},
+            {re: /^"[^]*"$/, clazz: 'string'},
+            {re: /true|false/, clazz: 'boolean'},
+            {re: /null/, clazz: 'null'},
+          ];
+      OutputJsonProperty.spaceRegex = OutputJsonProperty.spaceRegex || /^\s*$/;
+
+      // Using isNaN, because Number.isNaN checks explicitly for NaN whereas
+      // isNaN coerces the param to a Number. I.e. isNaN('3') === false, while
+      // Number.isNaN('3') === true.
+      if (isNaN(word)) {
+        const classification =
+            OutputJsonProperty.classifications.find(({re}) => re.test(word));
+        return classification && classification.clazz;
+      } else if (!OutputJsonProperty.spaceRegex.test(word)) {
         return 'number';
       }
-      if (/^"[^]*":$/.test(word)) {
-        return 'key';
-      }
-      if (/^"[^]*"$/.test(word)) {
-        return 'string';
-      }
-      if (/true|false/.test(word)) {
-        return 'boolean';
-      }
-      if (/null/.test(word)) {
-        return 'null';
-      }
     }
   }
 
-  class OutputAdditionalInfoProperty extends OutputJsonProperty {
+  class OutputAdditionalInfoProperty extends OutputProperty {
+    constructor() {
+      super();
+      const container = document.createElement('div');
+
+      /** @private {!Element} */
+      this.pre_ = document.createElement('pre');
+      this.pre_.classList.add('json');
+      container.appendChild(this.pre_);
+
+      /** @private {!Element} */
+      this.link_ = document.createElement('a');
+      this.link_.download = 'AdditionalInfo.json';
+
+      container.appendChild(this.link_);
+      this.appendChild(container);
+    }
+
     /** @private @override */
     render_() {
       clearChildren(this.pre_);
@@ -852,6 +874,7 @@ cr.define('omnibox_output', function() {
         this.pre_.appendChild(
             OutputJsonProperty.renderJsonWord(value + '\n', ['number']));
       });
+      this.link_.href = this.createDownloadLink_();
     }
 
     /** @override @return {string} */
@@ -867,6 +890,16 @@ cr.define('omnibox_output', function() {
         {key: 'document_type', value: this.values_[1]}
       ];
     }
+
+    /** @private @return {string} */
+    createDownloadLink_() {
+      const obj = this.tuples_.reduce((obj, {key, value}) => {
+        obj[key] = value;
+        return obj;
+      }, {});
+      const obj64 = btoa(unescape(encodeURIComponent(JSON.stringify(obj))));
+      return `data:application/json;base64,${obj64}`;
+    }
   }
 
   class OutputUrlProperty extends FlexWrappingOutputProperty {

chrome/browser/resources/omnibox/output_results_group.css

@@ -232,6 +232,20 @@ tbody.head th {
   color: red;
 }
 
+.cell-additional-info a {
+  background-image: url(../../../../third_party/blink/renderer/modules/media_controls/resources/ic_download.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.cell-additional-info:not(:hover) a {
+  visibility: hidden;
+}
+
 /* boolean cells */
 
 .check-mark,