[internals] Add a basic implementation of the launcher internals page.

This is a first-pass implementation of the launcher internals page. The page consists of two tables, which keep track of the most recent zero-state results and query search results respectively. The page is not yet hooked up to any backend. A C++ page handler will be added in a follow-up CL. Bug: 1211232 Change-Id: I237a2a38aebc418b62facbeb4aa55a9f5fea1194 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2916777 Reviewed-by: Sam McNally <sammc@chromium.org> Reviewed-by: dpapad <dpapad@chromium.org> Reviewed-by: Tony Yeoman <tby@chromium.org> Commit-Queue: Rachel Wong <wrong@chromium.org> Cr-Commit-Position: refs/heads/master@{#892410}
chromium · Jun 15, 2021 · 0bd1172 · 0bd1172
1 parent 85a21fd
commit 0bd1172
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 12 deletions.
diff --git a/chrome/browser/resources/chromeos/launcher_internals/BUILD.gn b/chrome/browser/resources/chromeos/launcher_internals/BUILD.gn
@@ -2,31 +2,57 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
+import("//tools/polymer/html_to_js.gni")
+import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
 assert(is_chromeos, "Launcher internals is Chrome OS only.")
 
-mojo_grdp_file = "$target_gen_dir/mojo_resources.grdp"
 resources_grd_file = "$target_gen_dir/resources.grd"
 
-generate_grd("build_mojo_grdp") {
-  input_files = [ "launcher_internals.mojom-webui.js" ]
-  input_files_base_dir = rebase_path(
-          "${root_gen_dir}/mojom-webui/chrome/browser/ui/webui/chromeos/launcher_internals",
-          "$root_build_dir")
+html_to_js("web_components") {
+  js_files = [
+    "launcher_internals.ts",
+    "results_table.ts",
+  ]
+}
+
+copy("copy_browser_proxy") {
+  sources = [ "browser_proxy.ts" ]
+  outputs = [ "$target_gen_dir/{{source_file_part}}" ]
+}
+
+copy("copy_mojo") {
   deps = [ "//chrome/browser/ui/webui/chromeos/launcher_internals:mojo_bindings_webui_js" ]
+  mojom_folder = "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/chromeos/launcher_internals/"
+  sources = [ "$mojom_folder/launcher_internals.mojom-webui.js" ]
+  outputs = [ "$target_gen_dir/{{source_file_part}}" ]
+}
 
-  grd_prefix = "launcher_internals"
-  out_grd = mojo_grdp_file
+ts_library("build_ts") {
+  deps = [ "//third_party/polymer/v3_0:library" ]
+  extra_deps = [
+    ":copy_browser_proxy",
+    ":copy_mojo",
+    ":web_components",
+  ]
+  root_dir = "$target_gen_dir"
+  out_dir = "$target_gen_dir/tsc"
+  tsconfig_base = "tsconfig_base.json"
+  in_files = [
+    "browser_proxy.ts",
+    "launcher_internals.mojom-webui.js",
+    "launcher_internals.ts",
+    "results_table.ts",
+  ]
 }
 
 generate_grd("build_grd") {
+  deps = [ ":build_ts" ]
   input_files = [ "index.html" ]
   input_files_base_dir = rebase_path(".", "//")
-  deps = [ ":build_mojo_grdp" ]
-  grdp_files = [ mojo_grdp_file ]
+  manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
 
   grd_prefix = "launcher_internals"
   out_grd = resources_grd_file

diff --git a/chrome/browser/resources/chromeos/launcher_internals/browser_proxy.ts b/chrome/browser/resources/chromeos/launcher_internals/browser_proxy.ts
@@ -0,0 +1,20 @@
+// Copyright 2021 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.
+
+import {PageCallbackRouter} from './launcher_internals.mojom-webui.js';
+
+export class BrowserProxy {
+  callbackRouter: PageCallbackRouter = new PageCallbackRouter();
+  // TODO(crbug.com/1211232): Use PageHandlerFactory to create a page handler.
+
+  static getInstance(): BrowserProxy {
+    return instance || (instance = new BrowserProxy());
+  }
+
+  static setInstance(obj: BrowserProxy) {
+    instance = obj;
+  }
+}
+
+let instance: BrowserProxy|null = null;
diff --git a/chrome/browser/resources/chromeos/launcher_internals/index.html b/chrome/browser/resources/chromeos/launcher_internals/index.html
@@ -4,8 +4,9 @@
   <meta charset="utf-8">
   <title>Launcher Internals</title>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+  <script type="module" src="launcher_internals.js"></script>
 </head>
 <body>
-  Hello!
+  <launcher-internals></launcher-internals>
 </body>
 </html>
diff --git a/chrome/browser/resources/chromeos/launcher_internals/launcher_internals.html b/chrome/browser/resources/chromeos/launcher_internals/launcher_internals.html
@@ -0,0 +1,6 @@
+<h1>Zero state</h1>
+<launcher-results-table id="zeroStateResults"></launcher-results-table>
+
+<h1>Search</h1>
+Query: [[query]]
+<launcher-results-table id="searchResults"></launcher-results-table>
diff --git a/chrome/browser/resources/chromeos/launcher_internals/launcher_internals.ts b/chrome/browser/resources/chromeos/launcher_internals/launcher_internals.ts
@@ -0,0 +1,73 @@
+// Copyright 2021 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.
+
+import './results_table.js';
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {BrowserProxy} from './browser_proxy.js';
+import {PageCallbackRouter, Result} from './launcher_internals.mojom-webui.js';
+import {LauncherResultsTableElement} from './results_table.js';
+
+interface LauncherInternalsElement {
+  $: {
+    'zeroStateResults': LauncherResultsTableElement,
+    'searchResults': LauncherResultsTableElement,
+  };
+}
+
+class LauncherInternalsElement extends PolymerElement {
+  static get is() {
+    return 'launcher-internals';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      query: String,
+    };
+  }
+
+  private query: string;
+  private listenerIds: Array<number>;
+  private router: PageCallbackRouter;
+
+  constructor() {
+    super();
+    this.query = '';
+    this.listenerIds = [];
+    this.router = BrowserProxy.getInstance().callbackRouter;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listenerIds.push(
+        this.router.updateResults.addListener(this.updateResults.bind(this)));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.listenerIds.forEach(id => this.router.removeListener(id));
+  }
+
+  private updateResults(query: string, results: Array<Result>) {
+    if (query === '') {
+      this.$.zeroStateResults.clearResults();
+      this.$.zeroStateResults.addResults(results);
+      return;
+    }
+
+    if (this.query != query) {
+      // Reset the results table whenever the query changes.
+      this.$.searchResults.clearResults();
+      this.query = query;
+    }
+    this.$.searchResults.addResults(results);
+  }
+}
+
+customElements.define(LauncherInternalsElement.is, LauncherInternalsElement);
diff --git a/chrome/browser/resources/chromeos/launcher_internals/results_table.html b/chrome/browser/resources/chromeos/launcher_internals/results_table.html
@@ -0,0 +1,13 @@
+<table>
+  <thead>
+    <tr>
+      <td>ID</td>
+      <td>Title</td>
+      <td>Description</td>
+      <td>Result type</td>
+      <td>Display type</td>
+      <td>Score</td>
+    </tr>
+  </thead>
+  <tbody id="resultsSection"></tbody>
+</table>
diff --git a/chrome/browser/resources/chromeos/launcher_internals/results_table.ts b/chrome/browser/resources/chromeos/launcher_internals/results_table.ts
@@ -0,0 +1,57 @@
+// Copyright 2021 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.
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {Result} from './launcher_internals.mojom-webui.js';
+
+export interface LauncherResultsTableElement {
+  $: {
+    'resultsSection': HTMLTableSectionElement,
+  };
+}
+
+export class LauncherResultsTableElement extends PolymerElement {
+  static get is() {
+    return 'launcher-results-table';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  private idSet: Set<string> = new Set();
+
+  clearResults() {
+    this.idSet.clear();
+    this.$.resultsSection.innerHTML = '';
+  }
+
+  addResults(results: Array<Result>) {
+    for (const result of results) {
+      if (this.idSet.has(result.id)) {
+        continue;
+      }
+      this.idSet.add(result.id);
+
+      const newRow = this.$.resultsSection.insertRow();
+      [result.id,
+       result.title,
+       result.description,
+       result.resultType,
+       result.displayType,
+       result.score.toString(),
+      ].forEach(field => {
+        const newCell = newRow.insertCell();
+        newCell.textContent = field;
+      });
+
+      // TODO(crbug.com/1211232): Handle other ranker scores and allow sorting
+      // by the chosen score.
+    }
+  }
+}
+
+customElements.define(
+    LauncherResultsTableElement.is, LauncherResultsTableElement);
diff --git a/chrome/browser/resources/chromeos/launcher_internals/tsconfig_base.json b/chrome/browser/resources/chromeos/launcher_internals/tsconfig_base.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../../tools/typescript/tsconfig_base.json",
+  "compilerOptions": {
+    "allowJs": true
+  }
+}
diff --git a/chrome/browser/ui/webui/chromeos/launcher_internals/launcher_internals.mojom b/chrome/browser/ui/webui/chromeos/launcher_internals/launcher_internals.mojom
@@ -4,9 +4,47 @@
 
 module launcher_internals.mojom;
 
+struct Score {
+  // A debug string describing the method used to calculate the score.
+  string ranking_method;
+
+  // The score corresponding to this method.
+  double score;
+};
+
+// A single search result. More fields can be added when needed.
+struct Result {
+  // Unique ID string for the result.
+  string id;
+
+  // Title text for the result.
+  string title;
+
+  // Description text that is displayed below the title. This can be empty.
+  string description;
+
+  // Which provider this result came from.
+  string result_type;
+
+  // Which UI surface the result is displayed in.
+  string display_type;
+
+  // The score associated with this result, in the range [0,1].
+  double score;
+
+  // Scores corresponding to different ranking methods.
+  array<Score> ranker_scores;
+};
+
 // Interface for creating internals page handlers. Implemented by the WebUI
 // controller and used by chrome://launcher-internals.
 interface PageHandlerFactory {
   // TODO(crbug.com/1211232): Add a CreatePageHandler method.
 };
 
+// Interface for the launcher internals page. Implemented in Javascript and
+// used by the page handler.
+interface Page {
+  // Updates the page with the new results.
+  UpdateResults(string query, array<Result> results);
+};