support-tool: Add URL generator UI

Add URL generator UI files to Support Tool and show the UI when user
navigates to chrome://support-tool/url-generator.
Screenshot of the change: https://screenshot.googleplex.com/8sx6kaitoMMufmq.png

Bug: b:217931906
Test: Enable SupportTool feature and navigate to
chrome: //support-tool/url-generator. The UI should be visible there.
Change-Id: Ibdd9eb4ae9c0820adcfda5132a6029e3ffe75a87
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3572054
Reviewed-by: Pavol Marko <pmarko@chromium.org>
Commit-Queue: Irem Uguz <iremuguz@google.com>
Cr-Commit-Position: refs/heads/main@{#991954}

chrome/browser/resources/support_tool/BUILD.gn

@@ -16,7 +16,10 @@ resources_grd_file = "$target_gen_dir/resources.grd"
 generate_grd("build_grd") {
   grd_prefix = "support_tool"
   out_grd = resources_grd_file
-  input_files = html_files + [ "support_tool_container.html" ]
+  input_files = html_files + [
+                  "support_tool_container.html",
+                  "url_generator_container.html",
+                ]
   input_files_base_dir = rebase_path(".", "//")
   deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]

chrome/browser/resources/support_tool/browser_proxy.ts

@@ -33,6 +33,8 @@ export interface BrowserProxy {
 
   getDataCollectors(): Promise<DataCollectorItem[]>;
 
+  getAllDataCollectors(): Promise<DataCollectorItem[]>;
+
   startDataCollection(
       issueDetails: IssueDetails,
       selectedDataCollectors: DataCollectorItem[]): void;
@@ -53,6 +55,10 @@ export class BrowserProxyImpl implements BrowserProxy {
     return sendWithPromise('getDataCollectors');
   }
 
+  getAllDataCollectors() {
+    return sendWithPromise('getAllDataCollectors');
+  }
+
   startDataCollection(
       issueDetails: IssueDetails, dataCollectors: DataCollectorItem[]) {
     chrome.send('startDataCollection', [issueDetails, dataCollectors]);

chrome/browser/resources/support_tool/data_collectors.html

@@ -3,15 +3,8 @@
 found in the LICENSE file. -->
 
 <style include="support-tool-shared cr-shared-style">
-  .data-collector-checkbox {
-    padding-bottom: 4px;
-    padding-top: 4px;
-  }
   .data-collector-list {
-    border-bottom: var(--cr-separator-line);
-    border-top: var(--cr-separator-line);
     height: 254px;
-    width: 520px;
   }
 </style>
 

chrome/browser/resources/support_tool/issue_details.html

@@ -3,11 +3,6 @@
 found in the LICENSE file. -->
 
 <style include="md-select cr-input-style support-tool-shared">
-  #support-case-id {
-    height: 32px;
-    width: 248px;
-  }
-
   .md-select {
     height: 32px;
     margin-bottom: 30px;
@@ -37,7 +32,7 @@
 
 <h2>Collect diagnostics data for support</h2>
 <div class="support-tool-title">Support Case ID</div>
-<cr-input id="support-case-id" value="{{caseId_}}"
+<cr-input class="support-case-id" value="{{caseId_}}"
   spellcheck="false" maxlength="20">
 </cr-input>
 <div class="support-tool-title">Email</div>
@@ -48,7 +43,7 @@ <h2>Collect diagnostics data for support</h2>
   </template>
 </select>
 <div class="support-tool-title">Describe the issue</div>
-<textarea id="description" value="{{issueDescription_::input}}"
+<textarea id="description" class="support-tool-text" value="{{issueDescription_::input}}"
   spellcheck="true"
   placeholder="Provide a clear desciption of the issue and steps to reproduce the issue (if possible)">
 </textarea>

chrome/browser/resources/support_tool/support_tool.gni

@@ -10,6 +10,7 @@ web_component_files = [
   "spinner_page.ts",
   "pii_selection.ts",
   "data_export_done.ts",
+  "url_generator.ts",
 ]
 
 # Files that are passed as input to html_to_wrapper().

chrome/browser/resources/support_tool/support_tool_shared_css.html

@@ -26,5 +26,21 @@
       position: relative;
       right: 0;
     }
+
+    .support-case-id {
+      height: 32px;
+      width: 248px;
+    }
+
+    .data-collector-checkbox {
+      padding-bottom: 4px;
+      padding-top: 4px;
+    }
+
+    .data-collector-list {
+      border-bottom: var(--cr-separator-line);
+      border-top: var(--cr-separator-line);
+      width: 520px;
+    }
   </style>
 </template>

chrome/browser/resources/support_tool/support_tool_shared_css.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '//resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 
 const template = document.createElement('template');
 template.innerHTML = `

chrome/browser/resources/support_tool/url_generator.html

@@ -0,0 +1,48 @@
+<!-- Copyright 2022 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. -->
+
+<style include="support-tool-shared cr-input-style">
+  :host {
+    block-size: fit-content;
+    display: block;
+    margin-inline-start: 40px;
+    margin-top: 72px;
+    width: fit-content;
+  }
+
+  .data-collector-list {
+    height: 148px;
+  }
+
+  .url-text {
+    background-color: var(--cr-input-background-color);
+    height: 32px;
+    width: 520px;
+  }
+</style>
+
+<h2>Generate support tool URL</h2>
+<div class="support-tool-title">Support Case ID</div>
+<cr-input class="support-case-id" value="{{caseId_}}"
+  spellcheck="false" maxlength="20">
+</cr-input>
+<div class="support-tool-title">Data sources to collect</div>
+<iron-list class="data-collector-list" items="[[dataCollectors_]]">
+  <template>
+    <cr-checkbox class="data-collector-checkbox" checked="{{item.isIncluded}}">
+      [[item.name]]
+    </cr-checkbox>
+  </template>
+</iron-list>
+<div class="support-tool-title">Generated URL</div>
+<!-- Use cr-input in disabled mode since we don't want to accept input but want
+  to have the same styling as cr-input.-->
+<cr-input class="url-text" value="[[generatedURL_]]" disabled="true">
+</cr-input>
+<div class="navigation-buttons">
+  <cr-button id="generateButton" class="action-button"
+      on-click="onGenerateClick_">
+    Generate URL
+  </cr-button>
+</div>

chrome/browser/resources/support_tool/url_generator.ts

@@ -0,0 +1,68 @@
+// Copyright 2022 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 './support_tool_shared_css.js';
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
+import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
+import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BrowserProxy, BrowserProxyImpl, DataCollectorItem} from './browser_proxy.js';
+import {getTemplate} from './url_generator.html.js';
+
+export class UrlGeneratorElement extends PolymerElement {
+  static get is() {
+    return 'url-generator';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      caseId_: {
+        type: String,
+        value: '',
+      },
+      dataCollectors_: {
+        type: Array,
+        value: () => [],
+      },
+      generatedURL_: {
+        type: String,
+        value: '',
+      }
+    };
+  }
+
+  private caseId_: string;
+  private generatedURL_: string;
+  private dataCollectors_: DataCollectorItem[];
+  private browserProxy_: BrowserProxy = BrowserProxyImpl.getInstance();
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.browserProxy_.getAllDataCollectors().then(
+        (dataCollectors: DataCollectorItem[]) => {
+          this.dataCollectors_ = dataCollectors;
+        });
+  }
+
+  private onGenerateClick_() {
+    // TODO(b/217931906): Send signal to generate URL through BrowserProxy and
+    // make input fields disabled.
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'url-generator': UrlGeneratorElement;
+  }
+}
+
+customElements.define(UrlGeneratorElement.is, UrlGeneratorElement);

chrome/browser/resources/support_tool/url_generator_container.html

@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!-- Copyright 2022 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. -->
+
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Support Tool URL Generator</title>
+  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+</head>
+<body>
+  <url-generator></url-generator>
+  <script type="module" src="url_generator.js"></script>
+</body>
+</html>

chrome/browser/ui/webui/support_tool/support_tool_ui.cc

@@ -73,6 +73,9 @@ content::WebUIDataSource* CreateSupportToolHTMLSource(const GURL& url) {
       source, base::make_span(kSupportToolResources, kSupportToolResourcesSize),
       IDR_SUPPORT_TOOL_SUPPORT_TOOL_CONTAINER_HTML);
 
+  source->AddResourcePath("url-generator",
+                          IDR_SUPPORT_TOOL_URL_GENERATOR_CONTAINER_HTML);
+
   return source;
 }
 
@@ -124,6 +127,8 @@ void InitDataCollectionModuleFromURLQuery(
   }
 }
 
+// Returns data collector item for `type`. Sets isIncluded field true if
+// `module` contains `type`.
 base::Value::Dict GetDataCollectorItemForType(
     const support_tool::DataCollectionModule& module,
     const support_tool::DataCollectorType& type) {
@@ -135,6 +140,17 @@ base::Value::Dict GetDataCollectorItemForType(
   return dict;
 }
 
+// Returns data collector item for `type`. Sets isIncluded to false for all data
+// collector items.
+base::Value::Dict GetDataCollectorItemForType(
+    const support_tool::DataCollectorType& type) {
+  base::Value::Dict dict;
+  dict.Set("name", GetDataCollectorName(type));
+  dict.Set("protoEnum", type);
+  dict.Set("isIncluded", false);
+  return dict;
+}
+
 // Creates base::Value::List according to the format Support Tool UI
 // accepts and fills the contents with by decoding `module_query` to its
 // support_tool.pb components. Support Tool UI requests data collector items in
@@ -144,6 +160,7 @@ base::Value::Dict GetDataCollectorItemForType(
 //  isIncluded: boolean,
 //  protoEnum: number,
 // }
+// Returns only the data collectors that are available for user's device.
 base::Value::List GetDataCollectorItemsInQuery(std::string module_query) {
   base::Value::List data_collector_list;
   support_tool::DataCollectionModule module;
@@ -164,6 +181,29 @@ base::Value::List GetDataCollectorItemsInQuery(std::string module_query) {
   return data_collector_list;
 }
 
+// Creates base::Value::List according to the format Support Tool UI
+// accepts and fills the contents with all data collectors with isIncluded:
+// false as a default choice. Support Tool UI requests data collector items in
+// format:
+// type DataCollectorItem = {
+//  name: string,
+//  isIncluded: boolean,
+//  protoEnum: number,
+// }
+base::Value::List GetAllDataCollectors() {
+  base::Value::List data_collector_list;
+  for (const auto& type : kDataCollectors) {
+    data_collector_list.Append(GetDataCollectorItemForType(type));
+  }
+  for (const auto& type : kDataCollectorsChromeosAsh) {
+    data_collector_list.Append(GetDataCollectorItemForType(type));
+  }
+  for (const auto& type : kDataCollectorsChromeosHwDetails) {
+    data_collector_list.Append(GetDataCollectorItemForType(type));
+  }
+  return data_collector_list;
+}
+
 std::set<support_tool::DataCollectorType> GetIncludedDataCollectorTypes(
     const base::Value::List* data_collector_items) {
   std::set<support_tool::DataCollectorType> included_data_collectors;
@@ -311,6 +351,8 @@ class SupportToolMessageHandler : public content::WebUIMessageHandler,
 
   void HandleGetDataCollectors(const base::Value::List& args);
 
+  void HandleGetAllDataCollectors(const base::Value::List& args);
+
   void HandleStartDataCollection(const base::Value::List& args);
 
   void HandleCancelDataCollection(const base::Value::List& args);
@@ -351,6 +393,11 @@ void SupportToolMessageHandler::RegisterMessages() {
       "getDataCollectors",
       base::BindRepeating(&SupportToolMessageHandler::HandleGetDataCollectors,
                           weak_ptr_factory_.GetWeakPtr()));
+  web_ui()->RegisterMessageCallback(
+      "getAllDataCollectors",
+      base::BindRepeating(
+          &SupportToolMessageHandler::HandleGetAllDataCollectors,
+          weak_ptr_factory_.GetWeakPtr()));
   web_ui()->RegisterMessageCallback(
       "startDataCollection",
       base::BindRepeating(&SupportToolMessageHandler::HandleStartDataCollection,
@@ -410,6 +457,14 @@ void SupportToolMessageHandler::HandleGetDataCollectors(
       callback_id, base::Value(GetDataCollectorItemsInQuery(module_query)));
 }
 
+void SupportToolMessageHandler::HandleGetAllDataCollectors(
+    const base::Value::List& args) {
+  AllowJavascript();
+  CHECK_EQ(1U, args.size());
+  const base::Value& callback_id = args[0];
+  ResolveJavascriptCallback(callback_id, base::Value(GetAllDataCollectors()));
+}
+
 void SupportToolMessageHandler::HandleStartDataCollection(
     const base::Value::List& args) {
   CHECK_EQ(2U, args.size());

chrome/test/data/webui/support_tool/support_tool_test.ts

@@ -70,6 +70,7 @@ class TestSupportToolBrowserProxy extends TestBrowserProxy implements
       'cancelDataCollection',
       'startDataExport',
       'showExportedDataInFolder',
+      'getAllDataCollectors',
     ]);
   }
 
@@ -83,6 +84,14 @@ class TestSupportToolBrowserProxy extends TestBrowserProxy implements
     return Promise.resolve(DATA_COLLECTORS);
   }
 
+  getAllDataCollectors() {
+    this.methodCalled('getAllDataCollectors');
+    // TODO(b/217931906): For now, we return the same list of DATA_COLLECTORS.
+    // Add a proper return value when we add test cases about
+    // UrlGeneratorElement.
+    return Promise.resolve(DATA_COLLECTORS);
+  }
+
   startDataCollection(
       issueDetails: IssueDetails, selectedDataCollectors: DataCollectorItem[]) {
     this.methodCalled(