improvements to brave://components page

patches/chrome-browser-resources-components-components.css.patch

@@ -0,0 +1,24 @@
+diff --git a/chrome/browser/resources/components/components.css b/chrome/browser/resources/components/components.css
+index 31d0ec29c136cfb9a04a9b5b0c0f64cb15567c8b..430e4d461b50f13becddb5c88c5fc911de1cc9b1 100644
+--- a/chrome/browser/resources/components/components.css
++++ b/chrome/browser/resources/components/components.css
+@@ -235,3 +235,19 @@ button {
+ button[disabled] {
+   color: #999;
+ }
++.component-id { color: #888;
++  font-family: monospace;
++}
++.component-id::before {
++  content: '(';
++}
++.component-id::after {
++  content: ')';
++}
++.button-check-update {
++  display: none;
++}
++#button-check-update-all {
++  padding: 1em 1.5em;
++  margin-bottom: 1em;
++}

patches/chrome-browser-resources-components-components.html.patch

@@ -0,0 +1,24 @@
+diff --git a/chrome/browser/resources/components/components.html b/chrome/browser/resources/components/components.html
+index a06744107006447976693c9a2748356348895e53..cc102bd35222550597f6c967bd81a31d6ef871dd 100644
+--- a/chrome/browser/resources/components/components.html
++++ b/chrome/browser/resources/components/components.html
+@@ -27,6 +27,9 @@
+   </if>
+
+   <div id="header"><h1>$i18n{componentsTitle}</h1></div>
++  <button id="button-check-update-all" guest-disabled>
++    $i18n{checkUpdate}
++  </button>
+   <div id="component-placeholder"></div>
+   <div id="component-template" hidden>
+
+@@ -63,6 +66,9 @@
+                     <span dir="ltr" jscontent="version"
+                         jsvalues=".id: 'version-' + id"></span>
+                 </span>
++                <span>
++                  <span class="component-id" dir="ltr" jscontent="id"></span>
++                </span>
+               </div>
+             </div>
+           </div>

patches/chrome-browser-resources-components-components.ts.patch

@@ -0,0 +1,45 @@
+diff --git a/chrome/browser/resources/components/components.ts b/chrome/browser/resources/components/components.ts
+index 116bf1ced0319e41cb5119ebc024cc6663756439..8f5d71222e864464ccf48fddb6d2c59e34045c7f 100644
+--- a/chrome/browser/resources/components/components.ts
++++ b/chrome/browser/resources/components/components.ts
+@@ -47,6 +47,15 @@ let currentComponentsData: Component[]|null = null;
+  */
+ function renderTemplate(componentsData: ComponentsData) {
+   // This is the javascript code that processes the template:
++  componentsData.components.sort((a: Component, b: Component) => {
++    if (a.name < b.name) {
++      return -1;
++    } else if (a.name > b.name) {
++      return 1;
++    } else {
++      return 0;
++    }
++  })
+   const input = new JsEvalContext(componentsData);
+   const output =
+       document.body.querySelector<HTMLElement>(
+@@ -184,8 +193,24 @@ function handleCheckUpdate(node: HTMLElement) {
+   chrome.send('checkUpdate', [String(node.id)]);
+ }
+
++/**
++ * Requests that all of the components check for updates.
++ */
++function handleCheckUpdateAll() {
++  // Call `onclick` handlers for all individual update buttons on the page
++  const links =
++      document.body.querySelectorAll<HTMLButtonElement>('.button-check-update');
++  for (const link of links) {
++    link.click();
++  }
++}
++
+ // Get data and have it displayed upon loading.
+ document.addEventListener('DOMContentLoaded', function() {
+   addWebUiListener('component-event', onComponentEvent);
++  getRequiredElement<HTMLButtonElement>('button-check-update-all').onclick = function(e) {
++    handleCheckUpdateAll();
++    e.preventDefault();
++  };
+   requestComponentsData();
+ });