chrome-devtools-frontend 1.0.1646286 → 1.0.1649421

package/SECURITY.md

@@ -18,7 +18,7 @@ Chrome DevTools is a privileged web app running in a sandboxed renderer process,
 * Triggering Chrome memory corruption exploits.
 
 ### Outside Threat Model
-* **Social Engineering:** Convincing developers to paste payloads into the Console or connect to malicious remote debugging ports.
+* **Social Engineering:** Convincing developers to paste payloads into the Console, download and open a compromised file, or connect to malicious remote debugging ports, etc.
 * **Legitimate Data Exposure:** Displaying local user data, cookies, tokens, or auth headers within UI panels.
 * **Local Data Persistence:** Saving user-initiated traces, heaps, profiles, or logs to disk.
 * **Correctness & Availability:** Stale, misleading, or missing UI information (classified as functional bugs).

package/extension-api/ExtensionAPI.d.ts

@@ -178,6 +178,20 @@ export namespace Chrome {
     }
 
     export interface Request {
+      /**
+       * Retrieves the content of the request.
+       *
+       * If a `callback` is provided, it is invoked with the content and encoding
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param callback Optional callback to be invoked with the content and
+       * encoding.
+       * @returns A Promise that resolves to an object containing the content and
+       * encoding if no callback is provided, otherwise void. Rejects with an
+       * error object on failure.
+       */
+      getContent(): Promise<{content: string, encoding: string}>;
       getContent(callback: (content: string, encoding: string) => unknown): void;
     }
 
@@ -185,6 +199,18 @@ export namespace Chrome {
       onNavigated: EventSink<(url: string) => unknown>;
       onRequestFinished: EventSink<(request: Request) => unknown>;
 
+      /**
+       * Retrieves the HAR log that contains all network requests.
+       *
+       * If a `callback` is provided, it is invoked with the HAR log object
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param callback Optional callback to be invoked with the HAR log.
+       * @returns A Promise that resolves to the HAR log if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      getHAR(): Promise<object>;
       getHAR(callback: (harLog: object) => unknown): void;
     }
 

package/front_end/core/common/Debouncer.ts

@@ -5,12 +5,20 @@
 /**
  * Debounce utility function, ensures that the function passed in is only called once the function stops being called and the delay has expired.
  */
-export const debounce = function(func: (...args: any[]) => void, delay: number): (...args: any[]) => void {
+export const debounce = function(
+    func: (...args: any[]) => void,
+    delay: number,
+    ): ((...args: any[]) => void)&{
+  cancel: () => void,
+} {
   let timer: ReturnType<typeof setTimeout>;
   const debounced = (...args: any[]): void => {
     clearTimeout(timer);
     timer = setTimeout(() => func(...args), testDebounceOverride ? 0 : delay);
   };
+  debounced.cancel = () => {
+    clearTimeout(timer);
+  };
   return debounced;
 };
 

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -39,7 +39,8 @@ import {
   ShadowMatcher,
   StringMatcher,
   URLMatcher,
-  VariableMatcher
+  VariableMatcher,
+  VariableNameMatcher
 } from './CSSPropertyParserMatchers.js';
 import {
   CSSAtRule,
@@ -979,6 +980,7 @@ export class CSSMatchedStyles {
   propertyMatchers(style: CSSStyleDeclaration, computedStyles: Map<string, string>|null): Array<Matcher<Match>> {
     return [
       new VariableMatcher(this, style),
+      new VariableNameMatcher(this, style),
       new ColorMatcher(() => computedStyles?.get('color') ?? null),
       new ColorMixMatcher(),
       new ContrastColorMatcher(),

package/front_end/core/sdk/CSSMetadata.ts

@@ -1409,6 +1409,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'superellipse(infinity)',
     ]),
   ],
+  ['outline-style', new Set(['auto'])],
 ]);
 
 // Weight of CSS properties based on their usage from https://www.chromestatus.com/metrics/css/popularity

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -130,6 +130,71 @@ export class VariableMatcher extends matcherBase(VariableMatch) {
   }
 }
 
