chrome-devtools-frontend 1.0.1015723 → 1.0.1016605

package/front_end/core/sdk/DebuggerModel.ts

@@ -314,7 +314,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     await this.agent.invoke_disable();
     this.#isPausingInternal = false;
     this.globalObjectCleared();
-    this.dispatchEventToListeners(Events.DebuggerWasDisabled);
+    this.dispatchEventToListeners(Events.DebuggerWasDisabled, this);
     if (typeof this.#debuggerId === 'string') {
       _debuggerIdToModel.delete(this.#debuggerId);
     }
@@ -973,7 +973,7 @@ export enum Events {
 
 export type EventTypes = {
   [Events.DebuggerWasEnabled]: DebuggerModel,
-  [Events.DebuggerWasDisabled]: void,
+  [Events.DebuggerWasDisabled]: DebuggerModel,
   [Events.DebuggerPaused]: DebuggerModel,
   [Events.DebuggerResumed]: DebuggerModel,
   [Events.ParsedScriptSource]: Script,

package/front_end/core/sdk/RemoteObject.ts

@@ -34,6 +34,7 @@
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
+import type {DOMPinnedWebIDLProp, DOMPinnedWebIDLType} from '../common/JavaScriptMetaData.js';
 
 import type {DebuggerModel, FunctionDetails} from './DebuggerModel.js';
 import type {RuntimeModel} from './RuntimeModel.js';
@@ -309,6 +310,8 @@ export class RemoteObject {
   isNode(): boolean {
     return false;
   }
+
+  webIdl?: RemoteObjectWebIdlTypeMetadata;
 }
 
 export class RemoteObjectImpl extends RemoteObject {
@@ -728,6 +731,8 @@ export class RemoteObjectProperty {
   getter: RemoteObject|undefined;
   setter: RemoteObject|undefined;
 
+  webIdl?: RemoteObjectWebIdlPropertyMetadata;
+
   constructor(
       name: string, value: RemoteObject|null, enumerable?: boolean, writable?: boolean, isOwn?: boolean,
       wasThrown?: boolean, symbol?: RemoteObject|null, synthetic?: boolean,
@@ -1188,3 +1193,13 @@ export interface GetPropertiesResult {
   properties: RemoteObjectProperty[]|null;
   internalProperties: RemoteObjectProperty[]|null;
 }
+
+export interface RemoteObjectWebIdlTypeMetadata {
+  info: DOMPinnedWebIDLType;
+  state: Map<string, string>;
+}
+
+export interface RemoteObjectWebIdlPropertyMetadata {
+  info: DOMPinnedWebIDLProp;
+  applicable?: boolean;
+}

package/front_end/core/sdk/Script.ts

@@ -257,28 +257,29 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
     return source + '\n //# sourceURL=' + this.sourceURL;
   }
 
-  async editSource(newSource: string):
-      Promise<{error: string | null, exceptionDetails?: Protocol.Runtime.ExceptionDetails}> {
+  async editSource(newSource: string): Promise<
+      {status: Protocol.Debugger.SetScriptSourceResponseStatus, exceptionDetails?: Protocol.Runtime.ExceptionDetails}> {
     newSource = Script.trimSourceURLComment(newSource);
     // We append correct #sourceURL to script for consistency only. It's not actually needed for things to work correctly.
     newSource = this.appendSourceURLCommentIfNeeded(newSource);
 
-    if (!this.scriptId) {
-      return {error: 'Script failed to parse'};
-    }
-
     const {content: oldSource} = await this.requestContent();
     if (oldSource === newSource) {
-      return {error: null};
+      return {status: Protocol.Debugger.SetScriptSourceResponseStatus.Ok};
     }
     const response = await this.debuggerModel.target().debuggerAgent().invoke_setScriptSource(
         {scriptId: this.scriptId, scriptSource: newSource});
+    if (response.getError()) {
+      // Something went seriously wrong, like the V8 inspector no longer knowing about this script without
+      // shutting down the Debugger agent etc.
+      throw new Error(`Script#editSource failed for script with id ${this.scriptId}: ${response.getError()}`);
+    }
 
-    if (!response.getError() && !response.exceptionDetails) {
+    if (!response.getError() && response.status === Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
       this.#contentPromise = Promise.resolve({content: newSource, isEncoded: false});
     }
 
-    return {error: response.getError() || null, exceptionDetails: response.exceptionDetails};
+    return {status: response.status, exceptionDetails: response.exceptionDetails};
   }
 
   rawLocation(lineNumber: number, columnNumber: number): Location|null {

package/front_end/models/bindings/BreakpointManager.ts

@@ -409,6 +409,18 @@ export type EventTypes = {
   [Events.BreakpointRemoved]: BreakpointLocation,
 };
 
+const enum DebuggerUpdateResult {
+  OK = 'OK',
+  ERROR = 'ERROR',
+  // PENDING implies that the current update requires another re-run.
+  PENDING = 'PENDING',
+}
+
+const enum ResolveLocationResult {
+  OK = 'OK',
+  ERROR = 'ERROR',
+}
+
 export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly breakpointManager: BreakpointManager;
   urlInternal: Platform.DevToolsPath.UrlString;
@@ -444,25 +456,49 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
 
   async refreshInDebugger(): Promise<void> {
     if (!this.isRemoved) {
-      const breakpoints = Array.from(this.#modelBreakpoints.values());
-      await Promise.all(breakpoints.map(breakpoint => breakpoint.refreshBreakpoint()));
+      const modelBreakpoints = Array.from(this.#modelBreakpoints.values());
+      await Promise.all(modelBreakpoints.map(async modelBreakpoint => {
+        await modelBreakpoint.resetBreakpoint();
+        return this.#updateModel(modelBreakpoint);
+      }));
     }
   }
 
   modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
     const debuggerWorkspaceBinding = this.breakpointManager.debuggerWorkspaceBinding;
-    this.#modelBreakpoints.set(debuggerModel, new ModelBreakpoint(debuggerModel, this, debuggerWorkspaceBinding));
+    const modelBreakpoint = new ModelBreakpoint(debuggerModel, this, debuggerWorkspaceBinding);
+    this.#modelBreakpoints.set(debuggerModel, modelBreakpoint);
+    void this.#updateModel(modelBreakpoint);
+
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerWasEnabled, this.#onDebuggerEnabled, this);
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerWasDisabled, this.#onDebuggerDisabled, this);
   }
 
   modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
     const modelBreakpoint = this.#modelBreakpoints.get(debuggerModel);
+    modelBreakpoint?.cleanUpAfterDebuggerIsGone();
     this.#modelBreakpoints.delete(debuggerModel);
 
-    if (!modelBreakpoint) {
-      return;
+    this.#removeDebuggerModelListeners(debuggerModel);
+  }
+
+  #removeDebuggerModelListeners(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerWasEnabled, this.#onDebuggerEnabled, this);
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerWasDisabled, this.#onDebuggerDisabled, this);
+  }
+
+  #onDebuggerEnabled(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
+    const debuggerModel = event.data;
+    const model = this.#modelBreakpoints.get(debuggerModel);
+    if (model) {
+      void this.#updateModel(model);
     }
-    modelBreakpoint.cleanUpAfterDebuggerIsGone();
-    modelBreakpoint.removeEventListeners();
+  }
+
+  #onDebuggerDisabled(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
+    const debuggerModel = event.data;
+    const model = this.#modelBreakpoints.get(debuggerModel);
+    model?.cleanUpAfterDebuggerIsGone();
   }
 
   modelBreakpoint(debuggerModel: SDK.DebuggerModel.DebuggerModel): ModelBreakpoint|undefined {
@@ -589,21 +625,17 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
         this.addAllUnboundLocations();
       }
     }
-    await Promise.all(
-        Array.from(this.#modelBreakpoints.values()).map(modelBreakpoint => modelBreakpoint.scheduleUpdateInDebugger()));
+    return this.#updateModels();
   }
 
   async remove(keepInStorage: boolean): Promise<void> {
     this.isRemoved = true;
     const removeFromStorage = !keepInStorage;
 
-    // Await removing for all targets.
-    const updatePromises: Promise<void>[] = [];
-    for (const modelBreakpoint of this.#modelBreakpoints.values()) {
-      modelBreakpoint.removeEventListeners();
-      updatePromises.push(modelBreakpoint.scheduleUpdateInDebugger());
+    for (const debuggerModel of this.#modelBreakpoints.keys()) {
+      this.#removeDebuggerModelListeners(debuggerModel);
     }
-    await Promise.all(updatePromises);
+    await this.#updateModels();
 
     this.breakpointManager.removeBreakpoint(this, removeFromStorage);
     this.breakpointManager.targetManager.unobserveModels(SDK.DebuggerModel.DebuggerModel, this);
@@ -638,6 +670,17 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   getIsRemoved(): boolean {
     return this.isRemoved;
   }
+
+  async #updateModels(): Promise<void> {
+    await Promise.all(Array.from(this.#modelBreakpoints.values()).map(model => this.#updateModel(model)));
+  }
+
+  async #updateModel(model: ModelBreakpoint): Promise<void> {
+    const success = await model.scheduleUpdateInDebugger();
+    if (!success) {
+      await this.remove(false);
+    }
+  }
 }
 
 export class ModelBreakpoint {
@@ -646,8 +689,7 @@ export class ModelBreakpoint {
   readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
   readonly #liveLocations: LiveLocationPool;
   readonly #uiLocations: Map<LiveLocation, Workspace.UISourceCode.UILocation>;
-  #hasPendingUpdate: boolean;
-  #updatePromise: Promise<void>|null;
+  #updateMutex = new Common.Mutex.Mutex();
   #cancelCallback: boolean;
   #currentState: Breakpoint.State|null;
   #breakpointIds: Protocol.Debugger.BreakpointId[];
@@ -662,18 +704,9 @@ export class ModelBreakpoint {
     this.#liveLocations = new LiveLocationPool();
 
     this.#uiLocations = new Map();
-    this.#debuggerModel.addEventListener(
-        SDK.DebuggerModel.Events.DebuggerWasDisabled, this.cleanUpAfterDebuggerIsGone, this);
-    this.#debuggerModel.addEventListener(
-        SDK.DebuggerModel.Events.DebuggerWasEnabled, this.scheduleUpdateInDebugger, this);
-    this.#hasPendingUpdate = false;
-    this.#updatePromise = null;
     this.#cancelCallback = false;
     this.#currentState = null;
     this.#breakpointIds = [];
-    if (this.#debuggerModel.debuggerEnabled()) {
-      void this.scheduleUpdateInDebugger();
-    }
   }
 
   get currentState(): Breakpoint.State|null {
@@ -689,18 +722,20 @@ export class ModelBreakpoint {
     this.#liveLocations.disposeAll();
   }
 
-  scheduleUpdateInDebugger(): Promise<void> {
-    this.#hasPendingUpdate = true;
-    if (!this.#updatePromise) {
-      this.#updatePromise = (async(): Promise<void> => {
-        while (this.#hasPendingUpdate) {
-          this.#hasPendingUpdate = false;
-          await this.updateInDebugger();
-        }
-        this.#updatePromise = null;
-      })();
+  // Returns true, if scheduling ran as expected.
+  // Returns false, if an error occurred.
+  async scheduleUpdateInDebugger(): Promise<boolean> {
+    if (!this.#debuggerModel.debuggerEnabled()) {
+      return true;
+    }
+
+    const release = await this.#updateMutex.acquire();
+    let result = DebuggerUpdateResult.PENDING;
+    while (result === DebuggerUpdateResult.PENDING) {
+      result = await this.#updateInDebugger();
     }
-    return this.#updatePromise;
+    release();
+    return result === DebuggerUpdateResult.OK;
   }
 
   private scriptDiverged(): boolean {
@@ -713,16 +748,16 @@ export class ModelBreakpoint {
     return false;
   }
 
-  private async updateInDebugger(): Promise<void> {
+  async #updateInDebugger(): Promise<DebuggerUpdateResult> {
     if (this.#debuggerModel.target().isDisposed()) {
       this.cleanUpAfterDebuggerIsGone();
-      return;
+      return DebuggerUpdateResult.OK;
     }
-
     const lineNumber = this.#breakpoint.lineNumber();
     const columnNumber = this.#breakpoint.columnNumber();
     const condition = this.#breakpoint.condition();
 
+    // Calculate the new state.
     let newState: Breakpoint.State|null = null;
     if (!this.#breakpoint.getIsRemoved() && this.#breakpoint.enabled() && !this.scriptDiverged()) {
       let debuggerLocations: SDK.DebuggerModel.Location[] = [];
@@ -766,71 +801,97 @@ export class ModelBreakpoint {
         }
       }
     }
+    const hasBackendState = this.#breakpointIds.length;
 
-    if (this.#breakpointIds.length && Breakpoint.State.equals(newState, this.#currentState)) {
-      return;
+    // Case 1: State hasn't changed, and back-end is up to date and has information
+    // on some breakpoints.
+    if (hasBackendState && Breakpoint.State.equals(newState, this.#currentState)) {
+      return DebuggerUpdateResult.OK;
     }
+
     this.#breakpoint.currentState = newState;
 
-    if (this.#breakpointIds.length) {
-      await this.refreshBreakpoint();
-      return;
+    // Case 2: State has changed, and the back-end has outdated information on old
+    // breakpoints.
+    if (hasBackendState) {
+      // Reset the current state.
+      await this.resetBreakpoint();
+      // Schedule another run of updates, to finally update to the new state.
+      return DebuggerUpdateResult.PENDING;
     }
 
+    // Case 3: State is null (no breakpoints to set), and back-end is up to date
+    // (no info on breakpoints).
     if (!newState) {
-      return;
+      return DebuggerUpdateResult.OK;
     }
 
-    const results = await Promise.all(newState.positions.map(pos => {
-      if (pos.url) {
-        return this.#debuggerModel.setBreakpointByURL(pos.url, pos.lineNumber, pos.columnNumber, condition);
-      }
-      return this.#debuggerModel.setBreakpointInAnonymousScript(
-          pos.scriptId, pos.scriptHash as string, pos.lineNumber, pos.columnNumber, condition);
-    }));
-    const breakpointIds: Protocol.Debugger.BreakpointId[] = [];
-    let locations: SDK.DebuggerModel.Location[] = [];
-    let maybeRescheduleUpdate = false;
-    for (const result of results) {
-      if (result.breakpointId) {
-        breakpointIds.push(result.breakpointId);
-        locations = locations.concat(result.locations);
-      } else if (this.#debuggerModel.debuggerEnabled() && !this.#debuggerModel.isReadyToPause()) {
-        maybeRescheduleUpdate = true;
-      }
-    }
+    // Case 4: State is not null, so we have breakpoints to set and the back-end
+    // has no information on breakpoints yet. Set the breakpoints.
+    const {breakpointIds, locations, serverError} = await this.#setBreakpointOnBackend(newState);
 
+    const maybeRescheduleUpdate =
+        serverError && this.#debuggerModel.debuggerEnabled() && !this.#debuggerModel.isReadyToPause();
     if (!breakpointIds.length && maybeRescheduleUpdate) {
       // TODO(crbug.com/1229541): This is a quickfix to prevent #breakpoints from
       // disappearing if the Debugger is actually not enabled
       // yet. This quickfix should be removed as soon as we have a solution
       // to correctly synchronize the front-end with the inspector back-end.
-      void this.scheduleUpdateInDebugger();
-      return;
+      return DebuggerUpdateResult.PENDING;
     }
 
     this.#currentState = newState;
     if (this.#cancelCallback) {
       this.#cancelCallback = false;
-      return;
+      return DebuggerUpdateResult.OK;
     }
 
+    // Something went wrong: we expect to have a non-null state, but have not received any
+    // breakpointIds from the back-end.
     if (!breakpointIds.length) {
-      // Do not await the remove, as we otherwise will create a circular
-      // dependency. Removing breakpoints will call `scheduleUpdateInDebugger` again.
-      // Calling it again would cause it to await this current run of `scheduleInDebugger`, which
-      // will then deadlock.
-      void this.#breakpoint.remove(true);
-      return;
+      return DebuggerUpdateResult.ERROR;
     }
 
     this.#breakpointIds = breakpointIds;
     this.#breakpointIds.forEach(
         breakpointId => this.#debuggerModel.addBreakpointListener(breakpointId, this.breakpointResolved, this));
-    await Promise.all(locations.map(location => this.addResolvedLocation(location)));
+    const resolvedResults = await Promise.all(locations.map(location => this.addResolvedLocation(location)));
+
+    // Breakpoint clash: the resolved location resolves to a different breakpoint, report an error.
+    if (resolvedResults.includes(ResolveLocationResult.ERROR)) {
+      return DebuggerUpdateResult.ERROR;
+    }
+    return DebuggerUpdateResult.OK;
+  }
+
+  async #setBreakpointOnBackend(newState: Breakpoint.State): Promise<{
+    breakpointIds: Protocol.Debugger.BreakpointId[],
+    locations: SDK.DebuggerModel.Location[],
+    serverError: boolean,
+  }> {
+    const condition = this.#breakpoint.condition();
+    const results = await Promise.all(newState.positions.map(pos => {
+      if (pos.url) {
+        return this.#debuggerModel.setBreakpointByURL(pos.url, pos.lineNumber, pos.columnNumber, condition);
+      }
+      return this.#debuggerModel.setBreakpointInAnonymousScript(
+          pos.scriptId, pos.scriptHash as string, pos.lineNumber, pos.columnNumber, condition);
+    }));
+    const breakpointIds: Protocol.Debugger.BreakpointId[] = [];
+    let locations: SDK.DebuggerModel.Location[] = [];
+    let serverError = false;
+    for (const result of results) {
+      if (result.breakpointId) {
+        breakpointIds.push(result.breakpointId);
+        locations = locations.concat(result.locations);
+      } else {
+        serverError = true;
+      }
+    }
+    return {breakpointIds, locations, serverError};
   }
 
-  async refreshBreakpoint(): Promise<void> {
+  async resetBreakpoint(): Promise<void> {
     if (!this.#breakpointIds.length) {
       return;
     }
@@ -838,7 +899,6 @@ export class ModelBreakpoint {
     await Promise.all(this.#breakpointIds.map(id => this.#debuggerModel.removeBreakpoint(id)));
     this.didRemoveFromDebugger();
     this.#currentState = null;
-    void this.scheduleUpdateInDebugger();
   }
 
   private didRemoveFromDebugger(): void {
@@ -855,7 +915,10 @@ export class ModelBreakpoint {
 
   private async breakpointResolved({data: location}: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.Location>):
       Promise<void> {
-    await this.addResolvedLocation(location);
+    const result = await this.addResolvedLocation(location);
+    if (result === ResolveLocationResult.ERROR) {
+      await this.#breakpoint.remove(false);
+    }
   }
 
   private async locationUpdated(liveLocation: LiveLocation): Promise<void> {
@@ -874,39 +937,29 @@ export class ModelBreakpoint {
     }
   }
 
-  private async addResolvedLocation(location: SDK.DebuggerModel.Location): Promise<void> {
+  private async addResolvedLocation(location: SDK.DebuggerModel.Location): Promise<ResolveLocationResult> {
     const uiLocation = await this.#debuggerWorkspaceBinding.rawLocationToUILocation(location);
     if (!uiLocation) {
-      return;
+      return ResolveLocationResult.OK;
     }
     const breakpointLocation = this.#breakpoint.breakpointManager.findBreakpoint(uiLocation);
     if (breakpointLocation && breakpointLocation.breakpoint !== this.#breakpoint) {
       // location clash
-      await this.#breakpoint.remove(false /* keepInStorage */);
-      return;
+      return ResolveLocationResult.ERROR;
     }
     await this.#debuggerWorkspaceBinding.createLiveLocation(
         location, this.locationUpdated.bind(this), this.#liveLocations);
+    return ResolveLocationResult.OK;
   }
 
   cleanUpAfterDebuggerIsGone(): void {
-    if (this.#updatePromise) {
-      this.#cancelCallback = true;
-    }
-    this.#hasPendingUpdate = false;
+    this.#cancelCallback = true;
     this.resetLocations();
     this.#currentState = null;
     if (this.#breakpointIds.length) {
       this.didRemoveFromDebugger();
     }
   }
-
-  removeEventListeners(): void {
-    this.#debuggerModel.removeEventListener(
-        SDK.DebuggerModel.Events.DebuggerWasDisabled, this.cleanUpAfterDebuggerIsGone, this);
-    this.#debuggerModel.removeEventListener(
-        SDK.DebuggerModel.Events.DebuggerWasEnabled, this.scheduleUpdateInDebugger, this);
-  }
 }
 
 interface Position {

package/front_end/models/bindings/ResourceScriptMapping.ts

@@ -33,7 +33,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../workspace/workspace.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 
 import type {Breakpoint} from './BreakpointManager.js';
 import {BreakpointManager} from './BreakpointManager.js';
@@ -320,34 +320,48 @@ export class ResourceScriptFile extends Common.ObjectWrapper.ObjectWrapper<Resou
                             .breakpointLocationsForUISourceCode(this.#uiSourceCodeInternal)
                             .map(breakpointLocation => breakpointLocation.breakpoint);
     const source = this.#uiSourceCodeInternal.workingCopy();
-    void this.scriptInternal.editSource(source).then(({error, exceptionDetails}) => {
-      void this.scriptSourceWasSet(source, breakpoints, error, exceptionDetails);
+    void this.scriptInternal.editSource(source).then(({status, exceptionDetails}) => {
+      void this.scriptSourceWasSet(source, breakpoints, status, exceptionDetails);
     });
   }
 
   async scriptSourceWasSet(
-      source: string, breakpoints: Breakpoint[], error: string|null,
+      source: string, breakpoints: Breakpoint[], status: Protocol.Debugger.SetScriptSourceResponseStatus,
       exceptionDetails?: Protocol.Runtime.ExceptionDetails): Promise<void> {
-    if (!error && !exceptionDetails) {
+    if (status === Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
       this.#scriptSource = source;
     }
     await this.update();
 
-    if (!error && !exceptionDetails) {
+    if (status === Protocol.Debugger.SetScriptSourceResponseStatus.Ok) {
       // Live edit can cause #breakpoints to be in the wrong position, or to be lost altogether.
       // If any #breakpoints were in the pre-live edit script, they need to be re-added.
       await Promise.all(breakpoints.map(breakpoint => breakpoint.refreshInDebugger()));
       return;
     }
     if (!exceptionDetails) {
+      // TODO(crbug.com/1334484): Instead of to the console, report these errors in an "info bar" at the bottom
+      //                          of the text editor, similar to e.g. source mapping errors.
       Common.Console.Console.instance().addMessage(
-          i18nString(UIStrings.liveEditFailed, {PH1: String(error)}), Common.Console.MessageLevel.Warning);
+          i18nString(UIStrings.liveEditFailed, {PH1: getErrorText(status)}), Common.Console.MessageLevel.Warning);
       return;
     }
     const messageText = i18nString(UIStrings.liveEditCompileFailed, {PH1: exceptionDetails.text});
     this.#uiSourceCodeInternal.addLineMessage(
         Workspace.UISourceCode.Message.Level.Error, messageText, exceptionDetails.lineNumber,
         exceptionDetails.columnNumber);
+
+    function getErrorText(status: Protocol.Debugger.SetScriptSourceResponseStatus): string {
+      switch (status) {
+        case Protocol.Debugger.SetScriptSourceResponseStatus.BlockedByActiveFunction:
+          return 'Functions that are on the stack (currently being executed) can not be edited';
+        case Protocol.Debugger.SetScriptSourceResponseStatus.BlockedByActiveGenerator:
+          return 'Async functions/generators that are active can not be edited';
+        case Protocol.Debugger.SetScriptSourceResponseStatus.CompileError:
+        case Protocol.Debugger.SetScriptSourceResponseStatus.Ok:
+          throw new Error('Compile errors and Ok status must not be reported on the console');
+      }
+    }
   }
 
   private async update(): Promise<void> {

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -181,13 +181,14 @@ export const scopeIdentifiers = async function(
   }
 };
 
-const identifierAndPunctuationRegExp = /^\s*([A-Za-z_$][A-Za-z_$0-9]*)\s*([.;,]?)\s*$/;
+const identifierAndPunctuationRegExp = /^\s*([A-Za-z_$][A-Za-z_$0-9]*)\s*([.;,=]?)\s*$/;
 
 const enum Punctuation {
-  None = 0,
-  Comma = 1,
-  Dot = 2,
-  Semicolon = 3,
+  None = 'none',
+  Comma = 'comma',
+  Dot = 'dot',
+  Semicolon = 'semicolon',
+  Equals = 'equals',
 }
 
 const resolveScope =
@@ -341,6 +342,9 @@ const resolveScope =
         case ';':
           punctuation = Punctuation.Semicolon;
           break;
+        case '=':
+          punctuation = Punctuation.Equals;
+          break;
         case '':
           punctuation = Punctuation.None;
           break;

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -81,7 +81,15 @@ export class LighthousePanel extends UI.Panel.Panel {
   private rightToolbar!: UI.Toolbar.Toolbar;
   private showSettingsPaneSetting!: Common.Settings.Setting<boolean>;
   private stateBefore?: {
-    emulation: {enabled: boolean, outlineEnabled: boolean, toolbarControlsEnabled: boolean},
+    emulation: {
+      type: EmulationModel.DeviceModeModel.Type,
+      enabled: boolean,
+      outlineEnabled: boolean,
+      toolbarControlsEnabled: boolean,
+      scale: number,
+      device: EmulationModel.EmulatedDevices.EmulatedDevice|null,
+      mode: EmulationModel.EmulatedDevices.Mode|null,
+    },
     network: {conditions: SDK.NetworkManager.Conditions},
   };
   private isLHAttached?: boolean;
@@ -385,7 +393,7 @@ export class LighthousePanel extends UI.Panel.Panel {
       }
 
     } catch (err) {
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
@@ -413,12 +421,12 @@ export class LighthousePanel extends UI.Panel.Panel {
 
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.LighthouseFinished);
 
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       this.buildReportUI(lighthouseResponse.lhr, lighthouseResponse.artifacts);
       // Give focus to the new audit button when completed
       this.newButton.element.focus();
     } catch (err) {
-      await this.resetEmulationAndProtocolConnection();
+      await this.restoreEmulationAndProtocolConnection();
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
@@ -430,7 +438,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private async cancelLighthouse(): Promise<void> {
     this.currentLighthouseRun = undefined;
     this.statusView.updateStatus(i18nString(UIStrings.cancelling));
-    await this.resetEmulationAndProtocolConnection();
+    await this.restoreEmulationAndProtocolConnection();
     this.renderStartView();
   }
 
@@ -447,9 +455,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.stateBefore = {
       emulation: {
+        type: emulationModel.type(),
         enabled: emulationModel.enabledSetting().get(),
         outlineEnabled: emulationModel.deviceOutlineSetting().get(),
         toolbarControlsEnabled: emulationModel.toolbarControlsEnabledSetting().get(),
+        scale: emulationModel.scaleSetting().get(),
+        device: emulationModel.device(),
+        mode: emulationModel.mode(),
       },
       network: {conditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()},
     };
@@ -473,7 +485,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.isLHAttached = true;
   }
 
-  private async resetEmulationAndProtocolConnection(): Promise<void> {
+  private async restoreEmulationAndProtocolConnection(): Promise<void> {
     if (!this.isLHAttached) {
       return;
     }
@@ -483,9 +495,25 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     if (this.stateBefore) {
       const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-      emulationModel.enabledSetting().set(this.stateBefore.emulation.enabled);
-      emulationModel.deviceOutlineSetting().set(this.stateBefore.emulation.outlineEnabled);
-      emulationModel.toolbarControlsEnabledSetting().set(this.stateBefore.emulation.toolbarControlsEnabled);
+
+      // Detaching a session after overriding device metrics will prevent other sessions from overriding device metrics in the future.
+      // A workaround is to call "Emulation.clearDeviceMetricOverride" which is the result of the next line.
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=1337089
+      emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
+
+      const {type, enabled, outlineEnabled, toolbarControlsEnabled, scale, device, mode} = this.stateBefore.emulation;
+      emulationModel.enabledSetting().set(enabled);
+      emulationModel.deviceOutlineSetting().set(outlineEnabled);
+      emulationModel.toolbarControlsEnabledSetting().set(toolbarControlsEnabled);
+
+      // `emulate` will ignore the `scale` parameter for responsive emulation.
+      // In this case we can just set it here.
+      if (type === EmulationModel.DeviceModeModel.Type.Responsive) {
+        emulationModel.scaleSetting().set(scale);
+      }
+
+      emulationModel.emulate(type, device, mode, scale);
+
       SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(this.stateBefore.network.conditions);
       delete this.stateBefore;
     }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -36,6 +36,7 @@ import * as LinearMemoryInspector from '../../../components/linear_memory_inspec
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as JavaScriptMetaData from '../../../../models/javascript_metadata/javascript_metadata.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as UI from '../../legacy.js';
@@ -126,8 +127,9 @@ const EXPANDABLE_MAX_LENGTH = 50;
 const EXPANDABLE_MAX_DEPTH = 100;
 
 const parentMap = new WeakMap<SDK.RemoteObject.RemoteObjectProperty, SDK.RemoteObject.RemoteObject|null>();
-
 const objectPropertiesSectionMap = new WeakMap<Element, ObjectPropertiesSection>();
+const domPinnedProperties =
+    JavaScriptMetaData.JavaScriptMetadata.JavaScriptMetadataImpl.domPinnedProperties.DOMPinnedProperties;
 
 export const getObjectPropertiesSectionFrom = (element: Element): ObjectPropertiesSection|undefined => {
   return objectPropertiesSectionMap.get(element);
@@ -203,6 +205,37 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return objectPropertiesSection;
   }
 
+  static assignWebIDLMetadata(
+      value: SDK.RemoteObject.RemoteObject|null, properties: SDK.RemoteObject.RemoteObjectProperty[]): void {
+    if (!value) {
+      return;
+    }
+
+    const isInstance = value.type === 'object' && value.className !== null;
+    const webIdlType = isInstance ? domPinnedProperties[value.className] : undefined;
+    if (webIdlType) {
+      value.webIdl = {info: webIdlType, state: new Map()};
+    } else {
+      return;
+    }
+
+    for (const property of properties) {
+      const webIdlProperty = webIdlType?.props?.[property.name];
+      if (webIdlProperty) {
+        property.webIdl = {info: webIdlProperty};
+      }
+    }
+  }
+
+  static getPropertyValuesByNames(properties: SDK.RemoteObject.RemoteObjectProperty[]):
+      Map<string, SDK.RemoteObject.RemoteObject|undefined> {
+    const map = new Map();
+    for (const property of properties) {
+      map.set(property.name, property.value);
+    }
+    return map;
+  }
+
   static compareProperties(
       propertyA: SDK.RemoteObject.RemoteObjectProperty, propertyB: SDK.RemoteObject.RemoteObjectProperty): number {
     if (!propertyA.synthetic && propertyB.synthetic) {
@@ -744,6 +777,33 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       internalProperties: SDK.RemoteObject.RemoteObjectProperty[]|null, skipProto: boolean,
       skipGettersAndSetters: boolean, value: SDK.RemoteObject.RemoteObject|null,
       linkifier?: Components.Linkifier.Linkifier, emptyPlaceholder?: string|null): void {
+    ObjectPropertiesSection.assignWebIDLMetadata(value, properties);
+    const names = ObjectPropertiesSection.getPropertyValuesByNames(properties);
+
+    if (value?.webIdl) {
+      const parentRules = value.webIdl.info.rules;
+      if (parentRules) {
+        for (const {when: name, is: expected} of parentRules) {
+          if (names.get(name)?.value === expected) {
+            value.webIdl.state.set(name, expected);
+          }
+        }
+      }
+
+      for (const property of properties) {
+        if (property.webIdl) {
+          const parentState = value.webIdl.state;
+          const propertyRules = property.webIdl.info.rules;
+          if (!parentRules && !propertyRules) {
+            property.webIdl.applicable = true;
+          } else {
+            property.webIdl.applicable =
+                !propertyRules || propertyRules?.some(rule => parentState.get(rule.when) === rule.is);
+          }
+        }
+      }
+    }
+
     properties.sort(ObjectPropertiesSection.compareProperties);
     internalProperties = internalProperties || [];
 
@@ -1053,15 +1113,36 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.expandedValueElement = this.createExpandedValueElement(this.property.value);
     }
 
-    this.listItemElement.removeChildren();
+    let adorner: Element|string = '';
     let container: Element;
+
+    if (this.property.webIdl?.applicable) {
+      const icon = new IconButton.Icon.Icon();
+      icon.data = {
+        iconName: 'elements_panel_icon',
+        color: 'var(--color-text-secondary)',
+        width: '16px',
+        height: '16px',
+      };
+      adorner = UI.Fragment.html`
+         <span class='adorner'>${icon}</span>
+       `;
+    }
+
     if (isInternalEntries) {
-      container = UI.Fragment.html`<span class='name-and-value'>${this.nameElement}</span>`;
+      container = UI.Fragment.html`
+        <span class='name-and-value'>${adorner}${this.nameElement}</span>
+      `;
     } else {
-      container = UI.Fragment.html`<span class='name-and-value'>${this.nameElement}: ${this.valueElement}</span>`;
+      container = UI.Fragment.html`
+        <span class='name-and-value'>${adorner}${this.nameElement}: ${this.valueElement}</span>
+      `;
     }
+
+    this.listItemElement.removeChildren();
     this.rowContainer = (container as HTMLElement);
     this.listItemElement.appendChild(this.rowContainer);
+    this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
   }
 
   private updatePropertyPath(): void {

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -59,9 +59,22 @@
   overflow: hidden;
 }
 
+.object-properties-section [data-webidl="true"] > .name-and-value > .adorner {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+}
+
+.object-properties-section [data-webidl="true"] > .name-and-value > .name {
+  font-weight: bold;
+}
+
 .name-and-value {
   overflow: hidden;
   line-height: 16px;
+  display: flex;
+  white-space: break-spaces;
 }
 
 .editing-sub-part .name-and-value {

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.1015723"
+  "version": "1.0.1016605"
 }