[Uplift 1.62.x] [Nala]: Update to latest

.storybook/chrome-resources-mock/js/cr.js

@@ -0,0 +1,20 @@
+// Copyright (c) 2022 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/.
+
+/**
+ * 
+ * @param {string} eventName 
+ * @param {Function} handler 
+ */
+export function addWebUIListener(eventName, handler) {}
+
+/**
+ * 
+ * @param {string} message 
+ * @param  {...any} args 
+ */
+export function sendWithPromise(message, ...args) {
+  return new Promise(() => console.log('sendWithPromise', message, args))
+}

.storybook/chrome-resources-mock/js/plural_string_proxy.js.ts → .storybook/chrome-resources-mock/js/plural_string_proxy.js

@@ -3,14 +3,21 @@
 // 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/.
 
-let instance: PluralStringProxyImpl | null = null
+/** @type {PluralStringProxyImpl | null} */
+let instance = null
 
 export class PluralStringProxyImpl {
   static getInstance() {
     return instance || (instance = new PluralStringProxyImpl())
   }
 
-  getPluralString(key: string, count: number): Promise<string> {
+  /**
+   * 
+   * @param {string} key 
+   * @param {number} count 
+   * @returns {Promise<string>}
+   */
+  getPluralString(key, count) {
     return Promise.resolve(`${key}(${count})`)
   }
 }

.storybook/main.js

@@ -2,28 +2,29 @@ const path = require('path')
 
 const isCI = Boolean(process.env.JENKINS_URL && process.env.BUILD_ID)
 
+/** @type {import('@storybook/react-webpack5').StorybookConfig} */
 module.exports = {
   stories: ['../components/**/stories/*.tsx', '../components/**/*.stories.tsx'],
   typescript: {
     check: true,
+    reactDocgen: false,
     checkOptions: {
-      tsconfig: path.resolve(__dirname, '..', 'tsconfig-storybook.json'),
-      compilerOptions: {
-        'react-docgen-typescript': false,
-        allowJs: true,
-        skipLibCheck: true,
-        noImplicitAny: true,
-        outDir: './storybook_dist'
-      },
-      async: !isCI
+      async: !isCI,
+      typescript: {
+        configFile: path.resolve(__dirname, '..', 'tsconfig-storybook.json')
+      }
     }
   },
   addons: ['@storybook/addon-knobs', '@storybook/addon-essentials'],
+  framework: "@storybook/react-webpack5",
   staticDirs: [
     { from: '../node_modules/@brave/leo/icons', to: 'icons/' },
     {
       from: '../components/playlist/browser/resources/stories/assets',
       to: 'playlist/'
     }
-  ]
+  ],
+  features: {
+    storyStoreV7: false
+  }
 }

.storybook/preview.js

@@ -1,16 +1,15 @@
 import 'emptykit.css'
 import * as React from 'react'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
-import { addParameters } from '@storybook/react'
 import {setIconBasePath} from '@brave/leo/shared/icon'
-import { initLocale } from 'brave-ui/helpers'
 import '../components/web-components/app.global.scss'
 import { getString } from './locale'
 import ThemeProvider from '../components/common/BraveCoreThemeProvider'
 
 // Fonts
 import '../ui/webui/resources/fonts/poppins.css'
 import '../ui/webui/resources/fonts/manrope.css'
+import '../ui/webui/resources/fonts/inter.css'
 
 // Icon path
 // The storybook might be hosted at the root, but it might also be hosted

.storybook/webpack.config.js

@@ -1,19 +1,16 @@
+// 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/.
+
 const path = require('path')
-const AliasPlugin = require('enhanced-resolve/lib/AliasPlugin')
+const webpack = require('webpack')
+const fs = require('fs')
+const { fallback, provideNodeGlobals } = require('../components/webpack/polyfill')
 
 const buildConfigs = ['Component', 'Static', 'Debug', 'Release']
 const extraArchitectures = ['arm64', 'x86']
 
