chrome-devtools-frontend 1.0.961109 → 1.0.963415

package/.eslintignore

@@ -5,13 +5,14 @@
 // clang-format check also ignores that file
 front_end/.eslintrc.js
 front_end/diff/diff_match_patch.js
+front_end/generated/protocol.ts
 front_end/javascript_metadata/NativeFunctions.js
 front_end/third_party/
+node_modules
+scripts/migration/**/*.js
+scripts/protocol_typescript/*.js
+test/**/fixtures/
 test/e2e/**/*.js
 test/shared/**/*.js
-test/**/fixtures/
-scripts/protocol_typescript/*.js
-scripts/migration/**/*.js
-node_modules
 
 *.d.ts

package/AUTHORS

@@ -39,6 +39,7 @@ Luke Swiderski <luke.swiderski@gmail.com>
 Marijn Haverbeke <marijnh@gmail.com>
 Michael Brüning <michael.bruning@qt.io>
 Michael Rienstra <mrienstra@gmail.com>
+Paul Fisher <paul@pfish.zone>
 Per-Olov Jernberg <possan@possan.se>
 PhistucK <phistuck@gmail.com>
 Pradhuman Singh Baid <pradhumansinghbaid@gmail.com>

package/config/gni/devtools_grd_files.gni

@@ -308,7 +308,6 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/heavyAd.md",
   "front_end/models/issues_manager/descriptions/mixedContent.md",
   "front_end/models/issues_manager/descriptions/sharedArrayBuffer.md",
-  "front_end/models/issues_manager/descriptions/wasmCrossOriginModuleSharing.md",
   "front_end/models/issues_manager/issues_manager.js",
   "front_end/models/javascript_metadata/javascript_metadata.js",
   "front_end/models/logs/logs-meta.js",
