[chrome:omnibox]: Refactoring HTML generation part 1/3, create OutputMatch helper class.

This is the first of 3 CL's to replace the global static helper functions which manipulate the DOM with classes. In this CL, we:

- Replaced the functions createCellForPropertyAndRemoveProperty and addResultTableToOutput with OutputMatch, which is responsible for generating individual HTML rows from individual omnibox matches.

- Moved the data class PresentationInfoRecord and the constants array of PresentationInfoRecord's PROPERTY_OUTPUT_ORDER from omnibox.js to omnibox_output.js as that's where it's now used.

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

chrome/browser/resources/omnibox/omnibox.css

@@ -23,7 +23,10 @@
 .x-mark {
   background-position: center;
   background-repeat: no-repeat;
+  background-size: contain;
   font-size: 0;
+  height: 16px;
+  width: 16px;
 }
 
 .check-mark {

chrome/browser/resources/omnibox/omnibox_element.js

@@ -2,22 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Helper class to be used as the super class of all Custom Elements in
-// chrome://omnibox. Constructed with a string id of a <template> element. When
-// this element is added to the DOM, it instantiates its internal DOM from the
-// corresponding <template> element.
+/**
+ * Helper class to be used as the super class of all custom elements in
+ * chrome://omnibox.
+ * @abstract
+ */
 class OmniboxElement extends HTMLElement {
-  /** @param {string} templateId Template's HTML id attribute */
+  /** @param {string} templateId */
   constructor(templateId) {
     super();
-    /** @type {string} */
-    this.templateId = templateId;
-  }
-
-  /** @override */
-  connectedCallback() {
     this.attachShadow({mode: 'open'});
-    let template = $(this.templateId).content.cloneNode(true);
+    const template = $(templateId).content.cloneNode(true);
     this.shadowRoot.appendChild(template);
   }
 

chrome/browser/resources/omnibox/omnibox_inputs.js

@@ -14,28 +14,29 @@ class OmniboxInputs extends OmniboxElement {
 
   /** @override */
   connectedCallback() {
-    super.connectedCallback();
-    this.setupElementListeners();
+    this.setupElementListeners_();
   }
 
-  setupElementListeners() {
-    const onQueryInputsChanged = this.onQueryInputsChanged.bind(this);
-    const onDisplayInputsChagned = this.onDisplayInputsChagned.bind(this);
+  /** @private */
+  setupElementListeners_() {
+    const onQueryInputsChanged = this.onQueryInputsChanged_.bind(this);
+    const onDisplayInputsChagned = this.onDisplayInputsChagned_.bind(this);
 
     this.$$('input-text').addEventListener('input', onQueryInputsChanged);
     [
       this.$$('prevent-inline-autocomplete'),
       this.$$('prefer-keyword'),
       this.$$('page-classification'),
-    ].forEach(element => element.addEventListener('change', onQueryInputsChanged));
+    ].forEach(elem => elem.addEventListener('change', onQueryInputsChanged));
     [
       this.$$('show-incomplete-results'),
       this.$$('show-details'),
       this.$$('show-all-providers'),
-    ].forEach(element => element.addEventListener('change', onDisplayInputsChagned));
+    ].forEach(elem => elem.addEventListener('change', onDisplayInputsChagned));
   }
 
-  onQueryInputsChanged() {
+  /** @private */
+  onQueryInputsChanged_() {
     this.dispatchEvent(new CustomEvent('query-inputs-changed', {
       detail: {
         inputText: this.$$('input-text').value,
@@ -47,7 +48,8 @@ class OmniboxInputs extends OmniboxElement {
     }));
   }
 
-  onDisplayInputsChagned() {
+  /** @private */
+  onDisplayInputsChagned_() {
     this.dispatchEvent(new CustomEvent('display-inputs-changed'));
   }
 }