-// OpenSSL 3 no longer supports the insecure md4 hash, but webpack < 5.54.0
-// hardcodes it. Work around by substituting a supported algorithm.
-// https://github.com/webpack/webpack/issues/13572
-// https://github.com/webpack/webpack/issues/14532
-// TODO(petemill): Remove this patching when webpack > 5.54.0 is being used.
-const crypto = require('crypto')
-const crypto_orig_createHash = crypto.createHash
-crypto.createHash = (algorithm) =>
-  crypto_orig_createHash(algorithm == 'md4' ? 'sha256' : algorithm)
-
 function getBuildOuptutPathList(buildOutputRelativePath) {
   return buildConfigs.flatMap((config) => [
     path.resolve(__dirname, `../../out/${config}/${buildOutputRelativePath}`),
@@ -26,6 +23,58 @@ function getBuildOuptutPathList(buildOutputRelativePath) {
   ])
 }
 
+const genFolder = getBuildOuptutPathList('gen')
+  .filter(a => fs.existsSync(a))
+  .sort((a, b) => fs.statSync(b).mtime - fs.statSync(a).mtime)[0]
+if (!genFolder) {
+  throw new Error("Failed to find build output folder!")
+}
+
+const basePathMap = require('../components/webpack/path-map')(genFolder)
+
+// Override the path map we use in the browser with some additional mock
+// directories, so that we can replace things in Storybook.
+const pathMap = {
+  ...basePathMap,
+  'chrome://resources': [
+    // As we mock some chrome://resources, insert our mock directory as the first
+    // place to look.
+    path.resolve(__dirname, 'chrome-resources-mock'),
+    basePathMap['chrome://resources']
+  ]
+}
+
+/**
+ * Maps a prefix to a corresponding path. We need this as Webpack5 dropped
+ * support for scheme prefixes (like chrome://)
+ * 
+ * Note: This prefixReplacer is slightly different from the one we use in proper
+ * builds, as it takes the first match from any build folder, rather than
+ * specifying one - we don't know what the user built last, so we just see what
+ * we can find.
+ * 
+ * This isn't perfect, and in future it'd be good to pass the build folder in
+ * via an environment variable. For now though, this works well.
+ * @param {string} prefix The prefix
+ * @param {string[] | string} replacements The real path options
+ */
+const prefixReplacer = (prefix, replacements) => {
+  if (!Array.isArray(replacements)) replacements = [replacements]
+
+  const regex = new RegExp(`^${prefix}/(.*)`)
+  return new webpack.NormalModuleReplacementPlugin(regex, resource => {
+    resource.request = resource.request.replace(regex, (_, subpath) => {
+      if (!subpath) {
+        throw new Error("Subpath is undefined")
+      }
+
+      const match = replacements.find((dir) => fs.existsSync(path.join(dir, subpath))) ?? replacements[0]
+      const result = path.join(match, subpath)
+      return result
+    })
+  })
+}
+
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {
   const isDevMode = mode === 'development'
@@ -70,65 +119,20 @@ module.exports = async ({ config, mode }) => {
           '../components/webpack/webpack-ts-transformers.js'
         )
       }
+    },
+    {
+      test: /\.avif$/,
+      loader: 'file-loader'
     }
   )
-  config.module.rules.push({
-    test: /\.avif$/,
-    loader: 'file-loader'
-  })
-  // Use webpack resolve.alias from v5 whilst still using webpack v4,
-  // so that we can use an array as value
-  config.resolve.plugins = [
-    ...config.resolve.plugins,
-    new AliasPlugin(
-      'described-resolve',
-      [
-        {
-          name: 'brave-ui',
-          alias: path.resolve(__dirname, '../node_modules/@brave/brave-ui')
-        },
-        {
-          // Force same styled-components module for brave-core and brave-ui
-          // which ensure both repos code use the same singletons, e.g. ThemeContext.
-          name: 'styled-components',
-          alias: path.resolve(__dirname, '../node_modules/styled-components')
-        },
-        {
-          name: 'chrome://resources',
-          alias: [
-            // Mock chromium code where possible
-            path.resolve(__dirname, 'chrome-resources-mock'),
-            // TODO(petemill): This is not ideal since if the dev is using a Static
-            // build, but has previously made a Component build, then an outdated
-            // version of a module will be used. Instead, accept a cli argument
-            // or environment variable containing which build target to use.
-            ...getBuildOuptutPathList('gen/ui/webui/resources/tsc')
-          ]
-        },
-        {
-          name: 'gen',
-          alias: [
-            // Mock chromium code where possible
-            path.resolve(__dirname, 'gen-mock'),
-            // TODO(petemill): This is not ideal since if the dev is using a Static
-            // build, but has previously made a Component build, then an outdated
-            // version of a module will be used. Instead, accept a cli argument
-            // or environment variable containing which build target to use.
-            ...getBuildOuptutPathList('gen')
-          ]
-        },
-        {
-          name: '$web-common',
-          alias: [path.resolve(__dirname, '../components/common')]
-        },
-        {
-          name: '$web-components',
-          alias: [path.resolve(__dirname, '../components/web-components')]
-        }
-      ],
-      'resolve'
-    )
-  ]
+
+  config.resolve.alias = pathMap
+  config.resolve.fallback = fallback
+
+  config.plugins.push(provideNodeGlobals,
+    ...Object.keys(pathMap)
+      .filter(prefix => prefix.startsWith('chrome://'))
+      .map(prefix => prefixReplacer(prefix, pathMap[prefix])))
   config.resolve.extensions.push('.ts', '.tsx', '.scss')
   return config
 }

