[Leo]: Enable Leo in Polymer, and convert settings page (#18156)

browser/resources/settings/brave_overrides/icons.ts

@@ -11,11 +11,7 @@ import '../brave_icons.html.js'
 import {OverrideIronIcons} from 'chrome://resources/brave/polymer_overriding.js'
 
 OverrideIronIcons('settings', 'brave_settings', {
-  palette: 'appearance',
-  assignment: 'autofill',
   language: 'language',
-  build: 'system',
-  restore: 'reset-settings',
   performance: 'performance'
 })
 OverrideIronIcons('cr', 'brave_settings', {

browser/resources/settings/brave_overrides/settings_menu.ts

@@ -11,6 +11,19 @@ import {RegisterPolymerTemplateModifications, RegisterStyleOverride} from 'chrom
 import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
 
 import {loadTimeData} from '../i18n_setup.js'
+import 'chrome://resources/brave/leo.bundle.js'
+
+// This maps a Chromium icon name to the leo-icon to replace it with.
+const iconConversions = {
+  'cr:security': 'lock',
+  'cr:search': 'search',
+  'settings:palette': 'appearance',
+  'settings:assignment': 'list-checks',
+  'settings:language': 'product-translate',
+  'settings:build': 'settings',
+  'settings:restore': 'backward',
+  'cr:file-download': 'download'
+}
 
 function createMenuElement(title, href, iconName, pageVisibilitySection) {
   const menuEl = document.createElement('a')
@@ -20,9 +33,11 @@ function createMenuElement(title, href, iconName, pageVisibilitySection) {
   menuEl.href = href
   menuEl.setAttribute('role', 'menuitem')
   menuEl.setAttribute('class', 'cr-nav-menu-item')
-  const iconChild = document.createElement('iron-icon')
-  iconChild.setAttribute('icon', iconName)
-  menuEl.appendChild(iconChild)
+
+  const icon = document.createElement('leo-icon')
+  icon.setAttribute('name', iconName)
+  menuEl.appendChild(icon)
+
   const text = document.createTextNode(title)
   menuEl.appendChild(text)
   const paperRippleChild = document.createElement('paper-ripple')
@@ -78,9 +93,7 @@ RegisterStyleOverride(
       }
 
       .cr-nav-menu-item[selected] {
-        --selected-gradient-color1: #FA7250;
-        --selected-gradient-color2: #FF1893;
-        --selected-gradient-color3: #A78AFF;
+        --leo-icon-color: var(--leo-gradient-icons-active);
 
         color: var(--cr-link-color) !important;
         background: transparent !important;
@@ -124,7 +137,7 @@ RegisterStyleOverride(
         color: #444DD0 !important;
       }
 
-      iron-icon {
+      iron-icon, leo-icon {
         margin-inline-end: 14px !important;
         width: 24px;
         height: 24px;
@@ -235,7 +248,7 @@ RegisterPolymerTemplateModifications({
     const getStartedEl = createMenuElement(
       loadTimeData.getString('braveGetStartedTitle'),
       '/getStarted',
-      'brave_settings:get-started',
+      'rocket',
       'getStarted'
     )
     peopleEl.insertAdjacentElement('afterend', getStartedEl)
@@ -247,15 +260,15 @@ RegisterPolymerTemplateModifications({
     const newTabEl = createMenuElement(
       loadTimeData.getString('braveNewTab'),
       '/newTab',
-      'brave_settings:new-tab',
+      'window-tab-new',
       'newTab'
     )
     appearanceBrowserEl.insertAdjacentElement('afterend', newTabEl)
     // Add Shields item
     const shieldsEl = createMenuElement(
       loadTimeData.getString('braveShieldsTitle'),
       '/shields',
-      'brave_settings:shields',
+      'shield-done',
       'shields',
     )
     newTabEl.insertAdjacentElement('afterend', shieldsEl)
@@ -266,7 +279,7 @@ RegisterPolymerTemplateModifications({
       rewardsEl = createMenuElement(
         loadTimeData.getString('braveRewards'),
         '/rewards',
-        'brave_settings:rewards',
+        'product-bat-outline',
         'rewards',
       )
       shieldsEl.insertAdjacentElement('afterend', rewardsEl)
@@ -275,7 +288,7 @@ RegisterPolymerTemplateModifications({
     const embedEl = createMenuElement(
       loadTimeData.getString('socialBlocking'),
       '/socialBlocking',
-      'brave_settings:social-permissions',
+      'thumb-down',
       'socialBlocking',
     )
     if (isBraveRewardsSupported) {
@@ -290,7 +303,7 @@ RegisterPolymerTemplateModifications({
     const syncEl = createMenuElement(
       loadTimeData.getString('braveSync'),
       '/braveSync',
-      'brave_settings:sync',
+      'product-sync',
       'braveSync',
     )
     privacyEl.insertAdjacentElement('afterend', syncEl)
@@ -301,7 +314,7 @@ RegisterPolymerTemplateModifications({
     const extensionEl = createMenuElement(
       loadTimeData.getString('braveDefaultExtensions'),
       '/extensions',
-      'brave_settings:extensions',
+      'browser-extensions',
       'extensions',
     )
     searchEl.insertAdjacentElement('afterend', extensionEl)
@@ -310,7 +323,7 @@ RegisterPolymerTemplateModifications({
     const web3El = createMenuElement(
       loadTimeData.getString('braveWeb3'),
       '/web3',
-      'brave_settings:wallet',
+      'product-brave-wallet',
       'wallet',
     )
 
@@ -324,7 +337,7 @@ RegisterPolymerTemplateModifications({
     const helpTipsEl = createMenuElement(
       loadTimeData.getString('braveHelpTips'),
       '/braveHelpTips',
-      'brave_settings:help',
+      'help-outline',
       'braveHelpTips',
     )
     const downloadsEl = getMenuElement(templateContent, '/downloads')
@@ -354,8 +367,8 @@ RegisterPolymerTemplateModifications({
     const graphicsEl = document.createElement('div')
     graphicsEl.setAttribute('class', 'brave-about-graphic')
 
-    const icon = document.createElement('iron-icon')
-    icon.setAttribute('icon', 'brave_settings:full-color-brave-lion')
+    const icon = document.createElement('leo-icon')
+    icon.setAttribute('name', 'product-brave-color')
 
     const metaEl = document.createElement('div')
     metaEl.setAttribute('class', 'brave-about-meta')
@@ -368,6 +381,20 @@ RegisterPolymerTemplateModifications({
     versionEl.setAttribute('class', 'brave-about-item brave-about-menu-version')
     versionEl.textContent = `v ${loadTimeData.getString('braveProductVersion')}`
 
+    for (const icon of templateContent.querySelectorAll('iron-icon')) {
+      const name = icon.getAttribute('icon')
+      const converted = iconConversions[name]
+      if (!icon) {
+        console.error("Couldn't find leo icon for", name)
+        continue
+      }
+
+      const leoIcon = document.createElement('leo-icon')
+      leoIcon.setAttribute('name', converted)
+      icon.insertAdjacentElement('beforebegin', leoIcon)
+      icon.remove()
+    }
+
     parent.appendChild(newAboutEl)
     newAboutEl.appendChild(graphicsEl)
     graphicsEl.appendChild(icon)

chromium_presubmit_config.json5

@@ -153,6 +153,7 @@
     "CheckWebDevStyle": [
       "components/speedreader/resources/speedreader-desktop.css",
       "components/speedreader/resources/third_party/",
+      "components/webpack/gen-webpack-grd\\.js",
       "test/data/speedreader/",
     ]
   },

chromium_src/ui/webui/resources/tools/optimize_webui.py

@@ -0,0 +1,11 @@
+# Copyright (c) 2023 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
+# This variable comes from the upstream file, so disable the pylint warning
+# about undefined variables.
+# pylint: disable=undefined-variable
+_BASE_EXCLUDES.extend([
+    "chrome://resources/brave/leo.bundle.js", "//resources/brave/leo.bundle.js"
+])

components/brave_extension/extension/brave_extension/BUILD.gn

@@ -1,3 +1,8 @@
+# Copyright (c) 2019 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
 import("//brave/components/common/typescript.gni")
 import("//build/config/locales.gni")
 
@@ -24,7 +29,7 @@ transpile_web_ui("brave_extension") {
 
   # Must match the relative path from the static GRD to the manifest.json
   # plus any other relative path we want these files to live in the extension
-  extra_relative_path = "/brave_extension/out"
+  resource_path_prefix = "brave_extension/out"
 
   # WDP node_modules is not an ancestor of its generated code, which still
   # contains module imports.

components/brave_webtorrent/extension/BUILD.gn

@@ -1,3 +1,8 @@
+# Copyright (c) 2018 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
 import("//brave/components/common/typescript.gni")
 
 transpile_web_ui("generate_brave_webtorrent") {
@@ -19,7 +24,7 @@ transpile_web_ui("generate_brave_webtorrent") {
 
   # Must match the relative path from the static GRD to the manifest.json
   # plus any other relative path we want these files to live in the extension
-  extra_relative_path = "/brave_webtorrent/extension/out"
+  resource_path_prefix = "brave_webtorrent/extension/out"
 
   public_asset_path = "/extension/out/"
 }

components/common/typescript.gni

@@ -1,3 +1,8 @@
+# Copyright (c) 2019 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
 import("//brave/resources/brave_grit.gni")
 
 # JS / TS imports via `require` or `import` will be added to a list and
@@ -65,19 +70,20 @@ brave_common_web_compile_inputs = [
 #       - resource ID (e.g. `IDR_RESOURCENAME_MYFILE_JS`)
 #   output_dir
 #     Optional custom path for compiled output
-#   extra_relative_path
-#     Extension resource files need to have the same relative path prefix
-#     in their GRD as the manifest.json in its (separate) GRD file
-#     So we offer an option to put a folder structure in between the GRD
-#     and the output directories so that the resource is stored as, e.g.
-#     extra/relative/path/myFile.js
+#   generate_grdp
+#     Optionally generate a Grit Part file instead of a grit file.
+#   resource_path_prefix
+#     Sometimes, as with extensions, it is desirable to specify a prefix which
+#     is used to import files. For example, the path prefix brave/foo means that
+#     to import subfolder/myFile.js you would write
+#       import('brave/foo/subfolder/myFile.js')
 #   public_asset_path
 #     Support a different URL path to access generated resources at.
 #     The default is '/' and we'll want to keep that most of the time,
-#     but if we're specifying extra_relative_path then normally a portion of
+#     but if we're specifying resource_path_prefix then normally a portion of
 #     that will need to be involved in the public_asset_path.
 #     For extensions, this is the relative path from where the manifest is to
-#     where the extra_relative_path ends.
+#     where the resource_path_prefix ends.
 #   webpack_aliases
 #     Support for web pack aliases that directly passed to webpack config.
 template("transpile_web_ui") {
@@ -119,8 +125,13 @@ template("transpile_web_ui") {
       gen_output_dir = "$root_gen_dir/brave/web-ui-$resource_name"
     }
 
-    # sole output is a GRD that includes all the resources
+    # Output is a GRD that includes all the resources, and a bundle for each
+    # entry point or a GRDP file that includes all the resources.
     grd_name = "$resource_name.grd"
+    if (defined(invoker.generate_grdp) && invoker.generate_grdp) {
+      grd_name = "$resource_name.grdp"
+    }
+
     outputs = [ "$gen_output_dir/$grd_name" ]
 
     # Base script arguments:
@@ -162,14 +173,14 @@ template("transpile_web_ui") {
       }
     }
 
-    if (defined(invoker.extra_relative_path)) {
-      args += [ "--extra_relative_path=" + invoker.extra_relative_path ]
-    }
-
     if (defined(invoker.public_asset_path)) {
       args += [ "--public_asset_path=" + invoker.public_asset_path ]
     }
 
+    if (defined(invoker.resource_path_prefix)) {
+      args += [ "--resource_path_prefix=" + invoker.resource_path_prefix ]
+    }
+
     if (is_official_build) {
       args += [ "--production" ]
     }