[Media Feeds] Factor out media data table

Factor out the media data table.

BUG=1059352

Change-Id: I1ffc498d270491eeb3a433de1e7e6c3fc722e3b3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2116783Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753420}

chrome/browser/dev_ui_browser_resources.grd

@@ -40,6 +40,7 @@ This file specifies browser resources for developer-facing chrome:// pages
       <include name="IDR_INTERVENTIONS_INTERNALS_UNSUPPORTED_PAGE_HTML" file="resources\interventions_internals\unsupported_page.html" flattenhtml="true" allowexternalscript="true" compress="gzip" type="BINDATA" />
       <include name="IDR_LOCAL_STATE_HTML" file="resources\local_state\local_state.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_LOCAL_STATE_JS" file="resources\local_state\local_state.js" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_MEDIA_DATA_TABLE_JS" file="resources\media\media_data_table.js" flattenhtml="true" type="BINDATA" compress="gzip" />
       <include name="IDR_MEDIA_ENGAGEMENT_HTML" file="resources\media\media_engagement.html" flattenhtml="true" type="BINDATA" compress="gzip" allowexternalscript="true" />
       <include name="IDR_MEDIA_ENGAGEMENT_JS" file="resources\media\media_engagement.js" flattenhtml="true" type="BINDATA" compress="gzip" />
       <include name="IDR_MEDIA_ENGAGEMENT_SCORE_DETAILS_MOJOM_LITE_JS" file="${root_gen_dir}\chrome\browser\media\media_engagement_score_details.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip" />

chrome/browser/resources/media/BUILD.gn

@@ -21,13 +21,36 @@ grit("webrtc_logs_resources") {
 }
 
 js_type_check("closure_compile") {
-  deps = [ ":media_feeds" ]
+  deps = [
+    ":media_data_table",
+    ":media_feeds",
+    ":media_history",
+  ]
+}
+
+js_library("media_history") {
+  deps = [
+    ":media_data_table",
+    "//chrome/browser/media:mojo_bindings_js_library_for_compile",
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:util",
+    "//ui/webui/resources/js/cr/ui:tabs",
+  ]
 }
 
 js_library("media_feeds") {
   deps = [
+    ":media_data_table",
     "//chrome/browser/media/feeds:mojo_bindings_js_library_for_compile",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:util",
   ]
 }
+
+js_library("media_data_table") {
+  deps = [
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:util",
+  ]
+}

chrome/browser/resources/media/media_data_table.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+cr.define('cr.ui', function() {
+  /**
+   * TODO(beccahughes): Description
+   */
+  /* #export */ class MediaDataTable {
+    /**
+     * @param {HTMLElement} table
+     * @param {!cr.ui.MediaDataTableDelegate} delegate
+     */
+    constructor(table, delegate) {
+      /** @private {HTMLElement} */
+      this.table_ = table;
+
+      /** @private {Array<Object>} */
+      this.data_ = [];
+
+      /** @private {cr.ui.MediaDataTableDelegate} */
+      this.delegate_ = delegate;
+
+      // Set table header sort handlers.
+      const headers = this.table_.querySelectorAll('th[sort-key]');
+      headers.forEach(header => {
+        header.addEventListener('click', this.handleSortClick_.bind(this));
+      });
+    }
+
+    handleSortClick_(e) {
+      if (e.target.classList.contains('sort-column')) {
+        e.target.toggleAttribute('sort-reverse');
+      } else {
+        document.querySelector('.sort-column').classList.remove('sort-column');
+        e.target.classList.add('sort-column');
+      }
+
+      this.render();
+    }
+
+    render() {
+      // Find the body of the table and clear it.
+      const body = this.table_.querySelectorAll('tbody')[0];
+      body.innerHTML = '';
+
+      // Get the sort key from the columns to determine which data should be in
+      // which column.
+      const headerCells = Array.from(this.table_.querySelectorAll('thead th'));
+      const dataAndSortKeys = headerCells.map((e) => {
+        return e.getAttribute('sort-key') ? e.getAttribute('sort-key') :
+                                            e.getAttribute('data-key');
+      });
+
+      const currentSortCol = this.table_.querySelectorAll('.sort-column')[0];
+      const currentSortKey = currentSortCol.getAttribute('sort-key');
+      const currentSortReverse = currentSortCol.hasAttribute('sort-reverse');
+
+      // Sort the data based on the current sort key.
+      this.data_.sort((a, b) => {
+        return (currentSortReverse ? -1 : 1) *
+            this.delegate_.compareTableItem(currentSortKey, a, b);
+      });
+
+      // Generate the table rows.
+      this.data_.forEach((dataRow) => {
+        const tr = document.createElement('tr');
+        body.appendChild(tr);
+
+        dataAndSortKeys.forEach((key) => {
+          const td = document.createElement('td');
+
+          // Keys with a period denote nested objects.
+          let data = dataRow;
+          const expandedKey = key.split('.');
+          expandedKey.forEach((k) => {
+            data = data[k];
+            key = k;
+          });
+
+          this.delegate_.insertDataField(td, data, key);
+          tr.appendChild(td);
+        });
+      });
+    }
+
+    /**
+     * @param {Array} data The data to update
+     */
+    setData(data) {
+      this.data_ = data;
+      this.render();
+    }
+  }
+
+  /** @interface */
+  /* #export */ class MediaDataTableDelegate {
+    /**
+     * Formats a field to be displayed in the data table and inserts it into the
+     * element.
+     * @param {Element} td
+     * @param {?Object} data
+     * @param {string} key
+     */
+    insertDataField(td, data, key) {}
+
+    /**
+     * Compares two objects based on |sortKey|.
+     * @param {string} sortKey The name of the property to sort by.
+     * @param {?Object} a The first object to compare.
+     * @param {?Object} b The second object to compare.
+     * @return {number} A negative number if |a| should be ordered
+     *     before |b|, a positive number otherwise.
+     */
+    compareTableItem(sortKey, a, b) {}
+  }
+
+  // #cr_define_end
+  return {MediaDataTable, MediaDataTableDelegate};
+});

