chrome-devtools-frontend 1.0.1019017 → 1.0.1020357

package/config/gni/devtools_grd_files.gni

@@ -605,6 +605,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSPropertyParser.js",
   "front_end/core/sdk/CSSQuery.js",
   "front_end/core/sdk/CSSRule.js",
+  "front_end/core/sdk/CSSScope.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
   "front_end/core/sdk/CSSSupports.js",
@@ -1461,6 +1462,7 @@ grd_files_debug_sources = [
   "front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.js",
   "front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.js",
   "front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.js",
+  "front_end/ui/components/linear_memory_inspector/LinearMemoryViewerUtils.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplayUtils.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterSettings.js",

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

@@ -903,7 +903,7 @@
     "message": "Show Rendering"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
-    "message": "Toggle forces CSS prefers-color-scheme color"
+    "message": "Toggle CSS media feature prefers-color-scheme"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "vision deficiency"
@@ -7511,9 +7511,6 @@
   "panels/network/RequestHeadersView.ts | provisionalHeadersAreShownS": {
     "message": "Provisional headers are shown. Disable cache to see full headers."
   },
-  "panels/network/RequestHeadersView.ts | recordedAttribution": {
-    "message": "Recorded attribution with trigger-data: {PH1}"
-  },
   "panels/network/RequestHeadersView.ts | referrerPolicy": {
     "message": "Referrer Policy"
   },

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

@@ -903,7 +903,7 @@
     "message": "Ŝh́ôẃ R̂én̂d́êŕîńĝ"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
-    "message": "T̂óĝǵl̂é f̂ór̂ćêś ĈŚŜ ṕr̂éf̂ér̂ś-ĉól̂ór̂-śĉh́êḿê ćôĺôŕ"
+    "message": "T̂óĝǵl̂é ĈŚŜ ḿêd́îá f̂éât́ûŕê ṕr̂éf̂ér̂ś-ĉól̂ór̂-śĉh́êḿê"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "v̂íŝíôń d̂éf̂íĉíêńĉý"
@@ -7511,9 +7511,6 @@
   "panels/network/RequestHeadersView.ts | provisionalHeadersAreShownS": {
     "message": "P̂ŕôv́îśîón̂ál̂ h́êád̂ér̂ś âŕê śĥóŵń. D̂íŝáb̂ĺê ćâćĥé t̂ó ŝéê f́ûĺl̂ h́êád̂ér̂ś."
   },
-  "panels/network/RequestHeadersView.ts | recordedAttribution": {
-    "message": "R̂éĉór̂d́êd́ ât́t̂ŕîb́ût́îón̂ ẃît́ĥ trigger-data: {PH1}"
-  },
   "panels/network/RequestHeadersView.ts | referrerPolicy": {
     "message": "R̂éf̂ér̂ŕêŕ P̂ól̂íĉý"
   },

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -491,7 +491,7 @@ export class CSSMatchedStyles {
       return true;
     }
     const parentRule = style.parentRule as CSSStyleRule;
-    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports];
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports, ...parentRule.scopes];
     for (const query of queries) {
       if (!query.active()) {
         return false;

package/front_end/core/sdk/CSSModel.ts

@@ -461,6 +461,28 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  async setScopeText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newScopeText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {scope} = await this.agent.invoke_setScopeText({styleSheetId, range, text: newScopeText});
+
+      if (!scope) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newScopeText, scope);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
   async addRule(styleSheetId: Protocol.CSS.StyleSheetId, ruleText: string, ruleLocation: TextUtils.TextRange.TextRange):
       Promise<CSSStyleRule|null> {
     try {

package/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,8 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
+type CSSQueryPayload =
+    Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports|Protocol.CSS.CSSScope;
 
 export abstract class CSSQuery {
   text = '';

package/front_end/core/sdk/CSSRule.ts

@@ -9,6 +9,7 @@ import * as Platform from '../platform/platform.js';
 import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSLayer} from './CSSLayer.js';
 import {CSSMedia} from './CSSMedia.js';
+import {CSSScope} from './CSSScope.js';
 import {CSSSupports} from './CSSSupports.js';
 
 import type {CSSModel, Edit} from './CSSModel.js';
@@ -103,6 +104,7 @@ export class CSSStyleRule extends CSSRule {
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
   supports: CSSSupports[];
+  scopes: CSSScope[];
   layers: CSSLayer[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
@@ -113,6 +115,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries = payload.containerQueries ?
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
+    this.scopes = payload.scopes ? CSSScope.parseScopesPayload(cssModel, payload.scopes) : [];
     this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
     this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
     this.wasUsed = wasUsed || false;
@@ -200,6 +203,7 @@ export class CSSStyleRule extends CSSRule {
     }
     this.media.forEach(media => media.rebase(edit));
     this.containerQueries.forEach(cq => cq.rebase(edit));
+    this.scopes.forEach(scope => scope.rebase(edit));
     this.supports.forEach(supports => supports.rebase(edit));
 
     super.rebase(edit);

package/front_end/core/sdk/CSSScope.ts

@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSScope extends CSSQuery {
+  static parseScopesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSScope[]): CSSScope[] {
+    return payload.map(scope => new CSSScope(cssModel, scope));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSScope) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSScope): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

package/front_end/core/sdk/sdk.ts

@@ -33,6 +33,7 @@ import * as CSSProperty from './CSSProperty.js';
 import * as CSSPropertyParser from './CSSPropertyParser.js';
 import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
+import * as CSSScope from './CSSScope.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
 import * as CSSSupports from './CSSSupports.js';
@@ -103,6 +104,7 @@ export {
   CSSPropertyParser,
   CSSQuery,
   CSSRule,
+  CSSScope,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
   CSSSupports,

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -366,13 +366,14 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme');
 
     switch (actionId) {
-      case 'rendering.toggle-prefers-color-scheme':
-        if (emulatedCSSMediaFeaturePrefersColorSchemeSetting.get() === 'light') {
-          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('dark');
-        } else {
-          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('light');
-        }
+      case 'rendering.toggle-prefers-color-scheme': {
+        // Cycle between no emulation, light, dark
+        const options = ['', 'light', 'dark'];
+        const current = options.findIndex(x => x === emulatedCSSMediaFeaturePrefersColorSchemeSetting.get() || '');
+        emulatedCSSMediaFeaturePrefersColorSchemeSetting.set(options[(current + 1) % 3]);
+
         return true;
+      }
     }
     return false;
   }

package/front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -103,7 +103,7 @@ const UIStrings = {
   * @description Title of an action that toggle
   * "forces CSS prefers-color-scheme" color
   */
-  toggleCssPrefersColorSchemeMedia: 'Toggle forces CSS prefers-color-scheme color',
+  toggleCssPrefersColorSchemeMedia: 'Toggle CSS media feature prefers-color-scheme',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/inspector_main-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);

package/front_end/generated/InspectorBackendCommands.js

@@ -615,6 +615,13 @@ export function registerCommands(inspectorBackend) {
         {'name': 'range', 'type': 'object', 'optional': false}, {'name': 'text', 'type': 'string', 'optional': false}
       ],
       ['supports']);
+  inspectorBackend.registerCommand(
+      'CSS.setScopeText',
+      [
+        {'name': 'styleSheetId', 'type': 'string', 'optional': false},
+        {'name': 'range', 'type': 'object', 'optional': false}, {'name': 'text', 'type': 'string', 'optional': false}
+      ],
+      ['scope']);
   inspectorBackend.registerCommand(
       'CSS.setRuleSelector',
       [
@@ -2149,9 +2156,12 @@ export function registerCommands(inspectorBackend) {
     WindowPlacement: 'window-placement',
     XrSpatialTracking: 'xr-spatial-tracking'
   });
-  inspectorBackend.registerEnum(
-      'Page.PermissionsPolicyBlockReason',
-      {Header: 'Header', IframeAttribute: 'IframeAttribute', InFencedFrameTree: 'InFencedFrameTree'});
+  inspectorBackend.registerEnum('Page.PermissionsPolicyBlockReason', {
+    Header: 'Header',
+    IframeAttribute: 'IframeAttribute',
+    InFencedFrameTree: 'InFencedFrameTree',
+    InIsolatedApp: 'InIsolatedApp'
+  });
   inspectorBackend.registerEnum('Page.OriginTrialTokenStatus', {
     Success: 'Success',
     NotSupported: 'NotSupported',

package/front_end/generated/SupportedCSSProperties.js

@@ -333,7 +333,7 @@ export const generatedProperties = [
   {'name': 'contain-intrinsic-width', 'keywords': ['auto', 'none']},
   {'longhands': ['container-name', 'container-type'], 'name': 'container'},
   {'name': 'container-name', 'keywords': ['none']},
-  {'name': 'container-type', 'keywords': ['none', 'inline-size', 'size']},
+  {'name': 'container-type', 'keywords': ['none', 'inline-size', 'size', 'style']},
   {'name': 'content'},
   {'name': 'content-visibility', 'keywords': ['visible', 'auto', 'hidden', 'hidden-matchable']},
   {'name': 'counter-increment', 'keywords': ['none']},
@@ -952,7 +952,7 @@ export const generatedPropertyValues = {
   'contain-intrinsic-height': {'values': ['auto', 'none']},
   'contain-intrinsic-width': {'values': ['auto', 'none']},
   'container-name': {'values': ['none']},
-  'container-type': {'values': ['none', 'inline-size', 'size']},
+  'container-type': {'values': ['none', 'inline-size', 'size', 'style']},
   'content-visibility': {'values': ['visible', 'auto', 'hidden', 'hidden-matchable']},
   'counter-increment': {'values': ['none']},
   'counter-reset': {'values': ['none']},

package/front_end/generated/protocol-mapping.d.ts

@@ -1032,6 +1032,11 @@ export namespace ProtocolMapping {
      */
     'CSS.setSupportsText':
         {paramsType: [Protocol.CSS.SetSupportsTextRequest]; returnType: Protocol.CSS.SetSupportsTextResponse;};
+    /**
+     * Modifies the expression of a scope at-rule.
+     */
+    'CSS.setScopeText':
+        {paramsType: [Protocol.CSS.SetScopeTextRequest]; returnType: Protocol.CSS.SetScopeTextResponse;};
     /**
      * Modifies the rule selector.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -645,6 +645,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_setSupportsText(params: Protocol.CSS.SetSupportsTextRequest): Promise<Protocol.CSS.SetSupportsTextResponse>;
 
+    /**
+     * Modifies the expression of a scope at-rule.
+     */
+    invoke_setScopeText(params: Protocol.CSS.SetScopeTextRequest): Promise<Protocol.CSS.SetScopeTextResponse>;
+
     /**
      * Modifies the rule selector.
      */

package/front_end/generated/protocol.ts

@@ -1985,6 +1985,11 @@ export namespace CSS {
      * with the innermost layer and going outwards.
      */
     layers?: CSSLayer[];
+    /**
+     * @scope CSS at-rule array.
+     * The array enumerates @scope at-rules starting with the innermost one, going outwards.
+     */
+    scopes?: CSSScope[];
   }
 
   /**
@@ -2250,6 +2255,25 @@ export namespace CSS {
     styleSheetId?: StyleSheetId;
   }
 
+  /**
+   * CSS Scope at-rule descriptor.
+   */
+  export interface CSSScope {
+    /**
+     * Scope rule text.
+     */
+    text: string;
+    /**
+     * The associated rule header range in the enclosing stylesheet (if
+     * available).
+     */
+    range?: SourceRange;
+    /**
+     * Identifier of the stylesheet containing this object (if exists).
+     */
+    styleSheetId?: StyleSheetId;
+  }
+
   /**
    * CSS Layer at-rule descriptor.
    */
@@ -2686,6 +2710,19 @@ export namespace CSS {
     supports: CSSSupports;
   }
 
+  export interface SetScopeTextRequest {
+    styleSheetId: StyleSheetId;
+    range: SourceRange;
+    text: string;
+  }
+
+  export interface SetScopeTextResponse extends ProtocolResponseWithError {
+    /**
+     * The resulting CSS Scope rule after modification.
+     */
+    scope: CSSScope;
+  }
+
   export interface SetRuleSelectorRequest {
     styleSheetId: StyleSheetId;
     range: SourceRange;
@@ -10291,6 +10328,7 @@ export namespace Page {
     Header = 'Header',
     IframeAttribute = 'IframeAttribute',
     InFencedFrameTree = 'InFencedFrameTree',
+    InIsolatedApp = 'InIsolatedApp',
   }
 
   export interface PermissionsPolicyBlockLocator {
@@ -13640,6 +13678,11 @@ export namespace Tracing {
      * Controls how the trace buffer stores data.
      */
     recordMode?: TraceConfigRecordMode;
+    /**
+     * Size of the trace buffer in kilobytes. If not specified or zero is passed, a default value
+     * of 200 MB would be used.
+     */
+    traceBufferSizeInKb?: number;
     /**
      * Turns on JavaScript stack sampling.
      */

package/front_end/models/bindings/BreakpointManager.ts

@@ -409,13 +409,18 @@ export type EventTypes = {
   [Events.BreakpointRemoved]: BreakpointLocation,
 };
 
-const enum DebuggerUpdateResult {
+export const enum DebuggerUpdateResult {
   OK = 'OK',
-  ERROR = 'ERROR',
+  ERROR_BREAKPOINT_CLASH = 'ERROR_BREAKPOINT_CLASH',
+  ERROR_BACKEND = 'ERROR_BACKEND',
+
   // PENDING implies that the current update requires another re-run.
   PENDING = 'PENDING',
 }
 
+export type ScheduleUpdateResult =
+    DebuggerUpdateResult.OK|DebuggerUpdateResult.ERROR_BACKEND|DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH;
+
 const enum ResolveLocationResult {
   OK = 'OK',
   ERROR = 'ERROR',
@@ -430,7 +435,7 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   uiSourceCodes: Set<Workspace.UISourceCode.UISourceCode>;
   #conditionInternal!: string;
   #enabledInternal!: boolean;
-  isRemoved!: boolean;
+  isRemoved = false;
   currentState: Breakpoint.State|null;
   readonly #modelBreakpoints: Map<SDK.DebuggerModel.DebuggerModel, ModelBreakpoint>;
 
@@ -629,6 +634,9 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   }
 
   async remove(keepInStorage: boolean): Promise<void> {
+    if (this.getIsRemoved()) {
+      return;
+    }
     this.isRemoved = true;
     const removeFromStorage = !keepInStorage;
 
@@ -676,9 +684,11 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   }
 
   async #updateModel(model: ModelBreakpoint): Promise<void> {
-    const success = await model.scheduleUpdateInDebugger();
-    if (!success) {
-      await this.remove(false);
+    const result = await model.scheduleUpdateInDebugger();
+    if (result === DebuggerUpdateResult.ERROR_BACKEND) {
+      await this.remove(true /* keepInStorage */);
+    } else if (result === DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH) {
+      await this.remove(false /* keepInStorage */);
     }
   }
 }
@@ -722,11 +732,9 @@ export class ModelBreakpoint {
     this.#liveLocations.disposeAll();
   }
 
-  // Returns true, if scheduling ran as expected.
-  // Returns false, if an error occurred.
-  async scheduleUpdateInDebugger(): Promise<boolean> {
+  async scheduleUpdateInDebugger(): Promise<ScheduleUpdateResult> {
     if (!this.#debuggerModel.debuggerEnabled()) {
-      return true;
+      return DebuggerUpdateResult.OK;
     }
 
     const release = await this.#updateMutex.acquire();
@@ -735,7 +743,7 @@ export class ModelBreakpoint {
       result = await this.#updateInDebugger();
     }
     release();
-    return result === DebuggerUpdateResult.OK;
+    return result;
   }
 
   private scriptDiverged(): boolean {
@@ -849,7 +857,7 @@ export class ModelBreakpoint {
     // Something went wrong: we expect to have a non-null state, but have not received any
     // breakpointIds from the back-end.
     if (!breakpointIds.length) {
-      return DebuggerUpdateResult.ERROR;
+      return DebuggerUpdateResult.ERROR_BACKEND;
     }
 
     this.#breakpointIds = breakpointIds;
@@ -859,7 +867,7 @@ export class ModelBreakpoint {
 
     // Breakpoint clash: the resolved location resolves to a different breakpoint, report an error.
     if (resolvedResults.includes(ResolveLocationResult.ERROR)) {
-      return DebuggerUpdateResult.ERROR;
+      return DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH;
     }
     return DebuggerUpdateResult.OK;
   }
@@ -917,7 +925,7 @@ export class ModelBreakpoint {
       Promise<void> {
     const result = await this.addResolvedLocation(location);
     if (result === ResolveLocationResult.ERROR) {
-      await this.#breakpoint.remove(false);
+      await this.#breakpoint.remove(false /* keepInStorage */);
     }
   }
 

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -981,11 +981,6 @@ export const NativeFunctions = [
     signatures: [['?returnValue']],
     receivers: ['HTMLDialogElement']
   },
-  {
-    name: 'close',
-    signatures: [['?options']],
-    receivers: ['TCPSocket','UDPSocket']
-  },
   {
     name: 'close',
     signatures: [['?closeInfo']],
@@ -6780,20 +6775,6 @@ export const NativeFunctions = [
     name: 'FederatedCredential',
     signatures: [['data']]
   },
-  {
-    name: 'login',
-    signatures: [['?request']]
-  },
-  {
-    name: 'revoke',
-    signatures: [['hint']],
-    receivers: ['FederatedCredential']
-  },
-  {
-    name: 'revoke',
-    signatures: [['permission']],
-    receivers: ['Permissions']
-  },
   {
     name: 'logoutRps',
     signatures: [['?logout_requests']]
@@ -7384,6 +7365,10 @@ export const NativeFunctions = [
     name: 'RTCSessionDescription',
     signatures: [['?descriptionInitDict']]
   },
+  {
+    name: 'revoke',
+    signatures: [['permission']]
+  },
   {
     name: 'requestAll',
     signatures: [['permissions']]

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -206,6 +206,8 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true);
 
+    this.contentElement.classList.add('styles-sidebar-computed-style-widget');
+
     this.computedStyleModel = new ComputedStyleModel();
     this.computedStyleModel.addEventListener(Events.ComputedStyleChanged, this.update, this);
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -555,7 +555,9 @@ export class ElementsTreeOutline extends
     // items extend at least to the right edge of the outer <ol> container.
     // In the no-word-wrap mode the outer <ol> may be wider than the tree container
     // (and partially hidden), in which case we are left to use only its right boundary.
-    const x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 18;
+    // We use .clientWidth to account for possible scrollbar, and subtract 6px
+    // for the width of the split widget (see splitWidget.css).
+    const x = scrollContainer.totalOffsetLeft() + scrollContainer.clientWidth - 6;
 
     const y = event.pageY;
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -708,6 +708,7 @@ export class StylePropertiesSection {
   protected createAtRuleLists(rule: SDK.CSSRule.CSSStyleRule): void {
     this.createMediaList(rule.media);
     this.createContainerQueryList(rule.containerQueries);
+    this.createScopesList(rule.scopes);
     this.createSupportsList(rule.supports);
   }
 
@@ -778,6 +779,28 @@ export class StylePropertiesSection {
     }
   }
 
+  protected createScopesList(scopesList: SDK.CSSScope.CSSScope[]): void {
+    for (let i = scopesList.length - 1; i >= 0; --i) {
+      const scope = scopesList[i];
+      if (!scope.text) {
+        continue;
+      }
+
+      let onQueryTextClick;
+      if (scope.styleSheetId) {
+        onQueryTextClick = this.handleQueryRuleClick.bind(this, scope);
+      }
+
+      const scopeElement = new ElementsComponents.CSSQuery.CSSQuery();
+      scopeElement.data = {
+        queryPrefix: '@scope',
+        queryText: scope.text,
+        onQueryTextClick,
+      };
+      this.queryListElement.append(scopeElement);
+    }
+  }
+
   protected createSupportsList(supportsList: SDK.CSSSupports.CSSSupports[]): void {
     for (let i = supportsList.length - 1; i >= 0; --i) {
       const supports = supportsList[i];
@@ -1185,6 +1208,8 @@ export class StylePropertiesSection {
         success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSSupports.CSSSupports) {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSScope.CSSScope) {
+        success = await cssModel.setScopeText(query.styleSheetId, range, newContent);
       } else {
         success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
       }

package/front_end/panels/elements/computedStyleSidebarPane.css

@@ -37,3 +37,7 @@
     border: 1px solid ButtonText;
   }
 }
+
+.styles-sidebar-computed-style-widget {
+  min-height: auto;
+}

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -415,6 +415,7 @@ export class DeviceModeToolbar {
     boundAppendScaleItem('100%', 1);
     boundAppendScaleItem('125%', 1.25);
     boundAppendScaleItem('150%', 1.5);
+    boundAppendScaleItem('200%', 2);
 
     function appendScaleItem(this: DeviceModeToolbar, title: string, value: number): void {
       contextMenu.defaultSection().appendCheckboxItem(

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -302,6 +302,8 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
 
     const reportContainer = this.auditResultsElement.createChild('div', 'lh-vars lh-root lh-devtools');
+    // @ts-ignore Expose LHR on DOM for e2e tests
+    reportContainer._lighthouseResultForTesting = lighthouseResult;
 
     const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document, reportContainer);
     const renderer = new LighthouseReportRenderer(dom) as LighthouseReport.ReportRenderer;

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -143,6 +143,7 @@ export class StartView extends UI.Widget.Widget {
       const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description());
       const row = formElements.createChild('div', 'vbox lighthouse-launcher-row');
       row.appendChild(checkbox.element);
+      checkbox.element.setAttribute('data-lh-category', preset.configID);
       this.checkboxes.push({preset, checkbox});
       if (mode && !preset.supportedModes.includes(mode)) {
         checkbox.setEnabled(false);

package/front_end/panels/network/RequestHeadersView.ts

@@ -195,13 +195,6 @@ const UIStrings = {
   */
   toUseThisResourceFromADifferentOrigin:
       'To use this resource from a different origin, the server may relax the cross-origin resource policy response header:',
-  /**
-   * @description Shown in the network panel for network requests that meet special criteria.
-   * 'Attribution' is a term used by the "Attribution Reporting API" and refers to an event, e.g.
-   * buying an item in an online store after an ad was clicked.
-   * @example {foo} PH1
-   */
-  recordedAttribution: 'Recorded attribution with `trigger-data`: {PH1}',
   /**
   *@description Label for a link from the network panel's headers view to the file in which
   * header overrides are defined in the sources panel.
@@ -322,22 +315,7 @@ export class RequestHeadersView extends UI.Widget.VBox {
   private formatHeaderObject(header: BlockedReasonDetailDescriptor): DocumentFragment {
     const fragment = document.createDocumentFragment();
     if (header.headerNotSet) {
-      fragment.createChild('div', 'header-badge header-badge-error header-badge-text').textContent = 'not-set';
-    }
-    // Highlight successful Attribution Reporting API redirects. If the request was
-    // not canceled, then something went wrong.
-    if (header.name.toLowerCase() === 'location' && this.request.canceled) {
-      const url = new URL(header.value?.toString() || '', this.request.parsedURL.securityOrigin());
-      const triggerData = getTriggerDataFromAttributionRedirect(url);
-      if (triggerData) {
-        fragment.createChild('div', 'header-badge header-badge-success header-badge-text').textContent =
-            'Attribution Reporting API';
-        header.details = {
-          explanation: (): string => i18nString(UIStrings.recordedAttribution, {PH1: triggerData}),
-          examples: [],
-          link: null,
-        };
-      }
+      fragment.createChild('div', 'header-badge header-badge-text').textContent = 'not-set';
     }
     const colon = header.value ? ': ' : '';
     fragment.createChild('div', 'header-name').textContent = header.name + colon;
@@ -817,19 +795,6 @@ export class Category extends UI.TreeOutline.TreeElement {
   }
 }
 
-/**
- * Returns the value for the `trigger-data` search parameter iff the provided
- * url is a valid attribution redirect as specified by the Attribution
- * Reporting API.
- */
-function getTriggerDataFromAttributionRedirect(url: URL): string|null {
-  if (url.pathname === '/.well-known/attribution-reporting/trigger-attribution' &&
-      url.searchParams.has('trigger-data')) {
-    return url.searchParams.get('trigger-data');
-  }
-  return null;
-}
-
 interface BlockedReasonDetailDescriptor {
   name: string;
   value: Object|null;

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -20,23 +20,23 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromMemoryCache: '(from memory cache)',
+  fromDiskCache: '(from disk cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromServiceWorker: '(from `service worker`)',
+  fromMemoryCache: '(from memory cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromSignedexchange: '(from signed-exchange)',
+  fromPrefetchCache: '(from prefetch cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromPrefetchCache: '(from prefetch cache)',
+  fromServiceWorker: '(from `service worker`)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromDiskCache: '(from disk cache)',
+  fromSignedexchange: '(from signed-exchange)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
@@ -52,16 +52,24 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  requestHeaders: 'Request Headers',
+  referrerPolicy: 'Referrer Policy',
   /**
-  *@description The URL of a request
+  *@description Text in Network Log View Columns of the Network panel
   */
-  requestUrl: 'Request URL',
+  remoteAddress: 'Remote Address',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  requestHeaders: 'Request Headers',
   /**
   *@description The HTTP method of a request
   */
   requestMethod: 'Request Method',
   /**
+  *@description The URL of a request
+  */
+  requestUrl: 'Request URL',
+  /**
   *@description A context menu item in the Network Log View Columns of the Network panel
   */
   responseHeaders: 'Response Headers',
@@ -73,14 +81,6 @@ const UIStrings = {
   *@description HTTP response code
   */
   statusCode: 'Status Code',
-  /**
-  *@description Text in Network Log View Columns of the Network panel
-  */
-  remoteAddress: 'Remote Address',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  referrerPolicy: 'Referrer Policy',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/network/requestHeadersTree.css

@@ -112,21 +112,13 @@
 .tree-outline .header-badge {
   display: inline;
   margin-right: 0.75em;
+  background-color: var(--override-error-background-color);
   color: var(--override-error-text-color);
   border-radius: 100vh;
   padding-left: 6px;
   padding-right: 6px;
 }
 
-.tree-outline .header-badge-error {
-  background-color: var(--override-error-background-color);
-}
-
-.tree-outline .header-badge-success {
-  background-color: var(--color-accent-green);
-  text-transform: uppercase;
-}
-
 .tree-outline .header-value {
   display: inline;
   margin-right: 1em;

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts

@@ -27,6 +27,7 @@ import {
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {LinearMemoryViewer} from './LinearMemoryViewer.js';
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
@@ -51,6 +52,7 @@ export interface LinearMemoryInspectorData {
   valueTypes?: Set<ValueType>;
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
   endianness?: Endianness;
+  highlightInfo?: HighlightInfo;
 }
 
 export type Settings = {
@@ -120,6 +122,10 @@ export class LinearMemoryInspector extends HTMLElement {
   #outerMemoryLength = 0;
 
   #address = -1;
+  #highlightInfo: HighlightInfo = {
+    size: 0,
+    startAddress: 0,
+  };
 
   #currentNavigatorMode = Mode.Submitted;
   #currentNavigatorAddressLine = `${this.#address}`;
@@ -143,12 +149,23 @@ export class LinearMemoryInspector extends HTMLElement {
       throw new Error('Memory offset has to be greater or equal to zero.');
     }
 
+    if (data.highlightInfo !== undefined) {
+      if (data.highlightInfo.size < 0) {
+        throw new Error('Object size has to be greater than or equal to zero');
+      }
+      if (data.highlightInfo.startAddress > data.memoryOffset + data.memory.length ||
+          data.highlightInfo.startAddress < 0) {
+        throw new Error('Object start address is out of bounds.');
+      }
+    }
+
     this.#memory = data.memory;
     this.#memoryOffset = data.memoryOffset;
     this.#outerMemoryLength = data.outerMemoryLength;
     this.#valueTypeModes = data.valueTypeModes || this.#valueTypeModes;
     this.#valueTypes = data.valueTypes || this.#valueTypes;
     this.#endianness = data.endianness || this.#endianness;
+    this.#highlightInfo = data.highlightInfo || this.#highlightInfo;
     this.#setAddress(data.address);
     this.#render();
   }
@@ -179,7 +196,12 @@ export class LinearMemoryInspector extends HTMLElement {
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
         <${LinearMemoryViewer.litTagName}
-          .data=${{memory: this.#memory.slice(start - this.#memoryOffset, end - this.#memoryOffset), address: this.#address, memoryOffset: start, focus: this.#currentNavigatorMode === Mode.Submitted} as LinearMemoryViewerData}
+          .data=${{
+            memory: this.#memory.slice(start - this.#memoryOffset,
+            end - this.#memoryOffset),
+            address: this.#address, memoryOffset: start,
+            focus: this.#currentNavigatorMode === Mode.Submitted,
+            highlightInfo: this.#highlightInfo } as LinearMemoryViewerData}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </${LinearMemoryViewer.litTagName}>

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -4,6 +4,7 @@
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import {toHexString} from './LinearMemoryInspectorUtils.js';
 import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
 
@@ -14,6 +15,7 @@ export interface LinearMemoryViewerData {
   address: number;
   memoryOffset: number;
   focus: boolean;
+  highlightInfo?: HighlightInfo;
 }
 
 export class ByteSelectedEvent extends Event {
@@ -50,6 +52,10 @@ export class LinearMemoryViewer extends HTMLElement {
   #memory = new Uint8Array();
   #address = 0;
   #memoryOffset = 0;
+  #highlightInfo: HighlightInfo = {
+    size: 0,
+    startAddress: 0,
+  };
 
   #numRows = 1;
   #numBytesInRow = BYTE_GROUP_SIZE;
@@ -69,6 +75,7 @@ export class LinearMemoryViewer extends HTMLElement {
 
     this.#memory = data.memory;
     this.#address = data.address;
+    this.#highlightInfo = data.highlightInfo || this.#highlightInfo;
     this.#memoryOffset = data.memoryOffset;
     this.#focusOnByte = data.focus;
     this.#update();
@@ -230,18 +237,20 @@ export class LinearMemoryViewer extends HTMLElement {
   #renderByteValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
+      const actualIndex = i + this.#memoryOffset;
       // Add margin after each group of bytes of size byteGroupSize.
       const addMargin = i !== startIndex && (i - startIndex) % BYTE_GROUP_SIZE === 0;
       const selected = i === this.#address - this.#memoryOffset;
+      const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
       const classMap = {
         'cell': true,
         'byte-cell': true,
         'byte-group-margin': addMargin,
         selected,
+        'highlight-area': shouldBeHighlighted,
       };
       const isSelectableCell = i < this.#memory.length;
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
-      const actualIndex = i + this.#memoryOffset;
       const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, actualIndex) : '';
       cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${byteValue}</span>`);
     }
@@ -251,10 +260,13 @@ export class LinearMemoryViewer extends HTMLElement {
   #renderCharacterValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
+      const actualIndex = i + this.#memoryOffset;
+      const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
       const classMap = {
         'cell': true,
         'text-cell': true,
         selected: this.#address - this.#memoryOffset === i,
+        'highlight-area': shouldBeHighlighted,
       };
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
@@ -274,6 +286,11 @@ export class LinearMemoryViewer extends HTMLElement {
   #onSelectedByte(index: number): void {
     this.dispatchEvent(new ByteSelectedEvent(index));
   }
+
+  #shouldBeHighlighted(index: number): boolean {
+    return this.#highlightInfo.startAddress <= index
+    && index < this.#highlightInfo.startAddress + this.#highlightInfo.size;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-viewer', LinearMemoryViewer);

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewerUtils.ts

@@ -0,0 +1,8 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export interface HighlightInfo {
+  startAddress: number;
+  size: number;
+}

package/front_end/ui/components/linear_memory_inspector/linearMemoryViewer.css

@@ -36,6 +36,10 @@
   background-color: var(--legacy-item-selection-bg-color);
 }
 
+.highlight-area {
+  background-color: var(--legacy-item-selection-bg-color);
+}
+
 .byte-cell {
   min-width: 21px;
   color: var(--color-text-primary);

package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector.ts

@@ -9,6 +9,7 @@ import * as LinearMemoryInspectorUtils from './LinearMemoryInspectorUtils.js';
 import * as LinearMemoryNavigator from './LinearMemoryNavigator.js';
 import * as LinearMemoryValueInterpreter from './LinearMemoryValueInterpreter.js';
 import * as LinearMemoryViewer from './LinearMemoryViewer.js';
+import * as LinearMemoryViewerUtils from './LinearMemoryViewerUtils.js';
 import * as ValueInterpreterDisplay from './ValueInterpreterDisplay.js';
 import * as ValueInterpreterDisplayUtils from './ValueInterpreterDisplayUtils.js';
 import * as ValueInterpreterSettings from './ValueInterpreterSettings.js';
@@ -21,6 +22,7 @@ export {
   LinearMemoryNavigator,
   LinearMemoryValueInterpreter,
   LinearMemoryViewer,
+  LinearMemoryViewerUtils,
   ValueInterpreterDisplay,
   ValueInterpreterDisplayUtils,
   ValueInterpreterSettings,

package/front_end/ui/components/node_text/nodeText.css

@@ -7,21 +7,21 @@
 /* See: https://crbug.com/1227651 for details on changing these to --override pattern. */
 
 .node-label-name {
-  color: var(--override-node-text-label-color, --color-token-tag);
+  color: var(--override-node-text-label-color, var(--color-token-tag));
 }
 
 .node-label-class {
-  color: var(--override-node-text-class-color, --color-token-attribute);
+  color: var(--override-node-text-class-color, var(--color-token-attribute));
 }
 
 .node-label-id {
-  color: var(--override-node-text-id-color);
+  color: var(--override-node-text-id-color, var(--color-token-attribute));
 }
 
 .node-label-class.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, var(--color-token-attribute)));
 }
 
 .node-label-id.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, var(--color-token-attribute)));
 }

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -67,18 +67,11 @@ export class PreviewToggle extends HTMLElement {
 
   #render(): void {
     const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
-    const hasLink = Boolean(this.#feedbackURL) || Boolean(this.#learnMoreURL);
-
-    const containerClasses = LitHtml.Directives.classMap({
-      'container': true,
-      'has-link': hasLink,
-    });
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
       html`
-      <div class=${containerClasses}>
+      <div class="container">
         <div class="checkbox-line">
           <label class="experiment-preview">
             <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -33,16 +33,10 @@
   padding: 4px;
 }
 
-.container.has-link {
-  /* For x-link outline not to paint over the helper text
-  we need to have 2 * <padding>px additional line height */
-  line-height: calc(1em + 8px);
-}
-
 .x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
-  padding: 4px;
+  margin: 4px;
 }
 
 .feedback .x-link {

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -38,6 +38,7 @@ li {
   height: 12px;
   width: 13px;
   overflow: hidden;
+  flex: none;
 }
 
 ul {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1019017"
+  "version": "1.0.1020357"
 }