Merge branch 'ChromeDevTools:main' into main

Author: tysonthomas9

DEPS

@@ -15,10 +15,10 @@ vars = {
   'build_revision': 'e13953ced04ed05f45aa3c961bd6d802aced74ec',
 
   'buildtools_url': 'https://chromium.googlesource.com/chromium/src/buildtools.git',
-  'buildtools_revision': '077a66f30fcf281b066fafb6dfc60818c238efb6',
+  'buildtools_revision': 'e9b36e9ffb02b268d194c3f82f89952d09d0c714',
 
   'depot_tools_url': 'https://chromium.googlesource.com/chromium/tools/depot_tools.git',
-  'depot_tools_revision': '977c37458fda472d8822a8b57e4a83a7bc747471',
+  'depot_tools_revision': 'f810dae27200e4209bd0cba85bd2266ec0d55312',
 
   'inspector_protocol_url': 'https://chromium.googlesource.com/deps/inspector_protocol',
   'inspector_protocol_revision': '6d1ae0f13aae6ad381ca31b17b88a0f5af29ca94',
@@ -32,7 +32,7 @@ vars = {
   'emscripten_tag': 'ade9d780ff17c88d81aa13860361743e3c1e1396',
 
   # GN CIPD package version.
-  'gn_version': 'git_revision:487f8353f15456474437df32bb186187b0940b45',
+  'gn_version': 'git_revision:0c25d1bbde6ef17e1e6d3938011f56a00c02e457',
 
   'cmake_version': 'version:2@3.21.3',
 
@@ -49,7 +49,7 @@ vars = {
   # Chrome version used for tests. It should be regularly updated to
   # match the Canary version listed here:
   # https://googlechromelabs.github.io/chrome-for-testing/last-known-good-versions.json
-  'chrome': '138.0.7171.0',
+  'chrome': '138.0.7182.0',
 
   # 'magic' text to tell depot_tools that git submodules should be accepted but
   # but parity with DEPS file is expected.
@@ -59,7 +59,7 @@ vars = {
   'non_git_source': 'True',
 
   # siso CIPD package version
-  'siso_version': 'git_revision:17b491ae74e86312a96239ff88e852acee83c135',
+  'siso_version': 'git_revision:30ea210712239b874febcadf661f118fc2c0f6d7',
 }
 
 # Only these hosts are allowed for dependencies in this DEPS file.

buildtools

@@ -565,6 +565,7 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/sriValidationFailedSignatureMismatch.md",
   "front_end/models/issues_manager/descriptions/stylesheetLateImport.md",
   "front_end/models/issues_manager/descriptions/stylesheetRequestFailed.md",
+  "front_end/models/issues_manager/descriptions/userReidentificationBlocked.md",
   "front_end/models/issues_manager/issues_manager.js",
   "front_end/models/javascript_metadata/javascript_metadata.js",
   "front_end/models/live-metrics/live-metrics.js",
@@ -802,6 +803,7 @@ grd_files_release_sources = [
   "front_end/ui/components/report_view/report_view.js",
   "front_end/ui/components/request_link_icon/request_link_icon.js",
   "front_end/ui/components/settings/settings.js",
+  "front_end/ui/components/snackbars/snackbars.js",
   "front_end/ui/components/spinners/spinners.js",
   "front_end/ui/components/srgb_overlay/srgb_overlay.js",
   "front_end/ui/components/suggestion_input/suggestion_input.js",
@@ -1106,6 +1108,7 @@ grd_files_debug_sources = [
   "front_end/models/issues_manager/SharedDictionaryIssue.js",
   "front_end/models/issues_manager/SourceFrameIssuesManager.js",
   "front_end/models/issues_manager/StylesheetLoadingIssue.js",
+  "front_end/models/issues_manager/UserReidentificationIssue.js",
   "front_end/models/javascript_metadata/JavaScriptMetadata.js",
   "front_end/models/javascript_metadata/NativeFunctions.js",
   "front_end/models/live-metrics/LiveMetrics.js",
@@ -1312,7 +1315,7 @@ grd_files_debug_sources = [
   "front_end/panels/application/SharedStorageModel.js",
   "front_end/panels/application/SharedStorageTreeElement.js",
   "front_end/panels/application/StorageBucketsTreeElement.js",
-  "front_end/panels/application/StorageItemsView.js",
+  "front_end/panels/application/StorageItemsToolbar.js",
   "front_end/panels/application/StorageView.js",
   "front_end/panels/application/TrustTokensTreeElement.js",
   "front_end/panels/application/appManifestView.css.js",
@@ -1657,6 +1660,7 @@ grd_files_debug_sources = [
   "front_end/panels/network/RequestResponseView.js",
   "front_end/panels/network/RequestTimingView.js",
   "front_end/panels/network/ResourceChunkView.js",
+  "front_end/panels/network/ResourceDirectSocketChunkView.js",
   "front_end/panels/network/ResourceWebSocketFrameView.js",
   "front_end/panels/network/SignedExchangeInfoView.js",
   "front_end/panels/network/binaryResourceView.css.js",
@@ -2389,6 +2393,8 @@ grd_files_debug_sources = [
   "front_end/ui/components/settings/SettingDeprecationWarning.js",
   "front_end/ui/components/settings/settingCheckbox.css.js",
   "front_end/ui/components/settings/settingDeprecationWarning.css.js",
+  "front_end/ui/components/snackbars/Snackbar.js",
+  "front_end/ui/components/snackbars/snackbar.css.js",
   "front_end/ui/components/spinners/Spinner.js",
   "front_end/ui/components/spinners/spinner.css.js",
   "front_end/ui/components/srgb_overlay/SrgbOverlay.js",

config/gni/devtools_grd_files.gni

@@ -130,8 +130,7 @@ Step-by-step guide on how to merge:
 
 1. Request approval to merge by adding the milestone to the `Merge-Request` filed of the relevant crbug. A bot will come by and either ask for more info ([example](http://crbug.com/1123307#c1)) or approve the request.
 1. Backmerges are done to the `chromium/xxxx` (e.g. `chromium/3979`) branch on the DevTools frontend repo.
-   Use <https://chromiumdash.appspot.com/branches> or [Omahaproxy](https://omahaproxy.appspot.com/)
-   to find out what branch a major Chromium version has (column `true_branch`).
+   Use <https://chromiumdash.appspot.com/branches> to find out what branch a major Chromium version has (column `Devtools`).
 1. Open the to-be-merged commit in Gerrit
    ([example](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928912)).
 1. Click the hamburger menu on the top right and select “Cherry pick”.

docs/contributing/changes.md

@@ -280,7 +280,7 @@ const UIStrings = {
 ## How to prevent a term being localized
 
 Any text within the backticks will not be translated. For example, if the
-'robots.txt' in string 'Requesting for robots.txt ...' should not be translated:
+'robots.txt' in string 'Requesting for robots.txt …' should not be translated:
 
 ```javascript
 // in example.js file
@@ -290,15 +290,15 @@ const UIStrings = {
   /**
    * @description Example description. Note: "robots.txt" is a canonical filename and should not be translated.
    */
-  requestMessage: 'Requesting for `robots.txt` ...',
+  requestMessage: 'Requesting for `robots.txt` …',
 };
 const str_ = i18n.i18n.registerUIStrings('example.js', UIStrings);
 
 const message = i18nString(UIStrings.requestMessage);
 ```
 
 The string will rendered with robots.txt not translated and without the
-backticks around it `js 'Requesting for robots.txt ...'`
+backticks around it `js 'Requesting for robots.txt …'`
 
 ### Phrases that are fully locked
 

docs/cookbook/localization.md

@@ -65,7 +65,7 @@ space.
     [`Toolbars`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts).
     Underneath they make use of `devtools-button`.
 
-###### Don'ts
+###### Don't
 
   * Use `<button>`, as they are not styled correctly
   * Change the default color of icons (only in exceptions)
@@ -155,15 +155,13 @@ button.addEventListener('click', event => onClick(event));
     if necessary, together with core styles.
   * Override inherited `width` with CSS if necessary.
 
-###### Don'ts
+###### Don't
 
   * Override the default colors.
   * Introduce custom select components.
 
 ##### Developer examples
 
-###### Primary button
-
 Usage with lit-html:
 
 ```js
@@ -205,14 +203,12 @@ select.addEventListener('change', event => onChange(event))
     nested within a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
     for radio buttons, together with core styles.
 
-###### Don'ts
+###### Don't
 
   * Override the default colors.
 
 ##### Developer examples
 
-###### Primary button
-
 Usage with lit-html:
 
 ```js
@@ -242,14 +238,12 @@ radio.addEventListener('change', event => onChange(event))
   * Use [`<input type="range">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
     for sliders, together with core styles.
 
-###### Don'ts
+###### Don't
 
   * Override the default colors.
 
 ##### Developer examples
 
-###### Primary button
-
 Usage with lit-html:
 
 ```js
@@ -267,3 +261,40 @@ const slider = UI.UIUtils.createSlider(min, max, tabIndex);
 slider.addEventListener('change', event => onChange(event))
 ```
 
+## Icons
+
+![Icon component (variety of icons)](images/icons-header.png)
+
+### Usage
+
+#### Designer guidelines
+
+Find an exhaustive collection of icons currently used in DevTools [here](https://drive.google.com/corp/drive/folders/1EpmxLRjvdHn5Ia8iT3aicgIEPEvhXY_D?resourcekey=0-QseNsNRsF4w8F5EKz7ncnA)
+
+#### Developer guidelines
+
+##### Dos and Don'ts
+
+###### Do
+
+  * Set class and change color and / or size in .css files
+
+###### Don't
+
+  * Use icons as buttons
+  * Use Icon constructor and data setter (deprecated)
+  * Use inline styles e.g. `js icon.style.color = ‘some-color’`
+
+##### Developer examples
+
+Usage with lit-html:
+
+```js
+html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`
+```
+
+Usage with the imperative API:
+
+```js
+const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');
+```

docs/styleguide/ux/components.md

@@ -44,14 +44,14 @@ For backwards compatibility, the first argument to `widgetConfig` can also be a
 
 ```html
 <devtools-widget .widgetConfig=${widgetConfig(ElementsPanel)}>
-  <devtools-split-widget>
+  <devtools-split-view>
     <devtools-widget slot="main" .widgetConfig=${widgetConfig(ElementsTree)}></devtools-widget>
     <devtools-tab-pane slot="sidebar">
       <devtools-widget .widgetConfig=${widgetConfig(StylesPane, {element: input.element})}></devtools-widget>
       <devtools-widget .widgetConfig=${widgetConfig(ComputedPane, {element: input.element})}></devtools-widget>
       ...
     </devtools-tab-pane>
-  </devtools-split-widget>
+  </devtools-split-view>
 </devtools-widget>
 ```
 

docs/styleguide/ux/images/icons-header.png

@@ -3,15 +3,14 @@
 // found in the LICENSE file.
 
 import stylisticPlugin from '@stylistic/eslint-plugin';
-import typescriptPlugin from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
 import { defineConfig, globalIgnores } from 'eslint/config';
 import eslintPlugin from 'eslint-plugin-eslint-plugin';
 import importPlugin from 'eslint-plugin-import';
 import jsdocPlugin from 'eslint-plugin-jsdoc';
 import mochaPlugin from 'eslint-plugin-mocha';
 import globals from 'globals';
 import { join } from 'path';
+import typescriptEslint from 'typescript-eslint';
 
 import rulesdirPlugin from './scripts/eslint_rules/rules-dir.mjs';
 
@@ -66,7 +65,7 @@ export default defineConfig([
   {
     name: 'JavaScript files',
     plugins: {
-      '@typescript-eslint': typescriptPlugin,
+      '@typescript-eslint': typescriptEslint.plugin,
       '@stylistic': stylisticPlugin,
       '@eslint-plugin': eslintPlugin,
       mocha: mochaPlugin,
@@ -194,7 +193,7 @@ export default defineConfig([
       radix: 'error',
       'valid-typeof': 'error',
       'no-return-assign': ['error', 'always'],
-      'no-implicit-coercion': ['error', {allow: ['!!']}],
+      'no-implicit-coercion': ['error', { allow: ['!!'] }],
 
       'no-array-constructor': 'error',
 
@@ -301,15 +300,15 @@ export default defineConfig([
       ecmaVersion: 'latest',
       sourceType: 'module',
 
-      parser: tsParser,
+      parser: typescriptEslint.parser,
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-            import.meta.dirname,
-            'config',
-            'typescript',
-            'tsconfig.eslint.json',
-            ),
+          import.meta.dirname,
+          'config',
+          'typescript',
+          'tsconfig.eslint.json',
+        ),
       },
     },
 
@@ -549,12 +548,12 @@ export default defineConfig([
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-              import.meta.dirname,
-              'front_end',
-              'models',
-              'trace',
-              'trace.js',
-              ),
+            import.meta.dirname,
+            'front_end',
+            'models',
+            'trace',
+            'trace.js',
+          ),
           importName: 'Trace',
         },
       ],

docs/ui_engineering.md

@@ -51,6 +51,7 @@ function pausedReasonText(reason: string) {
     case 'step':
       return 'Debugger paused';
   }
+  return;
 }
 
 describe('CXX Debugging Extension Test Suite', function() {