@@ -660,6 +659,7 @@ grd_files_debug_sources = [
   "front_end/generated/ARIAProperties.js",
   "front_end/generated/InspectorBackendCommands.js",
   "front_end/generated/SupportedCSSProperties.js",
+  "front_end/generated/protocol.js",
   "front_end/legacy_test_runner/test_runner/TestRunner.js",
   "front_end/models/bindings/BreakpointManager.js",
   "front_end/models/bindings/CSSWorkspaceBinding.js",
@@ -718,7 +718,6 @@ grd_files_debug_sources = [
   "front_end/models/issues_manager/SharedArrayBufferIssue.js",
   "front_end/models/issues_manager/SourceFrameIssuesManager.js",
   "front_end/models/issues_manager/TrustedWebActivityIssue.js",
-  "front_end/models/issues_manager/WasmCrossOriginModuleSharingIssue.js",
   "front_end/models/javascript_metadata/JavaScriptMetadata.js",
   "front_end/models/javascript_metadata/NativeFunctions.js",
   "front_end/models/logs/LogManager.js",
@@ -737,7 +736,6 @@ grd_files_debug_sources = [
   "front_end/models/persistence/WorkspaceSettingsTab.js",
   "front_end/models/persistence/editFileSystemView.css.js",
   "front_end/models/persistence/workspaceSettingsTab.css.js",
-  "front_end/models/text_utils/CodeMirrorUtils.js",
   "front_end/models/text_utils/ContentProvider.js",
   "front_end/models/text_utils/StaticContentProvider.js",
   "front_end/models/text_utils/Text.js",
@@ -992,7 +990,6 @@ grd_files_debug_sources = [
   "front_end/panels/issues/IssueRevealer.js",
   "front_end/panels/issues/IssueView.js",
   "front_end/panels/issues/IssuesPane.js",
-  "front_end/panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.js",
   "front_end/panels/issues/components/HideIssuesMenu.js",
   "front_end/panels/issues/components/hideIssuesMenu.css.js",
   "front_end/panels/issues/cspViolationsListView.css.js",

package/front_end/core/common/ParsedURL.ts

@@ -168,16 +168,17 @@ export class ParsedURL {
   }
 
   static rawPathToUrlString(fileSystemPath: Platform.DevToolsPath.RawPathString): Platform.DevToolsPath.UrlString {
-    let rawPath: string = fileSystemPath;
-    rawPath = rawPath.replace(/\\/g, '/');
-    if (!rawPath.startsWith('file://')) {
-      if (rawPath.startsWith('/')) {
-        rawPath = 'file://' + rawPath;
+    let preEncodedPath: string = ParsedURL.preEncodeSpecialCharactersInPath(
+        fileSystemPath.replace(/\\/g, '/') as Platform.DevToolsPath.RawPathString);
+    preEncodedPath = preEncodedPath.replace(/\\/g, '/');
+    if (!preEncodedPath.startsWith('file://')) {
+      if (preEncodedPath.startsWith('/')) {
+        preEncodedPath = 'file://' + preEncodedPath;
       } else {
-        rawPath = 'file:///' + rawPath;
+        preEncodedPath = 'file:///' + preEncodedPath;
       }
     }
-    return rawPath as Platform.DevToolsPath.UrlString;
+    return new URL(preEncodedPath).toString() as Platform.DevToolsPath.UrlString;
   }
 
   static relativePathToUrlString(relativePath: string, baseURL: Platform.DevToolsPath.UrlString):
@@ -187,13 +188,14 @@ export class ParsedURL {
     return new URL(preEncodedPath, baseURL).toString() as Platform.DevToolsPath.UrlString;
   }
 
-  static capFilePrefix(fileURL: Platform.DevToolsPath.UrlString, isWindows?: boolean):
+  static urlToRawPathString(fileURL: Platform.DevToolsPath.UrlString, isWindows?: boolean):
       Platform.DevToolsPath.RawPathString {
     console.assert(fileURL.startsWith('file://'), 'This must be a file URL.');
+    const decodedFileURL = decodeURIComponent(fileURL);
     if (isWindows) {
-      return fileURL.substr('file:///'.length).replace(/\//g, '\\') as Platform.DevToolsPath.RawPathString;
+      return decodedFileURL.substr('file:///'.length).replace(/\//g, '\\') as Platform.DevToolsPath.RawPathString;
     }
-    return fileURL.substr('file://'.length) as Platform.DevToolsPath.RawPathString;
+    return decodedFileURL.substr('file://'.length) as Platform.DevToolsPath.RawPathString;
   }
 
   static urlWithoutHash(url: string): string {

package/front_end/core/host/UserMetrics.ts

@@ -584,7 +584,8 @@ export enum DevtoolsExperiments {
   'cssTypeComponentLength' = 52,
   'preciseChanges' = 53,
   'bfcacheDisplayTree' = 54,
-  'MaxValue' = 55,
+  'stylesPaneCSSChanges' = 55,
+  'MaxValue' = 56,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/core/i18n/locales/en-US.json

@@ -1394,9 +1394,6 @@
   "models/issues_manager/TrustedWebActivityIssue.ts | changesToQualityCriteriaForPwas": {
     "message": "Changes to quality criteria for PWAs using Trusted Web Activity"
   },
-  "models/issues_manager/WasmCrossOriginModuleSharingIssue.ts | linkTitle": {
-    "message": "Restricting Wasm module sharing to same-origin"
-  },
   "models/logs/logs-meta.ts | clear": {
     "message": "clear"
   },
@@ -2897,6 +2894,9 @@
   "panels/application/components/FrameDetailsView.ts | parentIsAdExplanation": {
     "message": "This frame is considered an ad frame because its parent frame is an ad frame."
   },
+  "panels/application/components/FrameDetailsView.ts | refresh": {
+    "message": "Refresh"
+  },
   "panels/application/components/FrameDetailsView.ts | reportingTo": {
     "message": "reporting to"
   },
@@ -2990,6 +2990,9 @@
   "panels/application/components/PermissionsPolicySection.ts | clickToShowIframe": {
     "message": "Click to reveal the top-most iframe which does not allow this feature in the elements panel."
   },
+  "panels/application/components/PermissionsPolicySection.ts | disabledByFencedFrame": {
+    "message": "disabled inside a fencedframe"
+  },
   "panels/application/components/PermissionsPolicySection.ts | disabledByHeader": {
     "message": "disabled by \"Permissions-Policy\" header"
   },
@@ -5495,27 +5498,6 @@
   "panels/issues/IssueView.ts | warned": {
     "message": "Warned"
   },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | blocked": {
-    "message": "blocked"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | nModuleTransfers": {
-    "message": "{n, plural, =1 {# module} other {# modules}}"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | sourceOrigin": {
-    "message": "Source Origin"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | status": {
-    "message": "Status"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | targetOrigin": {
-    "message": "Target Origin"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | warned": {
-    "message": "warning"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | wasmModuleUrl": {
-    "message": "Wasm Module URL"
-  },
   "panels/js_profiler/js_profiler-meta.ts | profiler": {
     "message": "Profiler"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -1394,9 +1394,6 @@
   "models/issues_manager/TrustedWebActivityIssue.ts | changesToQualityCriteriaForPwas": {
     "message": "Ĉh́âńĝéŝ t́ô q́ûál̂ít̂ý ĉŕît́êŕîá f̂ór̂ ṔŴÁŝ úŝín̂ǵ T̂ŕûśt̂éd̂ Ẃêb́ Âćt̂ív̂ít̂ý"
   },
-  "models/issues_manager/WasmCrossOriginModuleSharingIssue.ts | linkTitle": {
-    "message": "R̂éŝt́r̂íĉt́îńĝ Ẃâśm̂ ḿôd́ûĺê śĥár̂ín̂ǵ t̂ó ŝám̂é-ôŕîǵîń"
-  },
   "models/logs/logs-meta.ts | clear": {
     "message": "ĉĺêár̂"
   },
@@ -2897,6 +2894,9 @@
   "panels/application/components/FrameDetailsView.ts | parentIsAdExplanation": {
     "message": "T̂h́îś f̂ŕâḿê íŝ ćôńŝíd̂ér̂éd̂ án̂ ád̂ f́r̂ám̂é b̂éĉáûśê ít̂ś p̂ár̂én̂t́ f̂ŕâḿê íŝ án̂ ád̂ f́r̂ám̂é."
   },
+  "panels/application/components/FrameDetailsView.ts | refresh": {
+    "message": "R̂éf̂ŕêśĥ"
+  },
   "panels/application/components/FrameDetailsView.ts | reportingTo": {
     "message": "r̂ép̂ór̂t́îńĝ t́ô"
   },
@@ -2990,6 +2990,9 @@
   "panels/application/components/PermissionsPolicySection.ts | clickToShowIframe": {
     "message": "Ĉĺîćk̂ t́ô ŕêv́êál̂ t́ĥé t̂óp̂-ḿôśt̂ íf̂ŕâḿê ẃĥíĉh́ d̂óêś n̂ót̂ ál̂ĺôẃ t̂h́îś f̂éât́ûŕê ín̂ t́ĥé êĺêḿêńt̂ś p̂án̂él̂."
   },
+  "panels/application/components/PermissionsPolicySection.ts | disabledByFencedFrame": {
+    "message": "d̂íŝáb̂ĺêd́ îńŝíd̂é â fencedframe"
+  },
   "panels/application/components/PermissionsPolicySection.ts | disabledByHeader": {
     "message": "d̂íŝáb̂ĺêd́ b̂ý \"Permissions-Policy\" ĥéâd́êŕ"
   },
@@ -5495,27 +5498,6 @@
   "panels/issues/IssueView.ts | warned": {
     "message": "Ŵár̂ńêd́"
   },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | blocked": {
-    "message": "b̂ĺôćk̂éd̂"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | nModuleTransfers": {
-    "message": "{n, plural, =1 {# m̂ód̂úl̂é} other {# m̂ód̂úl̂éŝ}}"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | sourceOrigin": {
-    "message": "Ŝóûŕĉé Ôŕîǵîń"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | status": {
-    "message": "Ŝt́ât́ûś"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | targetOrigin": {
-    "message": "T̂ár̂ǵêt́ Ôŕîǵîń"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | warned": {
-    "message": "ŵár̂ńîńĝ"
-  },
-  "panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.ts | wasmModuleUrl": {
-    "message": "Ŵáŝḿ M̂ód̂úl̂é ÛŔL̂"
-  },
   "panels/js_profiler/js_profiler-meta.ts | profiler": {
     "message": "P̂ŕôf́îĺêŕ"
   },

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -30,7 +30,7 @@
 
 import {NodeURL} from './NodeURL.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
-import * as Protocol from '../../generated/protocol.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export const DevToolsStubErrorCode = -32015;
 // TODO(dgozman): we are not reporting generic errors in tests, but we should
@@ -147,14 +147,14 @@ export class InspectorBackend {
 
   registerEnum(type: QualifiedName, values: Object): void {
     const [domain, name] = splitQualifiedName(type);
-    // @ts-ignore Protocol global namespace pollution
-    if (!Protocol[domain]) {
-      // @ts-ignore Protocol global namespace pollution
-      Protocol[domain] = {};
+    // @ts-ignore globalThis global namespace pollution
+    if (!globalThis.Protocol[domain]) {
+      // @ts-ignore globalThis global namespace pollution
+      globalThis.Protocol[domain] = {};
     }
 
-    // @ts-ignore Protocol global namespace pollution
-    Protocol[domain][name] = values;
+    // @ts-ignore globalThis global namespace pollution
+    globalThis.Protocol[domain][name] = values;
     this.#initialized = true;
   }
 

package/front_end/core/root/Runtime.ts

@@ -272,6 +272,8 @@ export enum ExperimentName {
   WEBAUTHN_PANE = 'webauthnPane',
   SYNC_SETTINGS = 'syncSettings',
   FULL_ACCESSIBILITY_TREE = 'fullAccessibilityTree',
+  PRECISE_CHANGES = 'preciseChanges',
+  STYLES_PANE_CSS_CHANGES = 'stylesPaneCSSChanges',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/CSSProperty.ts

@@ -3,13 +3,10 @@
 // found in the LICENSE file.
 
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as Common from '../common/common.js';
+import type * as Common from '../common/common.js';
 import * as HostModule from '../host/host.js';
-import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import {cssMetadata, GridAreaRowRegex} from './CSSMetadata.js';
 import type {Edit} from './CSSModel.js';
 import type {CSSStyleDeclaration} from './CSSStyleDeclaration.js';
 
@@ -163,113 +160,17 @@ export class CSSProperty {
     }
 
     const range = this.range.relativeTo(this.ownerStyle.range.startLine, this.ownerStyle.range.startColumn);
-    const indentation = this.ownerStyle.cssText ?
-        this.detectIndentation(this.ownerStyle.cssText) :
-        Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
-    const endIndentation = this.ownerStyle.cssText ? indentation.substring(0, this.ownerStyle.range.endColumn) : '';
     const text = new TextUtils.Text.Text(this.ownerStyle.cssText || '');
-    const newStyleText = text.replaceRange(range, Platform.StringUtilities.sprintf(';%s;', propertyText));
-    const tokenizerFactory = TextUtils.CodeMirrorUtils.TokenizerFactory.instance();
-    const styleText = CSSProperty.formatStyle(newStyleText, indentation, endIndentation, tokenizerFactory);
-    return this.ownerStyle.setText(styleText, majorChange);
-  }
-
-  static formatStyle(
-      styleText: string, indentation: string, endIndentation: string,
-      tokenizerFactory: TextUtils.TextUtils.TokenizerFactory): string {
-    const doubleIndent = indentation.substring(endIndentation.length) + indentation;
-    if (indentation) {
-      indentation = '\n' + indentation;
-    }
-    let result = '';
-    let propertyName = '';
-    let propertyText = '';
-    let insideProperty = false;
-    let needsSemi = false;
-    const tokenize = tokenizerFactory.createTokenizer('text/css');
-
-    tokenize('*{' + styleText + '}', processToken);
-    if (insideProperty) {
-      result += propertyText;
-    }
-    result = result.substring(2, result.length - 1).trimRight();
-    return result + (indentation ? '\n' + endIndentation : '');
-
-    function processToken(token: string, tokenType: string|null, _column: number, _newColumn: number): void {
-      if (!insideProperty) {
-        const disabledProperty = tokenType && tokenType.includes('comment') && isDisabledProperty(token);
-        const isPropertyStart = tokenType &&
-            (tokenType.includes('string') || tokenType.includes('meta') || tokenType.includes('property') ||
-             tokenType.includes('variable-2'));
-        if (disabledProperty) {
-          result = result.trimRight() + indentation + token;
-        } else if (isPropertyStart) {
-          insideProperty = true;
-          propertyText = token;
-        } else if (token !== ';' || needsSemi) {
-          result += token;
-          if (token.trim() && !(tokenType && tokenType.includes('comment'))) {
-            needsSemi = token !== ';';
-          }
-        }
-        if (token === '{' && !tokenType) {
-          needsSemi = false;
-        }
-        return;
-      }
-
-      if (token === '}' || token === ';') {
-        // While `propertyText` can generally be trimmed, doing so
-        // breaks valid CSS declarations such as `--foo:  ;` which would
-        // then produce invalid CSS of the form `--foo:;`. This
-        // implementation takes special care to restore a single
-        // whitespace token in this edge case. https://crbug.com/1071296
-        const trimmedPropertyText = propertyText.trim();
-        result =
-            result.trimRight() + indentation + trimmedPropertyText + (trimmedPropertyText.endsWith(':') ? ' ' : '');
-        needsSemi = false;
-        insideProperty = false;
-        propertyName = '';
-        if (Root.Runtime.experiments.isEnabled('preciseChanges')) {
-          result += token;
-          return;
-        }
-        // We preserve the legacy behavior to always add semicolon to
-        // declarations regardless of its original text.
-        result += ';';
-        if (token === '}') {
-          result += '}';
-        }
-      } else {
-        if (cssMetadata().isGridAreaDefiningProperty(propertyName)) {
-          const rowResult = GridAreaRowRegex.exec(token);
-          if (rowResult && rowResult.index === 0 && !propertyText.trimRight().endsWith(']')) {
-            propertyText = propertyText.trimRight() + '\n' + doubleIndent;
-          }
-        }
-        if (!propertyName && token === ':') {
-          propertyName = propertyText;
-        }
-        propertyText += token;
-      }
+    const textBeforeInsertion =
+        text.extract(new TextUtils.TextRange.TextRange(0, 0, range.startLine, range.startColumn));
+    // If we are appending after the last property and that property doesn't have a semicolon at the end
+    // (which is only legal in the last position), then add the semicolon in front of the new text to avoid
+    // CSS parsing errors. However, we shouldn't prepend semicolons on the first line or after a comment.
+    if (textBeforeInsertion.trim().length && !/[;{\/]\s*$/.test(textBeforeInsertion)) {
+      propertyText = ';' + propertyText;
     }
-
-    function isDisabledProperty(text: string): boolean {
-      const colon = text.indexOf(':');
-      if (colon === -1) {
-        return false;
-      }
-      const propertyName = text.substring(2, colon).trim();
-      return cssMetadata().isCSSPropertyName(propertyName);
-    }
-  }
-
-  private detectIndentation(text: string): string {
-    const lines = text.split('\n');
-    if (lines.length < 2) {
-      return '';
-    }
-    return TextUtils.TextUtils.Utils.lineIndent(lines[1]);
+    const newStyleText = text.replaceRange(range, propertyText);
+    return this.ownerStyle.setText(newStyleText, majorChange);
   }
 
   setValue(newValue: string, majorChange: boolean, overwrite: boolean, userCallback?: ((arg0: boolean) => void)): void {
@@ -288,7 +189,18 @@ export class CSSProperty {
       return Promise.resolve(true);
     }
     const propertyText = this.text.trim();
-    const text = disabled ? '/* ' + propertyText + ' */' : this.text.substring(2, propertyText.length - 2).trim();
+    // Ensure that if we try to enable/disable a property that has no semicolon (which is only legal
+    // in the last position of a css rule), we add it. This ensures that if we then later try
+    // to re-enable/-disable the rule, we end up with legal syntax (if the user adds more properties
+    // after the disabled rule).
+    const appendSemicolonIfMissing = (propertyText: string): string =>
+        propertyText + (propertyText.endsWith(';') ? '' : ';');
+    let text: string;
+    if (disabled) {
+      text = '/* ' + appendSemicolonIfMissing(propertyText) + ' */';
+    } else {
+      text = appendSemicolonIfMissing(this.text.substring(2, propertyText.length - 2).trim());
+    }
     return this.setText(text, true, true);
   }
 

package/front_end/core/sdk/DebuggerModel.ts

@@ -425,7 +425,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     if (this.target().type() === Type.Node && url.startsWith('file://')) {
       // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       const platformPath =
-          Common.ParsedURL.ParsedURL.capFilePrefix(url as Platform.DevToolsPath.UrlString, Host.Platform.isWin());
+          Common.ParsedURL.ParsedURL.urlToRawPathString(url as Platform.DevToolsPath.UrlString, Host.Platform.isWin());
       urlRegex =
           `${Platform.StringUtilities.escapeForRegExp(platformPath)}|${Platform.StringUtilities.escapeForRegExp(url)}`;
     }

package/front_end/entrypoints/main/MainImpl.ts

@@ -365,13 +365,18 @@ export class MainImpl {
         'https://developer.chrome.com/blog/new-in-devtools-96/#length');
 
     // Display precise changes in the Changes tab.
-    Root.Runtime.experiments.register('preciseChanges', 'Display more precise changes in the Changes tab');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.PRECISE_CHANGES, 'Display more precise changes in the Changes tab');
+
+    // Integrate CSS changes in the Styles pane.
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES, 'Sync CSS changes in the Styles pane');
 
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',
       'cssTypeComponentLength',
-      'preciseChanges',
+      Root.Runtime.ExperimentName.PRECISE_CHANGES,
       'reportingApiDebugging',
       Root.Runtime.ExperimentName.SYNC_SETTINGS,
     ]);

package/front_end/generated/protocol-tsconfig.json

@@ -3,8 +3,8 @@
     "composite": true
   },
   "files": [
-    "protocol.d.ts",
+    "protocol.ts",
     "protocol-mapping.d.ts",
     "protocol-proxy-api.d.ts"
   ]
-}
+}