browser/resources/settings/shortcuts_page/commands.tsx

@@ -24,7 +24,7 @@ const Container = styled.div`
 const CommandsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  font: ${font.primary.default.regular};
+  font: ${font.default.regular};
   margin-bottom: ${spacing['2Xl']};
   border: 1px solid ${color.divider.subtle};
   border-radius: ${radius.m};

browser/resources/settings/shortcuts_page/components/ConfigureShortcut.tsx

@@ -37,7 +37,7 @@ const HintText = styled.div`
   text-align: center;
   margin: ${spacing['4Xl']};
   color: ${color.text.tertiary};
-  font: ${font.primary.default.regular};
+  font: ${font.default.regular};
 `
 
 const InUseAlert = styled(Alert)`

browser/resources/settings/shortcuts_page/components/Keys.tsx

@@ -39,7 +39,7 @@ const Kbd = styled.div<{ large?: boolean; square?: boolean }>`
       min-width: 32px;
       border-radius: ${radius.l};
       padding: ${spacing.xl};
-      font: ${font.primary.heading.h3};
+      font: ${font.heading.h3};
       box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), inset 0px 1px 0px #ffffff;
       background: linear-gradient(180deg, #f4f6f8 0%, #ffffff 100%);
     `}

browser/ui/webui/ethereum_remote_client/ethereum_remote_client_page.html

@@ -7,6 +7,7 @@
 
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <link rel="stylesheet" href="chrome://resources/brave/fonts/poppins.css">
+  <link rel="stylesheet" href="chrome://resources/brave/fonts/inter.css">
   <script src="chrome://resources/js/load_time_data_deprecated.js"></script>
   <script src="/strings.js"></script>
   <script src="/ethereum_remote_client_page.bundle.js"></script>

chromium_src/content/browser/webui/shared_resources_data_source.cc

@@ -30,7 +30,8 @@
 namespace {
 
 bool ShouldHandleWebUIRequestCallback(const std::string& path) {
-  if (!base::EqualsCaseInsensitiveASCII(path, "fonts/poppins.css")) {
+  if (!base::EqualsCaseInsensitiveASCII(path, "fonts/poppins.css") &&
+      !base::EqualsCaseInsensitiveASCII(path, "fonts/inter.css")) {
     return false;
   }
 

components/ai_chat/resources/page/ai_chat_ui.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="chrome-untrusted://resources/css/text_defaults.css">
     <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/manrope.css">
     <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/poppins.css">
+    <link rel="stylesheet" href="chrome-untrusted://resources/brave/fonts/inter.css">
     <script src="chrome-untrusted://resources/js/load_time_data_deprecated.js"></script>
     <script src="/strings.js"></script>
     <link rel="stylesheet" href="./styles.css">

components/ai_chat/resources/page/components/conversation_list/style.module.scss

@@ -7,7 +7,7 @@
   display: flex;
   align-items: flex-start;
   gap: 16px;
-  font: var(--leo-font-secondary-default-regular);
+  font: var(--leo-font-default-regular);
   color: var(--leo-color-text-primary);
   padding: 16px;
   background-color: var(--leo-color-page-background);
@@ -42,7 +42,7 @@
 .suggestedQuestionLabel {
   --leo-icon-size: 18px;
 
-  font: var(--leo-font-secondary-small-regular);
+  font: var(--leo-font-small-regular);
   color: var(--leo-color-text-tertiary);
   padding-bottom: 16px;
 }
@@ -51,7 +51,7 @@
   display: flex;
   align-items: flex-start;
   text-align: left;
-  font: var(--leo-font-secondary-default-regular);
+  font: var(--leo-font-default-regular);
 }
 
 .questionsList {

components/ai_chat/resources/page/components/feature_button_menu/style.module.scss

@@ -7,7 +7,7 @@
   background-color: var(--leo-color-page-background);
   padding: var(--leo-menu-item-padding) calc(var(--leo-menu-item-margin) + var(--leo-menu-item-padding));
   color: var(--leo-color-text-tertiary);
-  font: var(--leo-font-primary-small-regular);
+  font: var(--leo-font-small-regular);
 
 }
 
@@ -16,7 +16,7 @@
   margin: 14px calc(var(--leo-menu-item-margin) + var(--leo-menu-item-padding));
   margin-bottom: 2px;
   color: var(--leo-color-text-tertiary);
-  font: var(--leo-font-primary-small-regular);
+  font: var(--leo-font-small-regular);
   display: flex;
   flex-direction: row;
   justify-content: start;
@@ -53,7 +53,7 @@
 }
 
 .modelSubtitle {
-  font: var(--leo-font-primary-small-regular);
+  font: var(--leo-font-small-regular);
   padding: 0;
   margin: 0;
 }