+export class VariableNameMatch implements Match {
+  constructor(
+      readonly node: CodeMirror.SyntaxNode,
+      readonly text: string,
+      readonly matchedStyles: CSSMatchedStyles,
+      readonly style: CSSStyleDeclaration,
+  ) {
+  }
+
+  resolveVariable(): CSSVariableValue|null {
+    return this.matchedStyles.computeCSSVariable(this.style, this.text);
+  }
+}
+
+// clang-format off
+export class VariableNameMatcher extends matcherBase(VariableNameMatch) {
+  // clang-format on
+  constructor(readonly matchedStyles: CSSMatchedStyles, readonly style: CSSStyleDeclaration) {
+    super();
+  }
+
+  override accepts(): boolean {
+    return true;
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): VariableNameMatch|null {
+    if (node.name !== 'VariableName' && node.name !== 'FeatureName' && node.name !== 'KeywordQuery') {
+      // TODO(b/484268589): The result shouldn't be KeywordQuery, but currently
+      // sometimes Lezer parses it that way. Fix this when Lezer is fixed.
+      return null;
+    }
+    const rawText = matching.ast.text(node);
+    if (!rawText.startsWith('--')) {
+      return null;
+    }
+
+    let cur: CodeMirror.SyntaxNode|null = node.parent;
+    let foundStyleCall: CodeMirror.SyntaxNode|null = null;
+    while (cur) {
+      if (cur.name === 'CallExpression') {
+        return null;
+      }
+      if (cur.name === 'CallQuery') {
+        const callee = cur.getChild('QueryCallee');
+        if (callee && matching.ast.text(callee) === 'style') {
+          foundStyleCall = cur;
+          break;
+        }
+        return null;
+      }
+      cur = cur.parent;
+    }
+
+    if (!foundStyleCall) {
+      return null;
+    }
+
+    // When parsing style(--foo > 10px), Lezer thinks it is a KeywordQuery and
+    // includes the > in the token with --foo. We need to strip it.
+    const text = node.name === 'KeywordQuery' ? rawText.split(/\s|[>!=<:]/)[0] : rawText;
+
+    return new VariableNameMatch(node, text, this.matchedStyles, this.style);
+  }
+}
+
 export class AttributeMatch extends BaseVariableMatch {
   constructor(
       text: string,

package/front_end/generated/InspectorBackendCommands.ts

@@ -291,7 +291,8 @@ inspectorBackend.registerType("CSS.InheritedAnimatedStyleEntry", [{"name": "anim
 inspectorBackend.registerType("CSS.InheritedPseudoElementMatches", [{"name": "pseudoElements", "type": "array", "optional": false, "description": "Matches of pseudo styles from the pseudos of an ancestor node.", "typeRef": "CSS.PseudoElementMatches"}]);
 inspectorBackend.registerType("CSS.RuleMatch", [{"name": "rule", "type": "object", "optional": false, "description": "CSS rule in the match.", "typeRef": "CSS.CSSRule"}, {"name": "matchingSelectors", "type": "array", "optional": false, "description": "Matching selector indices in the rule's selectorList selectors (0-based).", "typeRef": "integer"}]);
 inspectorBackend.registerType("CSS.Value", [{"name": "text", "type": "string", "optional": false, "description": "Value text.", "typeRef": null}, {"name": "range", "type": "object", "optional": true, "description": "Value range in the underlying resource (if available).", "typeRef": "CSS.SourceRange"}, {"name": "specificity", "type": "object", "optional": true, "description": "Specificity of the selector.", "typeRef": "CSS.Specificity"}]);
-inspectorBackend.registerType("CSS.Specificity", [{"name": "a", "type": "number", "optional": false, "description": "The a component, which represents the number of ID selectors.", "typeRef": null}, {"name": "b", "type": "number", "optional": false, "description": "The b component, which represents the number of class selectors, attributes selectors, and pseudo-classes.", "typeRef": null}, {"name": "c", "type": "number", "optional": false, "description": "The c component, which represents the number of type selectors and pseudo-elements.", "typeRef": null}]);
+inspectorBackend.registerType("CSS.SpecificityComponent", [{"name": "text", "type": "string", "optional": false, "description": "The simple selector text that contributes to specificity.", "typeRef": null}, {"name": "a", "type": "number", "optional": false, "description": "The a component contribution.", "typeRef": null}, {"name": "b", "type": "number", "optional": false, "description": "The b component contribution.", "typeRef": null}, {"name": "c", "type": "number", "optional": false, "description": "The c component contribution.", "typeRef": null}]);
+inspectorBackend.registerType("CSS.Specificity", [{"name": "a", "type": "number", "optional": false, "description": "The a component, which represents the number of ID selectors.", "typeRef": null}, {"name": "b", "type": "number", "optional": false, "description": "The b component, which represents the number of class selectors, attributes selectors, and pseudo-classes.", "typeRef": null}, {"name": "c", "type": "number", "optional": false, "description": "The c component, which represents the number of type selectors and pseudo-elements.", "typeRef": null}, {"name": "components", "type": "array", "optional": true, "description": "Per-simple-selector contributions used to explain this specificity.", "typeRef": "CSS.SpecificityComponent"}]);
 inspectorBackend.registerType("CSS.SelectorList", [{"name": "selectors", "type": "array", "optional": false, "description": "Selectors in the list.", "typeRef": "CSS.Value"}, {"name": "text", "type": "string", "optional": false, "description": "Rule selector text.", "typeRef": null}]);
 inspectorBackend.registerType("CSS.CSSStyleSheetHeader", [{"name": "styleSheetId", "type": "string", "optional": false, "description": "The stylesheet identifier.", "typeRef": "DOM.StyleSheetId"}, {"name": "frameId", "type": "string", "optional": false, "description": "Owner frame identifier.", "typeRef": "Page.FrameId"}, {"name": "sourceURL", "type": "string", "optional": false, "description": "Stylesheet resource URL. Empty if this is a constructed stylesheet created using new CSSStyleSheet() (but non-empty if this is a constructed stylesheet imported as a CSS module script).", "typeRef": null}, {"name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with the stylesheet (if any).", "typeRef": null}, {"name": "origin", "type": "string", "optional": false, "description": "Stylesheet origin.", "typeRef": "CSS.StyleSheetOrigin"}, {"name": "title", "type": "string", "optional": false, "description": "Stylesheet title.", "typeRef": null}, {"name": "ownerNode", "type": "number", "optional": true, "description": "The backend id for the owner node of the stylesheet.", "typeRef": "DOM.BackendNodeId"}, {"name": "disabled", "type": "boolean", "optional": false, "description": "Denotes whether the stylesheet is disabled.", "typeRef": null}, {"name": "hasSourceURL", "type": "boolean", "optional": true, "description": "Whether the sourceURL field value comes from the sourceURL comment.", "typeRef": null}, {"name": "isInline", "type": "boolean", "optional": false, "description": "Whether this stylesheet is created for STYLE tag by parser. This flag is not set for document.written STYLE tags.", "typeRef": null}, {"name": "isMutable", "type": "boolean", "optional": false, "description": "Whether this stylesheet is mutable. Inline stylesheets become mutable after they have been modified via CSSOM API. `<link>` element's stylesheets become mutable only if DevTools modifies them. Constructed stylesheets (new CSSStyleSheet()) are mutable immediately after creation.", "typeRef": null}, {"name": "isConstructed", "type": "boolean", "optional": false, "description": "True if this stylesheet is created through new CSSStyleSheet() or imported as a CSS module script.", "typeRef": null}, {"name": "startLine", "type": "number", "optional": false, "description": "Line offset of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "startColumn", "type": "number", "optional": false, "description": "Column offset of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "length", "type": "number", "optional": false, "description": "Size of the content (in characters).", "typeRef": null}, {"name": "endLine", "type": "number", "optional": false, "description": "Line offset of the end of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "endColumn", "type": "number", "optional": false, "description": "Column offset of the end of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "loadingFailed", "type": "boolean", "optional": true, "description": "If the style sheet was loaded from a network resource, this indicates when the resource failed to load", "typeRef": null}]);
 inspectorBackend.registerType("CSS.CSSRule", [{"name": "styleSheetId", "type": "string", "optional": true, "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.", "typeRef": "DOM.StyleSheetId"}, {"name": "selectorList", "type": "object", "optional": false, "description": "Rule selector data.", "typeRef": "CSS.SelectorList"}, {"name": "nestingSelectors", "type": "array", "optional": true, "description": "Array of selectors from ancestor style rules, sorted by distance from the current rule.", "typeRef": "string"}, {"name": "origin", "type": "string", "optional": false, "description": "Parent stylesheet's origin.", "typeRef": "CSS.StyleSheetOrigin"}, {"name": "style", "type": "object", "optional": false, "description": "Associated style declaration.", "typeRef": "CSS.CSSStyle"}, {"name": "originTreeScopeNodeId", "type": "number", "optional": true, "description": "The BackendNodeId of the DOM node that constitutes the origin tree scope of this rule.", "typeRef": "DOM.BackendNodeId"}, {"name": "media", "type": "array", "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSMedia"}, {"name": "containerQueries", "type": "array", "optional": true, "description": "Container query list array (for rules involving container queries). The array enumerates container queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSContainerQuery"}, {"name": "supports", "type": "array", "optional": true, "description": "@supports CSS at-rule array. The array enumerates @supports at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSSupports"}, {"name": "layers", "type": "array", "optional": true, "description": "Cascade layer array. Contains the layer hierarchy that this rule belongs to starting with the innermost layer and going outwards.", "typeRef": "CSS.CSSLayer"}, {"name": "scopes", "type": "array", "optional": true, "description": "@scope CSS at-rule array. The array enumerates @scope at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSScope"}, {"name": "ruleTypes", "type": "array", "optional": true, "description": "The array keeps the types of ancestor CSSRules from the innermost going outwards.", "typeRef": "CSS.CSSRuleType"}, {"name": "startingStyles", "type": "array", "optional": true, "description": "@starting-style CSS at-rule array. The array enumerates @starting-style at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSStartingStyle"}, {"name": "navigations", "type": "array", "optional": true, "description": "@navigation CSS at-rule array. The array enumerates @navigation at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSNavigation"}]);