chrome-devtools-frontend 1.0.1656897 → 1.0.1657855
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/devtools-ux-writing-refactor/SKILL.md +125 -0
- package/.agents/skills/repro-flaky-tests/SKILL.md +53 -0
- package/AUTHORS +2 -0
- package/docs/get_the_code.md +6 -6
- package/front_end/Images/src/ads.svg +1 -0
- package/front_end/Tests.js +1 -1
- package/front_end/core/common/ResourceType.ts +19 -19
- package/front_end/core/common/Revealer.ts +15 -15
- package/front_end/core/common/SettingRegistration.ts +19 -19
- package/front_end/core/common/Settings.ts +0 -8
- package/front_end/core/host/Platform.ts +4 -0
- package/front_end/core/sdk/CSSMetadata.ts +121 -16
- package/front_end/core/sdk/CSSModel.ts +3 -0
- package/front_end/core/sdk/DOMModel.ts +37 -8
- package/front_end/core/sdk/DebuggerModel.ts +5 -4
- package/front_end/core/sdk/EmulationModel.ts +6 -4
- package/front_end/core/sdk/NetworkManager.ts +22 -17
- package/front_end/core/sdk/RuntimeModel.ts +1 -1
- package/front_end/core/sdk/TargetManager.ts +10 -0
- package/front_end/design_system_tokens.css +6 -0
- package/front_end/entrypoints/devtools_app/devtools_app.ts +1 -1
- package/front_end/entrypoints/formatter_worker/CSSFormatter.ts +13 -4
- package/front_end/entrypoints/formatter_worker/FormatterWorker.ts +23 -4
- package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts +7 -6
- package/front_end/entrypoints/inspector_main/InspectorMain.ts +1 -11
- package/front_end/entrypoints/inspector_main/inspector_main-meta.ts +1 -1
- package/front_end/entrypoints/main/GlobalAiButton.ts +29 -35
- package/front_end/entrypoints/main/MainImpl.ts +7 -34
- package/front_end/entrypoints/main/main-meta.ts +9 -9
- package/front_end/entrypoints/node_app/app/NodeConnectionsPanel.ts +7 -8
- package/front_end/entrypoints/node_app/app/NodeMain.ts +3 -3
- package/front_end/entrypoints/node_app/node_app.ts +7 -7
- package/front_end/foundation/Universe.ts +60 -1
- package/front_end/generated/InspectorBackendCommands.ts +1 -1
- package/front_end/generated/protocol.ts +4 -0
- package/front_end/models/ai_assistance/AiUtils.ts +6 -6
- package/front_end/models/bindings/CSSWorkspaceBinding.ts +8 -5
- package/front_end/models/bindings/DebuggerLanguagePlugins.ts +13 -15
- package/front_end/models/bindings/DebuggerWorkspaceBinding.ts +6 -3
- package/front_end/models/bindings/FileUtils.ts +11 -12
- package/front_end/models/emulation/DeviceModeModel.ts +56 -37
- package/front_end/models/emulation/EmulatedDevices.ts +3 -3
- package/front_end/models/live-metrics/LiveMetrics.ts +47 -23
- package/front_end/models/project_settings/ProjectSettingsModel.ts +2 -37
- package/front_end/models/workspace/FileManager.ts +9 -6
- package/front_end/models/workspace_diff/WorkspaceDiff.ts +23 -12
- package/front_end/panels/ai_assistance/AiAssistancePanel.ts +2 -1
- package/front_end/panels/application/ApplicationPanelSidebar.ts +9 -1
- package/front_end/panels/application/BackgroundServiceView.ts +2 -1
- package/front_end/panels/application/IndexedDBViews.ts +52 -23
- package/front_end/panels/application/ServiceWorkersView.ts +9 -20
- package/front_end/panels/application/components/AdsView.ts +1 -1
- package/front_end/panels/application/components/StorageMetadataView.ts +7 -2
- package/front_end/panels/application/resourcesSidebar.css +5 -0
- package/front_end/panels/common/BadgeNotification.ts +1 -1
- package/front_end/panels/console/ConsoleContextSelector.ts +3 -3
- package/front_end/panels/console/ConsoleInsightTeaser.ts +2 -1
- package/front_end/panels/console/ConsolePinPane.ts +10 -10
- package/front_end/panels/console/ConsolePrompt.ts +4 -4
- package/front_end/panels/console/ConsoleSidebar.ts +7 -7
- package/front_end/panels/console/ConsoleView.ts +44 -43
- package/front_end/panels/console/ConsoleViewMessage.ts +40 -40
- package/front_end/panels/console/console-meta.ts +34 -34
- package/front_end/panels/coverage/CoverageView.ts +1 -1
- package/front_end/panels/developer_resources/DeveloperResourcesListView.ts +19 -20
- package/front_end/panels/developer_resources/DeveloperResourcesView.ts +6 -8
- package/front_end/panels/developer_resources/developer_resources-meta.ts +2 -2
- package/front_end/panels/elements/ElementsTreeElement.ts +253 -144
- package/front_end/panels/elements/ElementsTreeOutline.ts +3 -2
- package/front_end/panels/elements/components/AdornerManager.ts +1 -0
- package/front_end/panels/emulation/DeviceModeToolbar.ts +19 -19
- package/front_end/panels/explain/components/ConsoleInsight.ts +2 -1
- package/front_end/panels/media/EventDisplayTable.ts +2 -2
- package/front_end/panels/media/EventTimelineView.ts +4 -4
- package/front_end/panels/media/MainView.ts +4 -4
- package/front_end/panels/media/PlayerDetailView.ts +5 -5
- package/front_end/panels/media/PlayerListView.ts +1 -1
- package/front_end/panels/media/PlayerMessagesView.ts +12 -12
- package/front_end/panels/media/PlayerPropertiesView.ts +17 -17
- package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts +13 -12
- package/front_end/panels/mobile_throttling/ThrottlingManager.ts +8 -7
- package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts +6 -7
- package/front_end/panels/mobile_throttling/mobile_throttling-meta.ts +3 -2
- package/front_end/panels/network/NetworkLogView.ts +2 -1
- package/front_end/panels/network/NetworkWaterfallColumn.ts +1 -3
- package/front_end/panels/network/RequestConditionsDrawer.ts +2 -2
- package/front_end/panels/network/networkPanel.css +1 -0
- package/front_end/panels/network/networkTimingTable.css +1 -1
- package/front_end/panels/profiler/HeapSnapshotView.ts +2 -1
- package/front_end/panels/profiler/ProfileView.ts +2 -1
- package/front_end/panels/protocol_monitor/JSONEditor.ts +10 -10
- package/front_end/panels/protocol_monitor/ProtocolMonitor.ts +28 -32
- package/front_end/panels/protocol_monitor/protocol_monitor-meta.ts +1 -1
- package/front_end/panels/recorder/RecorderController.ts +1 -0
- package/front_end/panels/recorder/RecorderEvents.ts +8 -0
- package/front_end/panels/settings/components/SyncSection.ts +2 -1
- package/front_end/panels/timeline/AppenderUtils.ts +12 -4
- package/front_end/panels/timeline/ThreadAppender.ts +3 -3
- package/front_end/panels/timeline/TimelinePanel.ts +5 -5
- package/front_end/panels/timeline/timelineFlameChartView.css +2 -1
- package/front_end/panels/webauthn/WebauthnPane.ts +10 -10
- package/front_end/third_party/chromium/README.chromium +1 -1
- package/front_end/third_party/chromium/ahem/ahem.js +792 -0
- package/front_end/tsconfig.json +7 -1
- package/front_end/ui/components/dialogs/shortcutDialog.css +15 -12
- package/front_end/ui/legacy/ActionRegistration.ts +1 -1
- package/front_end/ui/legacy/InspectorView.ts +1 -1
- package/front_end/ui/legacy/Treeoutline.ts +15 -0
- package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +109 -23
- package/front_end/ui/legacy/components/source_frame/SourceFrame.ts +5 -0
- package/front_end/ui/legacy/theme_support/ThemeSupport.ts +2 -2
- package/front_end/ui/visual_logging/KnownContextValues.ts +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: devtools-ux-writing-refactor
|
|
3
|
+
description: >-
|
|
4
|
+
Refactor user-facing UIStrings and localization comments in a DevTools module folder according to UX writing guidelines (child task of b/40799900). Use when simplifying wording, checking sentence case, or improving L10n comments in UIStrings for a specific folder or issue. Don’t use for general code changes or non-UIStrings files.
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# DevTools UX writing refactoring workflow
|
|
8
|
+
|
|
9
|
+
Use this skill when addressing a single UX writing refactoring task (one module folder or child issue under tracking bug [b/40799900](https://crbug.com/40799900)).
|
|
10
|
+
|
|
11
|
+
## 0. Environment setup (avoid PATH errors)
|
|
12
|
+
|
|
13
|
+
In DevTools Linux workspaces, `depot_tools` and `node`/`npm` may not be in `PATH` in non-interactive agent shells. Before you run Git, `gclient`, `npm`, or `git cl` commands, ensure that your environment is set up:
|
|
14
|
+
```bash
|
|
15
|
+
export PATH=$HOME/depot_tools:$PATH
|
|
16
|
+
source ~/.nvm/nvm.sh # Or export PATH=$(pwd)/third_party/node/linux/node-linux-x64/bin:$PATH
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 1. Pre-flight issue check and target scope
|
|
20
|
+
|
|
21
|
+
Before you write code or modify files, check the status of the associated Buganizer issue:
|
|
22
|
+
```bash
|
|
23
|
+
$ISSUES render <issue_number> # Or use buganizer MCP tools: render_issue / render_issue_with_external
|
|
24
|
+
```
|
|
25
|
+
* **Why?** Multiple developers and agents work on child tasks under `b/40799900`.
|
|
26
|
+
* **Action required:** If the issue is marked as `FIXED`, `VERIFIED`, or `CLOSED`, is assigned to another active developer, or has an attached Change List (CL), **stop immediately and verify whether you need to address it**. Ask the user for confirmation before you override existing work.
|
|
27
|
+
* **Identify target files:** If `render_issue` returns an external redaction notice, use `render_issue_with_external` to view the full bug description. The bug description typically lists the exact **Target Files** to refactor for this child task. Focus exclusively on those target files.
|
|
28
|
+
|
|
29
|
+
## 2. Create a branch
|
|
30
|
+
|
|
31
|
+
Create a branch dedicated to this issue from the latest `origin/main` (after you run `gclient sync`) using the DevTools version control tool:
|
|
32
|
+
```bash
|
|
33
|
+
git fetch origin
|
|
34
|
+
git checkout origin/main
|
|
35
|
+
gclient sync
|
|
36
|
+
git new-branch fix-<issue_number>
|
|
37
|
+
```
|
|
38
|
+
* **Why?** In Chrome DevTools, don’t use standard Git commands such as `git checkout -b` or `git switch -c`. Always use `git new-branch` so that `depot_tools` and Gerrit configure tracking information correctly.
|
|
39
|
+
* **Naming:** Always include the issue number in the branch name (for example, `fix-531625399`).
|
|
40
|
+
|
|
41
|
+
## 3. Refactor UIStrings and localization comments
|
|
42
|
+
|
|
43
|
+
Locate all TypeScript files in the target folder that define `const UIStrings = { ... }` and apply the **8-point UX writing checklist** (cross-check with official DevTools documentation at https://developer.chrome.com/docs/devtools).
|
|
44
|
+
|
|
45
|
+
> [!IMPORTANT]
|
|
46
|
+
> **Ignore non-localized or experimental strings:** Don’t modify strings in `const UIStringsNotTranslate = { ... }`, `lockedString`, or `i18n.i18n.lockedString`. These strings are for early-stage or experimental features that you mustn’t localize or alter during UX refactoring.
|
|
47
|
+
|
|
48
|
+
### The 8-point checklist
|
|
49
|
+
1. **Brevity and short synonyms:** Replace formal or lengthy words:
|
|
50
|
+
* `preserve` -> `keep` | `additional` -> `more` | `prevent` -> `stop` | `receive` -> `get`
|
|
51
|
+
* `submit` -> `send` | `modification` -> `change` | `create` -> `add` | `suitable` -> `fit`
|
|
52
|
+
* *Check sibling references:* If you change a setting name or label (for example, changing “Preserve log” to “Keep log”), search sibling files in the folder for explanatory text or status strings that reference the old name in quotes (for example, “console.clear() was prevented due to ‘Preserve log’”), and update them to match.
|
|
53
|
+
2. **Cut unnecessary words:** Eliminate politeness (`please`, `sorry`), filler (`very`, `strongly`, `there is` or `there are`), and marketing fluff (`seamless`, `awesome`, `fast`, `quick`).
|
|
54
|
+
3. **Contractions:** Use contractions (`don’t`, `can’t`, `isn’t`, `won’t`) instead of formal spellings (`do not`, `cannot`, `is not`, `will not`).
|
|
55
|
+
4. **Curly apostrophes, quotation marks, and ellipses:** Use curly apostrophes (`’`) and quotation marks (`“ ”`) for improved readability. Use the ellipsis character (`…`) instead of three periods (`...`). Use prime (`′`) and double prime (`″`) symbols as needed for measurements like length or coordinates.
|
|
56
|
+
5. **Sentence case and capitalization:** Use sentence case for headings, labels, and UI element names. Capitalize only the first word, proper nouns, product names (`Chrome DevTools`), and web APIs (`Background Fetch API`).
|
|
57
|
+
* Don’t capitalize feature names (for example, `conditional breakpoint` or `command menu`).
|
|
58
|
+
* Capitalize panel names and UX elements that are named after panels (for example, `Show Application`, `Toggle Console`, `Console sidebar`, or `Styles`).
|
|
59
|
+
* For panel names that consist of two words, capitalize only the first word (for example, `Developer resources panel`).
|
|
60
|
+
* When you use the panel name in combination with another word, capitalize the panel name but not the other word, unless it is a proper noun (for example, `Console view` or `DevTools Console`).
|
|
61
|
+
* In some cases, ambiguity exists whether a word refers to a UX element in DevTools (such as a panel name) or a concept (such as developer terminology). For example, this occurs with `console`, `issue`, or `network`. Decide based on the surrounding context and code (for example, `Console view`, `Console sidebar`, and `Console prompt` versus `console message`, `console warning`, `console log`, `copy console`, `clear console`, and `console history`; `Show Network` versus `network log` and `network filter`).
|
|
62
|
+
6. **Punctuation and actionability:** Remove trailing periods from single-sentence labels or titles. Ensure that error messages instruct the user how to recover (for example, `Shorten filename to 64 characters or less` instead of `Invalid filename`). Ensure that ARIA labels and multi-sentence tooltips have consistent terminal punctuation.
|
|
63
|
+
7. **Terminology (glossary):** Strictly follow standard DevTools UI terminology and letter casing (`panel`, `tab`, `drawer`, `sidebar`, `datagrid` or `table`, `action bar`, `status bar`, and `live expressions section`). Never use `pane` or call tabs `panes` in UI strings or localization (L10n) comments.
|
|
64
|
+
8. **Localization (L10n) comments:** Ensure that every string in `UIStrings` has a preceding `@description` comment that explains where and when it appears. This information is used for translators who need to understand the context in which the string is used.
|
|
65
|
+
* Use precise terminology and correct letter casing (see rule 7). Ensure that the description is easy to understand and provides enough context for translators. For descriptions that are underspecified or
|
|
66
|
+
ambiguous, figure out the context by looking at the use site of the
|
|
67
|
+
string and come up with a better description.
|
|
68
|
+
* You must explicitly document all standard placeholders (`{PH1}`, `{url}`, `{index}`) with runtime data examples (for example, `@example {https://example.com} url`).
|
|
69
|
+
* *ICU plural variables:* The i18n tool automatically parses variables in ICU plural format (such as `n` in `{n, plural, =0 {No issues} ...}`) as numeric counts, so they don’t require an `@example` tag in the `@description` comment.
|
|
70
|
+
* *Terminal punctuation:* Every `@description` comment must end with a period (`.`), even if it is a single phrase or sentence.
|
|
71
|
+
|
|
72
|
+
## 4. Chrome writing style guide
|
|
73
|
+
|
|
74
|
+
Also consult the style guides at `google3/experimental/users/rachelandrew/tools/chrome_writing/knowledge/style/` for applicable guidelines.
|
|
75
|
+
|
|
76
|
+
## 5. Pause for confirmation
|
|
77
|
+
|
|
78
|
+
Ask the user for a preliminary review of the proposed changes before proceeding. If the user has feedback, address feedback and pause again for confirmation.
|
|
79
|
+
|
|
80
|
+
## 6. Mandatory verification and testing
|
|
81
|
+
|
|
82
|
+
Don’t finish an edit without running the linter and test suite. In DevTools, i18n placeholder changes or string edits can easily break tests or linter rules.
|
|
83
|
+
|
|
84
|
+
1. **Update sibling unit tests**
|
|
85
|
+
Unit test files (`*.test.ts`) alongside the implementation often assert exact UIString values (such as error messages or warnings). When you refactor a string, check sibling `*.test.ts` files for assertions that match the old string value, and update them to prevent test failures.
|
|
86
|
+
2. **Run the linter and auto-fix errors**
|
|
87
|
+
```bash
|
|
88
|
+
npm run lint -- <folder_path>
|
|
89
|
+
```
|
|
90
|
+
3. **Run unit tests**
|
|
91
|
+
Run unit tests for the target folder first for fast feedback. Then, run the full test suite to verify that no cross-module regressions or snapshot failures occurred:
|
|
92
|
+
```bash
|
|
93
|
+
npm run test -- <folder_path>
|
|
94
|
+
npm run test
|
|
95
|
+
```
|
|
96
|
+
4. **Run presubmit checks**
|
|
97
|
+
Ensure that you commit or stage all changes before you run presubmit checks:
|
|
98
|
+
```bash
|
|
99
|
+
git cl presubmit -u
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## 7. Summarize changes and upload the CL
|
|
103
|
+
|
|
104
|
+
When all tests and presubmit checks pass, commit your changes and upload the CL to Gerrit. Don’t use `[uxw]` as a prefix.
|
|
105
|
+
|
|
106
|
+
1. **Stage and commit changes**
|
|
107
|
+
```bash
|
|
108
|
+
git add <modified_files>
|
|
109
|
+
git commit -m "Ensure consistent UI Strings in <folder_path>"
|
|
110
|
+
```
|
|
111
|
+
*(If you update an existing commit on this branch, use `git commit --amend`).*
|
|
112
|
+
|
|
113
|
+
2. **Upload the CL to Gerrit**
|
|
114
|
+
Upload the CL using `git cl upload`. Provide a dynamic summary of changes (depending on the actual content of the change) and the bug trailer:
|
|
115
|
+
```bash
|
|
116
|
+
git cl upload -d --commit-description="Ensure consistent UI Strings in <folder_path>
|
|
117
|
+
|
|
118
|
+
Summary of changes:
|
|
119
|
+
- <dynamically list specific words replaced, contractions adopted, or sentence case fixes>
|
|
120
|
+
|
|
121
|
+
Fixed: <issue_number>"
|
|
122
|
+
```
|
|
123
|
+
* **Formatting rules:**
|
|
124
|
+
* Keep line length below 72 characters.
|
|
125
|
+
* Include `Fixed: <issue_number>` on a separate line at the bottom of the description so that automation closes the issue.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: repro-flaky-test
|
|
3
|
+
description: Reproduce and investigate flakiness in a test.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Fixing flaky Tests
|
|
7
|
+
|
|
8
|
+
This skill outlines the workflow for reproducing and fixing a flaky test in the DevTools codebase.
|
|
9
|
+
|
|
10
|
+
## Workflow
|
|
11
|
+
|
|
12
|
+
- You will be given as input, either a Chromium bug link (e.g. `crbug.com/1234567`), or a name of a test file and (optionally) the test name.
|
|
13
|
+
- For example: e2e/extensions/debugger-language-plugins.test.ts and "The Debugger Language Plugins/shows sensible error messages".
|
|
14
|
+
- If nothing is provided, as the user which test you should run.
|
|
15
|
+
- Find the test in the codebase and look at its implementation.
|
|
16
|
+
- Run the test three times to note how long the test runs (on average) per minute.
|
|
17
|
+
|
|
18
|
+
## Reproduction
|
|
19
|
+
|
|
20
|
+
- Run the test enough times for a full test run to take one minute. For example, if a test takes a second to run, set it to repeat 60 times. If a test takes 5 seconds to run, run it 12 times.
|
|
21
|
+
- Start with one minute and, if the failure does not repeat, try again and increase the time by a minute (up to a maximum of 5 minutes per run).
|
|
22
|
+
- Use `npm run test -- path/to/foo.test.ts --grep "<test name>" --repeat <count>` to run the tests repeatedly.
|
|
23
|
+
- Be sure to keep track of the cumulative count of how often you run the test and how often they fail, so that you can calculate a 'flaky percentage' before and after making a fix.
|
|
24
|
+
|
|
25
|
+
After every round, display the *cumulative* results in a table:
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
Test: Runs Time Failures
|
|
29
|
+
"Recorder/should be able to start a replay..." 30 60s 0 (0.00%)
|
|
30
|
+
"The Debugger Language Plugins/shows sensible..." 60 60s 1 (1.67%)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Once you have one or more failures, show the error message and ask the user if they want to:
|
|
34
|
+
|
|
35
|
+
1) Start investigating the test failures.
|
|
36
|
+
2) Continue running all the tests.
|
|
37
|
+
3) Run only the failed tests (to get a clearer indication of their failure rate).
|
|
38
|
+
4) Run only the tests that haven't failed (to attempt to get a reproduction).
|
|
39
|
+
|
|
40
|
+
## Investigation
|
|
41
|
+
|
|
42
|
+
- Create a branch flaky_tests and append a datestamp, such as _2026_07_04_14h16m.
|
|
43
|
+
- Ensure you use the instructions from the `devtools-version-control` skill to create and switch branches appropriately.
|
|
44
|
+
- Investigate each test failure and propose a fix.
|
|
45
|
+
- Don't commit the changes to the branch.
|
|
46
|
+
|
|
47
|
+
## Results
|
|
48
|
+
|
|
49
|
+
- Before finishing, run the full verification process (TypeScript checks, and linters) as required by the repository best practices.
|
|
50
|
+
- Request to run the test again for as long as you think it would take to be sure the problem is gone, but get permission from the user before starting very long runs (anything over 4 minutes).
|
|
51
|
+
- For things that have a 33% failure rate before fixing (for example), only a handful of runs are needed to verify, but tests with lower failure rate need more.
|
|
52
|
+
- NOTE: If the test fails again with the same error as before, you don't need to finish the test run but instead you should augment or replace your fix with a better one.
|
|
53
|
+
- At the end, list the tests, state briefly why each test was failing and how the fix addresses the issue along with the failure rate before and after.
|
package/AUTHORS
CHANGED
|
@@ -24,6 +24,7 @@ Anna Agoha <annaagoha@gmail.com>
|
|
|
24
24
|
Anthony Xie <anthonyxie64@gmail.com>
|
|
25
25
|
Axel Chong <haxatron1@gmail.com>
|
|
26
26
|
Anton Bershanskyi <bershanskyi@gmail.com>
|
|
27
|
+
Aviv Keller <me@aviv.sh>
|
|
27
28
|
Biboswan Roy <biboswan98@gmail.com>
|
|
28
29
|
Boris Verkhovskiy <boris.verk@gmail.com>
|
|
29
30
|
Carl Espe <carl@cpespe.com>
|
|
@@ -62,6 +63,7 @@ Juba Borgohain <chromiumjuba@gmail.com>
|
|
|
62
63
|
Julian Geppert <spctstr@gmail.com>
|
|
63
64
|
Junseo Yoo <joon.yoo181@berkeley.edu>
|
|
64
65
|
Kanishk Ranjan <kanishkranjan17@gmail.com>
|
|
66
|
+
Karim El Harim <karimelharim@gmail.com>
|
|
65
67
|
Karntino Areros <karntino.c.areros@gmail.com>
|
|
66
68
|
Kohei Ueno <kohei.ueno119@gmail.com>
|
|
67
69
|
Krishnal Ciccolella <ciccolella.krishnal@gmail.com>
|
package/docs/get_the_code.md
CHANGED
|
@@ -53,10 +53,10 @@ a build time cost. If you want an even fast fast build, you might want to opt
|
|
|
53
53
|
out of bundling by setting `devtools_bundle` to `false`
|
|
54
54
|
|
|
55
55
|
```bash
|
|
56
|
-
gn gen out/
|
|
56
|
+
gn gen out/Fast --args="devtools_skip_typecheck=true devtools_bundle=false"
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
and use `npm run build -- -t
|
|
59
|
+
and use `npm run build -- -t Fast` to build this target.
|
|
60
60
|
|
|
61
61
|
### Rebuilding automatically
|
|
62
62
|
|
|
@@ -111,10 +111,10 @@ The `.env.template` file lists all supported variables. Copy it to `.env` to get
|
|
|
111
111
|
cp .env.template .env
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t
|
|
114
|
+
As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t Fast`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
|
|
115
115
|
|
|
116
116
|
```shell
|
|
117
|
-
DEVTOOLS_TARGET=
|
|
117
|
+
DEVTOOLS_TARGET=Fast
|
|
118
118
|
```
|
|
119
119
|
|
|
120
120
|
Another example - by default running `npm start` auto-opens DevTools for new Tabs.
|
|
@@ -468,8 +468,8 @@ In the `custom_deps` section, insert this line:
|
|
|
468
468
|
"src/third_party/devtools-frontend/src": None,
|
|
469
469
|
```
|
|
470
470
|
|
|
471
|
-
For the integrated checkout, create a single gclient project that automatically gclient sync
|
|
472
|
-
repositories. After checking out chromium, modify the
|
|
471
|
+
For the integrated checkout, create a single gclient project that automatically `gclient sync`s all dependencies for both
|
|
472
|
+
repositories. After checking out chromium, modify the `.gclient` file for `chromium/src` to add the DevTools project:
|
|
473
473
|
|
|
474
474
|
```python
|
|
475
475
|
solutions = [
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M288-384h48v-48h48v48h48v-168q0-10.2-6.9-17.1-6.9-6.9-17.1-6.9h-96q-10.2 0-17.1 6.9-6.9 6.9-6.9 17.1v168Zm48-96v-48h48v48h-48Zm192 96h96q20.4 0 34.2-13.8Q672-411.6 672-432v-96q0-20.4-13.8-34.2Q644.4-576 624-576h-96v192Zm48-48v-96h48v96h-48ZM168-192q-29.7 0-50.85-21.16Q96-234.32 96-264.04v-432.24Q96-726 117.15-747T168-768h624q29.7 0 50.85 21.16Q864-725.68 864-695.96v432.24Q864-234 842.85-213T792-192H168Zm0-72h624v-432H168v432Zm0 0v-432 432Z"/></svg>
|
package/front_end/Tests.js
CHANGED
|
@@ -761,7 +761,7 @@
|
|
|
761
761
|
this.releaseControl();
|
|
762
762
|
});
|
|
763
763
|
|
|
764
|
-
Common.Settings.moduleSetting('active-keybind-set').set('vsCode');
|
|
764
|
+
Common.Settings.Settings.instance().moduleSetting('active-keybind-set').set('vsCode');
|
|
765
765
|
};
|
|
766
766
|
|
|
767
767
|
TestSuite.prototype.testDispatchKeyEventDoesNotCrash = function() {
|
|
@@ -38,7 +38,7 @@ import {ParsedURL} from './ParsedURL.js';
|
|
|
38
38
|
|
|
39
39
|
const UIStrings = {
|
|
40
40
|
/**
|
|
41
|
-
* @description Text that appears in a tooltip the
|
|
41
|
+
* @description Text that appears in a tooltip for the Fetch and XHR resource types filter.
|
|
42
42
|
*/
|
|
43
43
|
fetchAndXHR: '`Fetch` and `XHR`',
|
|
44
44
|
/**
|
|
@@ -50,7 +50,7 @@ const UIStrings = {
|
|
|
50
50
|
*/
|
|
51
51
|
js: 'JS',
|
|
52
52
|
/**
|
|
53
|
-
* @description Text that appears on a button for the
|
|
53
|
+
* @description Text that appears on a button for the CSS resource type filter.
|
|
54
54
|
*/
|
|
55
55
|
css: 'CSS',
|
|
56
56
|
/**
|
|
@@ -70,7 +70,7 @@ const UIStrings = {
|
|
|
70
70
|
*/
|
|
71
71
|
doc: 'Doc',
|
|
72
72
|
/**
|
|
73
|
-
* @description Text that appears on a button for the
|
|
73
|
+
* @description Text that appears on a button for the WebSocket, WebTransport, and DirectSocket resource type filter.
|
|
74
74
|
*/
|
|
75
75
|
socketShort: 'Socket',
|
|
76
76
|
/**
|
|
@@ -86,67 +86,67 @@ const UIStrings = {
|
|
|
86
86
|
*/
|
|
87
87
|
manifest: 'Manifest',
|
|
88
88
|
/**
|
|
89
|
-
* @description Text for other types of items
|
|
89
|
+
* @description Text for other types of items.
|
|
90
90
|
*/
|
|
91
91
|
other: 'Other',
|
|
92
92
|
/**
|
|
93
|
-
* @description Name of a network resource type
|
|
93
|
+
* @description Name of a network resource type.
|
|
94
94
|
*/
|
|
95
95
|
document: 'Document',
|
|
96
96
|
/**
|
|
97
|
-
* @description Name of a network resource type
|
|
97
|
+
* @description Name of a network resource type.
|
|
98
98
|
*/
|
|
99
99
|
stylesheet: 'Stylesheet',
|
|
100
100
|
/**
|
|
101
|
-
* @description Text in Image
|
|
101
|
+
* @description Text in Image view of the Sources panel.
|
|
102
102
|
*/
|
|
103
103
|
image: 'Image',
|
|
104
104
|
/**
|
|
105
|
-
* @description Label for a group of JavaScript files
|
|
105
|
+
* @description Label for a group of JavaScript files.
|
|
106
106
|
*/
|
|
107
107
|
script: 'Script',
|
|
108
108
|
/**
|
|
109
|
-
* @description Name of a network resource type
|
|
109
|
+
* @description Name of a network resource type.
|
|
110
110
|
*/
|
|
111
111
|
texttrack: 'TextTrack',
|
|
112
112
|
/**
|
|
113
|
-
* @description Name of a network resource type
|
|
113
|
+
* @description Name of a network resource type.
|
|
114
114
|
*/
|
|
115
115
|
fetch: 'Fetch',
|
|
116
116
|
/**
|
|
117
|
-
* @description Name of a network resource type
|
|
117
|
+
* @description Name of a network resource type.
|
|
118
118
|
*/
|
|
119
119
|
eventsource: 'EventSource',
|
|
120
120
|
/**
|
|
121
|
-
* @description Name of a network resource type
|
|
121
|
+
* @description Name of a network resource type.
|
|
122
122
|
*/
|
|
123
123
|
websocket: 'WebSocket',
|
|
124
124
|
/**
|
|
125
|
-
* @description Name of a network resource type
|
|
125
|
+
* @description Name of a network resource type.
|
|
126
126
|
*/
|
|
127
127
|
webtransport: 'WebTransport',
|
|
128
128
|
/**
|
|
129
|
-
* @description Name of a network resource type
|
|
129
|
+
* @description Name of a network resource type.
|
|
130
130
|
*/
|
|
131
131
|
directsocket: 'DirectSocket',
|
|
132
132
|
/**
|
|
133
|
-
* @description Name of a network resource type
|
|
133
|
+
* @description Name of a network resource type.
|
|
134
134
|
*/
|
|
135
135
|
signedexchange: 'SignedExchange',
|
|
136
136
|
/**
|
|
137
|
-
* @description Name of a network resource type
|
|
137
|
+
* @description Name of a network resource type.
|
|
138
138
|
*/
|
|
139
139
|
ping: 'Ping',
|
|
140
140
|
/**
|
|
141
|
-
* @description Name of a network resource type
|
|
141
|
+
* @description Name of a network resource type.
|
|
142
142
|
*/
|
|
143
143
|
cspviolationreport: 'CSPViolationReport',
|
|
144
144
|
/**
|
|
145
|
-
* @description Name of a network initiator type
|
|
145
|
+
* @description Name of a network initiator type.
|
|
146
146
|
*/
|
|
147
147
|
preflight: 'Preflight',
|
|
148
148
|
/**
|
|
149
|
-
* @description Name of a network initiator type for FedCM requests
|
|
149
|
+
* @description Name of a network initiator type for FedCM requests.
|
|
150
150
|
*/
|
|
151
151
|
fedcm: 'FedCM',
|
|
152
152
|
} as const;
|
|
@@ -7,55 +7,55 @@ import type * as Platform from '../platform/platform.js';
|
|
|
7
7
|
|
|
8
8
|
const UIStrings = {
|
|
9
9
|
/**
|
|
10
|
-
* @description The UI destination when right
|
|
10
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
11
11
|
*/
|
|
12
12
|
elementsPanel: 'Elements panel',
|
|
13
13
|
/**
|
|
14
|
-
* @description The UI destination when right
|
|
14
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
15
15
|
*/
|
|
16
|
-
stylesSidebar: '
|
|
16
|
+
stylesSidebar: 'Styles sidebar',
|
|
17
17
|
/**
|
|
18
|
-
* @description The UI destination when right
|
|
18
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
19
19
|
*/
|
|
20
20
|
changesDrawer: 'Changes drawer',
|
|
21
21
|
/**
|
|
22
|
-
* @description The UI destination when right
|
|
22
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
23
23
|
*/
|
|
24
24
|
issuesView: 'Issues view',
|
|
25
25
|
/**
|
|
26
|
-
* @description The UI destination when right
|
|
26
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
27
27
|
*/
|
|
28
28
|
networkPanel: 'Network panel',
|
|
29
29
|
/**
|
|
30
|
-
* @description The UI destination when right
|
|
30
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
31
31
|
*/
|
|
32
32
|
requestConditionsDrawer: 'Request conditions drawer',
|
|
33
33
|
/**
|
|
34
|
-
* @description The UI destination when right
|
|
34
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
35
35
|
*/
|
|
36
36
|
applicationPanel: 'Application panel',
|
|
37
37
|
/**
|
|
38
|
-
* @description The UI destination when right
|
|
38
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
39
39
|
*/
|
|
40
40
|
sourcesPanel: 'Sources panel',
|
|
41
41
|
/**
|
|
42
|
-
* @description The UI destination when right
|
|
42
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
43
43
|
*/
|
|
44
44
|
timelinePanel: 'Performance panel',
|
|
45
45
|
/**
|
|
46
|
-
* @description The UI destination when right
|
|
46
|
+
* @description The UI destination when right-clicking an item that can be revealed.
|
|
47
47
|
*/
|
|
48
48
|
memoryInspectorPanel: 'Memory inspector panel',
|
|
49
49
|
/**
|
|
50
|
-
* @description The UI destination when revealing loaded resources through the Developer
|
|
50
|
+
* @description The UI destination when revealing loaded resources through the Developer resources panel.
|
|
51
51
|
*/
|
|
52
|
-
developerResourcesPanel: 'Developer
|
|
52
|
+
developerResourcesPanel: 'Developer resources panel',
|
|
53
53
|
/**
|
|
54
|
-
* @description The UI destination when revealing loaded resources through the Animations panel
|
|
54
|
+
* @description The UI destination when revealing loaded resources through the Animations panel.
|
|
55
55
|
*/
|
|
56
56
|
animationsPanel: 'Animations panel',
|
|
57
57
|
/**
|
|
58
|
-
* @description The UI destination when revealing an item in the Lighthouse panel
|
|
58
|
+
* @description The UI destination when revealing an item in the Lighthouse panel.
|
|
59
59
|
*/
|
|
60
60
|
lighthousePanel: 'Lighthouse panel',
|
|
61
61
|
} as const;
|
|
@@ -10,76 +10,76 @@ import type {SettingStorageType} from './Settings.js';
|
|
|
10
10
|
|
|
11
11
|
const UIStrings = {
|
|
12
12
|
/**
|
|
13
|
-
* @description Title of the Elements
|
|
13
|
+
* @description Title of the Elements panel.
|
|
14
14
|
*/
|
|
15
15
|
elements: 'Elements',
|
|
16
16
|
/**
|
|
17
|
-
* @description Text for DevTools AI
|
|
17
|
+
* @description Text for DevTools AI.
|
|
18
18
|
*/
|
|
19
19
|
ai: 'AI',
|
|
20
20
|
/**
|
|
21
|
-
* @description Text for DevTools appearance
|
|
21
|
+
* @description Text for DevTools appearance.
|
|
22
22
|
*/
|
|
23
23
|
appearance: 'Appearance',
|
|
24
24
|
/**
|
|
25
|
-
* @description
|
|
25
|
+
* @description Title of the Sources panel.
|
|
26
26
|
*/
|
|
27
27
|
sources: 'Sources',
|
|
28
28
|
/**
|
|
29
|
-
* @description Title of the Network
|
|
29
|
+
* @description Title of the Network panel.
|
|
30
30
|
*/
|
|
31
31
|
network: 'Network',
|
|
32
32
|
/**
|
|
33
|
-
* @description
|
|
33
|
+
* @description Title of the Performance panel.
|
|
34
34
|
*/
|
|
35
35
|
performance: 'Performance',
|
|
36
36
|
/**
|
|
37
|
-
* @description Title of the Console
|
|
37
|
+
* @description Title of the Console panel.
|
|
38
38
|
*/
|
|
39
39
|
console: 'Console',
|
|
40
40
|
/**
|
|
41
|
-
* @description
|
|
41
|
+
* @description Title of the Persistence setting category.
|
|
42
42
|
*/
|
|
43
43
|
persistence: 'Persistence',
|
|
44
44
|
/**
|
|
45
|
-
* @description
|
|
45
|
+
* @description Title of the Debugger setting category.
|
|
46
46
|
*/
|
|
47
47
|
debugger: 'Debugger',
|
|
48
48
|
/**
|
|
49
|
-
* @description
|
|
49
|
+
* @description Title of the Global setting category for shortcuts and settings available throughout DevTools.
|
|
50
50
|
*/
|
|
51
51
|
global: 'Global',
|
|
52
52
|
/**
|
|
53
|
-
* @description Title of the Rendering tool
|
|
53
|
+
* @description Title of the Rendering tool.
|
|
54
54
|
*/
|
|
55
55
|
rendering: 'Rendering',
|
|
56
56
|
/**
|
|
57
|
-
* @description Title of
|
|
57
|
+
* @description Title of the Grid setting category for CSS Grid tooling.
|
|
58
58
|
*/
|
|
59
59
|
grid: 'Grid',
|
|
60
60
|
/**
|
|
61
|
-
* @description
|
|
61
|
+
* @description Title of the Mobile setting category.
|
|
62
62
|
*/
|
|
63
63
|
mobile: 'Mobile',
|
|
64
64
|
/**
|
|
65
|
-
* @description
|
|
65
|
+
* @description Title of the Memory panel setting category.
|
|
66
66
|
*/
|
|
67
67
|
memory: 'Memory',
|
|
68
68
|
/**
|
|
69
|
-
* @description
|
|
69
|
+
* @description Title of the Extension setting category.
|
|
70
70
|
*/
|
|
71
71
|
extension: 'Extension',
|
|
72
72
|
/**
|
|
73
|
-
* @description
|
|
73
|
+
* @description Title of the Adorner setting category.
|
|
74
74
|
*/
|
|
75
75
|
adorner: 'Adorner',
|
|
76
76
|
/**
|
|
77
|
-
* @description Header for the
|
|
78
|
-
* section allows users see their signed
|
|
77
|
+
* @description Header for the Account section in the settings UI. The Account
|
|
78
|
+
* section allows users to see their signed-in account and configure which DevTools data is synced via Chrome Sync.
|
|
79
79
|
*/
|
|
80
80
|
account: 'Account',
|
|
81
81
|
/**
|
|
82
|
-
* @description
|
|
82
|
+
* @description Title of the Privacy setting category.
|
|
83
83
|
*/
|
|
84
84
|
privacy: 'Privacy',
|
|
85
85
|
} as const;
|
|
@@ -715,14 +715,6 @@ export const enum SettingStorageType {
|
|
|
715
715
|
SESSION = 'Session',
|
|
716
716
|
}
|
|
717
717
|
|
|
718
|
-
export function moduleSetting(settingName: string): Setting<unknown> {
|
|
719
|
-
return Settings.instance().moduleSetting(settingName);
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
export function settingForTest(settingName: string): Setting<unknown> {
|
|
723
|
-
return Settings.instance().settingForTest(settingName);
|
|
724
|
-
}
|
|
725
|
-
|
|
726
718
|
export {
|
|
727
719
|
getLocalizedSettingsCategory,
|
|
728
720
|
maybeRemoveSettingExtension,
|