chrome/browser/resources/media/media_feeds.html

@@ -17,6 +17,10 @@
   <script src="chrome/browser/media/feeds/media_feeds_store.mojom-lite.js">
   </script>
 
+  <script src="chrome://resources/js/cr.js"></script>
+  <script src="chrome://resources/js/cr/ui.js"></script>
+
+  <script src="chrome://media-feeds/media-data-table.js"></script>
   <script src="chrome://media-feeds/media-feeds.js"></script>
   <style>
     body {
@@ -79,7 +83,7 @@
 <body>
   <h1>Media Feeds</h1>
   <button id="copy-all-to-clipboard">Copy all to clipboard</button>
-  <table>
+  <table id="feeds-table">
     <thead>
       <tr id="feed-table-header">
         <th sort-key="id" class="sort-column" sort-reverse>
@@ -118,7 +122,7 @@
         <th sort-key="lastFetchContentTypes">
           Last Fetch Content Types
         </th>
-        <th>
+        <th data-key="logos">
           Logos
         </th>
       </tr>

chrome/browser/resources/media/media_history.html

@@ -24,6 +24,7 @@
   <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
   <script src="chrome://resources/js/cr/ui/tabs.js"></script>
 
+  <script src="chrome://media-history/media-data-table.js"></script>
   <script src="chrome://media-history/media-history.js"></script>
   <style>
     html,

chrome/browser/ui/webui/media/media_feeds_ui.cc

@@ -25,6 +25,7 @@ MediaFeedsUI::MediaFeedsUI(content::WebUI* web_ui)
   // Setup the data source behind chrome://media-feeds.
   std::unique_ptr<content::WebUIDataSource> source(
       content::WebUIDataSource::Create(chrome::kChromeUIMediaFeedsHost));
+  source->AddResourcePath("media-data-table.js", IDR_MEDIA_DATA_TABLE_JS);
   source->AddResourcePath("media-feeds.js", IDR_MEDIA_FEEDS_JS);
   source->AddResourcePath(
       "services/media_session/public/mojom/media_session.mojom-lite.js",

chrome/browser/ui/webui/media/media_history_ui.cc

@@ -25,6 +25,7 @@ MediaHistoryUI::MediaHistoryUI(content::WebUI* web_ui)
   // Setup the data source behind chrome://media-history.
   std::unique_ptr<content::WebUIDataSource> source(
       content::WebUIDataSource::Create(chrome::kChromeUIMediaHistoryHost));
+  source->AddResourcePath("media-data-table.js", IDR_MEDIA_DATA_TABLE_JS);
   source->AddResourcePath("media-history.js", IDR_MEDIA_HISTORY_JS);
   source->AddResourcePath(
       "services/media_session/public/mojom/media_session.mojom-lite.js",