[chrome:omnibox] Render additional properties as key value pairs (i.e. `last visit: 48 hours`).

Previously, the additional properties column was rendered as stringified JSON [1]. Using colon-delimited key value strings [2] improves readability and saves >75% vertical space.

[1]
[
  {
    "key": "last visit",
    "value": "48 hours ago"
  },
  {
    "key": "typed count",
    "value": "36"
  },
  {
    "key": "visit count",
    "value": "36"
  }
]

[2]
last visit: 48 hours ago
typed count: 36
visit count: 36

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

chrome/browser/resources/omnibox/omnibox_output.js

@@ -469,10 +469,15 @@ cr.define('omnibox_output', function() {
       OutputMatch.displayedProperties(showDetails)
           .map(property => {
             const value = this.properties[property.propertyName];
-            if (typeof value === 'object')
-              return OutputMatch.renderJsonProperty_(value);
             if (typeof value === 'boolean')
               return OutputMatch.renderBooleanProperty_(value);
+            if (typeof value === 'object') {
+              // We check if the first element has key and value properties.
+              if (value && value[0] && value[0].key && value[0].value)
+                return OutputMatch.renderKeyValueTuples_(value);
+              else
+                return OutputMatch.renderJsonProperty_(value);
+            }
             const LINK_REGEX = /^(http|https|ftp|chrome|file):\/\//;
             if (LINK_REGEX.test(value))
               return OutputMatch.renderLinkProperty_(value);
@@ -542,6 +547,21 @@ cr.define('omnibox_output', function() {
       return cell;
     }
 
+    /**
+     * @private
+     * @param {Array<{key: string, value: string}>} propertyValue
+     * @return {Element}
+     */
+    static renderKeyValueTuples_(propertyValue) {
+      const cell = document.createElement('td');
+      const pre = document.createElement('pre');
+      const text = propertyValue.reduce(
+          (prev, current) => `${prev}${current.key}: ${current.value}\n`, '');
+      pre.textContent = text;
+      cell.appendChild(pre);
+      return cell;
+    }
+
     /**
      * @private
      * @param {boolean} showDetails