support-tool: Add select all button to data collector selection

Add a button to select all data collectors to include in the support
packet.This is the screenshot of end result of that change
https://screenshot.googleplex.com/7xKirAsHDAYTV4b.png.
Add the same select all button to URL generator page. This is the
screenshot of how the page looks after this change
https://screenshot.googleplex.com/BV9edZk24MATffs.png.

Fix the error with URL generator dict fields.

Bug: b:292488243
Change-Id: I3ba3c4be43de8ed02195bb328dcc59a2e1aa899c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4905127
Commit-Queue: Irem Uguz <iremuguz@google.com>
Reviewed-by: Andreea Costinas <acostinas@google.com>
Cr-Commit-Position: refs/heads/main@{#1212058}

chrome/app/support_tool_strings.grdp

@@ -98,6 +98,12 @@
         <message name="IDS_SUPPORT_TOOL_SELECT_DATA_COLLECTOR_ERROR" desc="The error message that user will see in a toast message when they don't select any data sources and wants to move to the next stage.">
             No data collector selected. Please select at least one data collector.
         </message>
+        <message name="IDS_SUPPORT_TOOL_SELECT_ALL" desc="The button label that will enable user to select all data collector checkboxes so everything will be included.">
+            Select all
+        </message>
+        <message name="IDS_SUPPORT_TOOL_SELECT_NONE" desc="The button label that will enable user to deselect all data collector checkboxes so nothing will be included.">
+            Select none
+        </message>
         <!-- DataCollector strings -->
         <message name="IDS_SUPPORT_TOOL_CHROME_SYSTEM_INFO" desc="This is a data source name for internal Chrome logs.">
             Chrome System Information

chrome/app/support_tool_strings_grdp/IDS_SUPPORT_TOOL_SELECT_ALL.png.sha1

@@ -0,0 +1 @@
+0507599f60d5eb294b42c0b23ebe2798e40c4d91

chrome/app/support_tool_strings_grdp/IDS_SUPPORT_TOOL_SELECT_NONE.png.sha1

@@ -0,0 +1 @@
+2835a3873cf8402f7f1ab84d02cbe21c8db952dc

chrome/browser/resources/support_tool/data_collectors.html

@@ -21,6 +21,10 @@ <h1 tabindex="0">$i18n{dataSelectionPageTitle}</h1>
     </cr-checkbox>
   </template>
 </iron-list>
+<cr-button class="select-all-button" id="selectAllButton"
+    on-click="onSelectAllClick_">
+  [[getSelectAllButtonLabel_(allSelected_)]]
+</cr-button>
 
 <template is="dom-if" if="[[enableScreenshot_]]" restamp>
   <screenshot-element id="screenshot"></screenshot-element>

chrome/browser/resources/support_tool/data_collectors.ts

@@ -36,11 +36,16 @@ export class DataCollectorsElement extends DataCollectorsElementBase {
         type: Boolean,
         value: () => loadTimeData.getBoolean('enableScreenshot'),
       },
+      allSelected_: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
   private dataCollectors_: DataCollectorItem[];
   private enableScreenshot_: boolean;
+  private allSelected_: boolean;
   private browserProxy_: BrowserProxy = BrowserProxyImpl.getInstance();
 
   override connectedCallback() {
@@ -49,6 +54,8 @@ export class DataCollectorsElement extends DataCollectorsElementBase {
     this.browserProxy_.getDataCollectors().then(
         (dataCollectors: DataCollectorItem[]) => {
           this.dataCollectors_ = dataCollectors;
+          this.allSelected_ =
+              this.dataCollectors_.every((element) => element.isIncluded);
         });
   }
 
@@ -69,6 +76,24 @@ export class DataCollectorsElement extends DataCollectorsElementBase {
         this.$$<ScreenshotElement>('#screenshot')!.getEditedScreenshotBase64() :
         '';
   }
+
+  private getSelectAllButtonLabel_(selectAllClicked: boolean): string {
+    if (selectAllClicked) {
+      return this.i18n('selectNone');
+    } else {
+      return this.i18n('selectAll');
+    }
+  }
+
+  private onSelectAllClick_() {
+    this.allSelected_ = !this.allSelected_;
+    // Update this.dataCollectors_ to reflect the selection choice.
+    for (let index = 0; index < this.dataCollectors_.length; index++) {
+      // Mutate the array observably. See:
+      // https://polymer-library.polymer-project.org/3.0/docs/devguide/data-system#make-observable-changes
+      this.set(`dataCollectors_.${index}.isIncluded`, this.allSelected_);
+    }
+  }
 }
 
 declare global {

chrome/browser/resources/support_tool/support_tool_shared.css

@@ -45,3 +45,7 @@ h1 {
 .data-collector-list {
   width: 520px;
 }
+
+.select-all-button {
+  margin-top: 8px;
+}

chrome/browser/resources/support_tool/url_generator.html

@@ -28,6 +28,10 @@
     margin-inline-start: 12px;
     margin-top: -8px;
   }
+
+  .select-all-button {
+    margin-bottom: 8px;
+  }
 </style>
 
 <h1 tabindex="0">$i18n{urlGeneratorPageTitle}</h1>
@@ -46,6 +50,9 @@ <h1 tabindex="0">$i18n{urlGeneratorPageTitle}</h1>
     </cr-checkbox>
   </template>
 </div>
+<cr-button class="select-all-button" on-click="onSelectAllClick_">
+  [[getSelectAllButtonLabel_(selectAll_)]]
+</cr-button>
 
 <div class="support-tool-title" tabindex="0">$i18n{getLinkText}</div>
 <div>

chrome/browser/resources/support_tool/url_generator.ts

@@ -67,6 +67,10 @@ export class UrlGeneratorElement extends UrlGeneratorElementBase {
         type: Boolean,
         value: () => !loadTimeData.getBoolean('enableCopyTokenButton'),
       },
+      selectAll_: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -77,6 +81,7 @@ export class UrlGeneratorElement extends UrlGeneratorElementBase {
   private hideTokenButton_: boolean;
   private copiedToastMessage_: string;
   private dataCollectors_: DataCollectorItem[];
+  private selectAll_: boolean;
   private browserProxy_: BrowserProxy = BrowserProxyImpl.getInstance();
 
   override connectedCallback() {
@@ -120,6 +125,14 @@ export class UrlGeneratorElement extends UrlGeneratorElementBase {
     }
   }
 
+  private getSelectAllButtonLabel_(selectAllClicked: boolean): string {
+    if (selectAllClicked) {
+      return this.i18n('selectNone');
+    } else {
+      return this.i18n('selectAll');
+    }
+  }
+
   private onUrlGenerationResult_(result: SupportTokenGenerationResult) {
     this.showGenerationResult(result, this.i18n('linkCopied'));
   }
@@ -141,6 +154,17 @@ export class UrlGeneratorElement extends UrlGeneratorElementBase {
   private onErrorMessageToastCloseClicked_() {
     this.$.errorMessageToast.hide();
   }
+
+  private onSelectAllClick_() {
+    this.selectAll_ = !this.selectAll_;
+    // Update this.dataCollectors_ to reflect the selection choice.
+    for (let index = 0; index < this.dataCollectors_.length; index++) {
+      // Mutate the array observably. See:
+      // https://polymer-library.polymer-project.org/3.0/docs/devguide/data-system#make-observable-changes
+      this.set(`dataCollectors_.${index}.isIncluded`, this.selectAll_);
+    }
+    this.onDataCollectorItemChange_();
+  }
 }
 
 declare global {

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

@@ -552,6 +552,10 @@ base::Value::Dict SupportToolUI::GetLocalizedStrings() {
   localized_strings.Set(
       "dontIncludeEmailAddress",
       l10n_util::GetStringUTF16(IDS_SUPPORT_TOOL_DONT_INCLUDE_EMAIL));
+  localized_strings.Set("selectAll",
+                        l10n_util::GetStringUTF16(IDS_SUPPORT_TOOL_SELECT_ALL));
+  localized_strings.Set(
+      "selectNone", l10n_util::GetStringUTF16(IDS_SUPPORT_TOOL_SELECT_NONE));
   return localized_strings;
 }
 

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

@@ -43,7 +43,7 @@ const char kDataCollectorProtoEnum[] = "protoEnum";
 const char kDataCollectorIncluded[] = "isIncluded";
 
 const char kSupportTokenGenerationResultSuccess[] = "success";
-const char kSupportTokenGenerationResultToken[] = "result";
+const char kSupportTokenGenerationResultToken[] = "token";
 const char kSupportTokenGenerationResultErrorMessage[] = "errorMessage";
 
 }  // namespace support_tool_ui
@@ -172,7 +172,7 @@ std::string GetDataCollectionModuleQuery(
 // Returns a URL generation result in the type Support Tool UI expects.
 // type SupportTokenGenerationResult = {
 //   success: boolean,
-//   result: string,
+//   token: string,
 //   errorMessage: string,
 // }
 base::Value::Dict GetSupportTokenGenerationResult(bool success,

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

@@ -238,6 +238,20 @@ suite('SupportToolTest', function() {
       assertEquals(listItem.isIncluded, DATA_COLLECTORS[i]!.isIncluded);
       assertEquals(listItem.protoEnum, DATA_COLLECTORS[i]!.protoEnum);
     }
+
+    // Verify that the select all functionality works.
+    supportTool.$.dataCollectors.shadowRoot!.getElementById(
+                                                'selectAllButton')!.click();
+    for (let i = 0; i < ironListItems.length; i++) {
+      assertTrue(ironListItems[i].isIncluded);
+    }
+
+    // Verify that the unselect all functionality works.
+    supportTool.$.dataCollectors.shadowRoot!.getElementById(
+                                                'selectAllButton')!.click();
+    for (let i = 0; i < ironListItems.length; i++) {
+      assertFalse(ironListItems[i].isIncluded);
+    }
   });
 
   test('take and remove screenshot', async () => {