chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/panels/settings/aiSettingsTab.css

@@ -4,185 +4,188 @@
  * found in the LICENSE file.
  */
 
-* {
-  box-sizing: border-box;
-}
-
-:host {
-  container-type: inline-size;
-  container-name: ai-settings;
-}
+@scope to (devtools-widget > *){
+  .ai-settings-container {
+    container-type: inline-size;
+    container-name: ai-settings;
+
+    @container ai-settings (min-width: 480px) {
+      .settings-container-wrapper {
+        align-items: center;
+      }
+    }
+  }
 
-.shared-disclaimer {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-5);
-  padding: var(--sys-size-9) var(--sys-size-11);
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
+  * {
+    box-sizing: border-box;
+    min-height: auto;
+  }
 
-  h2 {
-    font: var(--sys-typescale-headline5);
-    margin: 0 0 var(--sys-size-6);
+  .shared-disclaimer {
+    background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
+    border-radius: var(--sys-size-5);
+    padding: var(--sys-size-9) var(--sys-size-11);
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+
+    h2 {
+      font: var(--sys-typescale-headline5);
+      margin: 0 0 var(--sys-size-6);
+    }
   }
-}
 
-.disclaimer-list-header {
-  font: var(--sys-typescale-body5-medium);
-  margin: 0;
-}
+  .disclaimer-list-header {
+    font: var(--sys-typescale-body5-medium);
+    margin: 0;
+  }
 
-.disclaimer-list {
-  padding: var(--sys-size-6) 0 0;
-  display: grid;
-  grid-template-columns: var(--sys-size-12) auto;
-  gap: var(--sys-size-6) 0;
-  line-height: var(--sys-typescale-body5-line-height);
-}
+  .disclaimer-list {
+    padding: var(--sys-size-6) 0 0;
+    display: grid;
+    grid-template-columns: var(--sys-size-12) auto;
+    gap: var(--sys-size-6) 0;
+    line-height: var(--sys-typescale-body5-line-height);
+  }
 
-.settings-container {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level2);
-  margin: var(--sys-size-11) 0 var(--sys-size-4);
-  line-height: var(--sys-typescale-body5-line-height);
-  min-width: var(--sys-size-28);
-  max-width: var(--sys-size-35);
-  background-color: var(--app-color-card-background);
-}
+  .settings-container {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    border-radius: var(--sys-size-5);
+    box-shadow: var(--sys-elevation-level2);
+    margin: var(--sys-size-11) 0 var(--sys-size-4);
+    line-height: var(--sys-typescale-body5-line-height);
+    min-width: var(--sys-size-28);
+    max-width: var(--sys-size-35);
+    background-color: var(--app-color-card-background);
+  }
 
-.accordion-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  .accordion-header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.icon-container,
-.dropdown {
-  padding: 0 var(--sys-size-8);
-}
+  .icon-container,
+  .dropdown {
+    padding: 0 var(--sys-size-8);
+  }
 
-.toggle-container {
-  padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
+  .toggle-container {
+    padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.expansion-grid {
-  padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
-  display: grid;
-  grid-template-columns: var(--sys-size-9) auto;
-  gap: var(--sys-size-6) var(--sys-size-8);
-  line-height: var(--sys-typescale-body5-line-height);
-  color: var(--sys-color-on-surface-subtle);
-}
+  .expansion-grid {
+    padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
+    display: grid;
+    grid-template-columns: var(--sys-size-9) auto;
+    gap: var(--sys-size-6) var(--sys-size-8);
+    line-height: var(--sys-typescale-body5-line-height);
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.expansion-grid-whole-row {
-  grid-column: span 2;
-  font-weight: var(--ref-typeface-weight-medium);
-  color: var(--sys-color-on-surface);
-  padding-top: var(--sys-size-4);
-  margin: 0;
-  font-size: inherit;
-}
+  .expansion-grid-whole-row {
+    grid-column: span 2;
+    font-weight: var(--ref-typeface-weight-medium);
+    color: var(--sys-color-on-surface);
+    padding-top: var(--sys-size-4);
+    margin: 0;
+    font-size: inherit;
+  }
 
-.setting-description {
-  color: var(--sys-color-on-surface-subtle);
-}
+  .setting-description {
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.centered {
-  display: grid;
-  place-content: center;
-}
+  .centered {
+    display: grid;
+    place-content: center;
+  }
 
-.setting-card {
-  padding: var(--sys-size-6) 0;
+  .setting-card {
+    padding: var(--sys-size-6) 0;
 
-  h2 {
-    margin: 0;
-    font: inherit;
+    h2 {
+      margin: 0;
+      font: inherit;
+    }
   }
-}
 
-.divider {
-  margin: var(--sys-size-5) 0;
-  border-left: var(--sys-size-1) solid var(--sys-color-divider);
-}
-
-.accordion-header ~ .accordion-header,
-.divider ~ .divider,
-.toggle-container ~ .toggle-container {
-  border-top: var(--sys-size-1) solid var(--sys-color-divider);
-}
+  .divider {
+    margin: var(--sys-size-5) 0;
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row {
-  grid-column: span 5;
-  overflow: hidden;
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
-}
+  .accordion-header ~ .accordion-header,
+  .divider ~ .divider,
+  .toggle-container ~ .toggle-container {
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row.open {
-  grid-template-rows: 1fr;
-}
+  .whole-row {
+    grid-column: span 5;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
+  }
 
-.overflow-hidden {
-  overflow: hidden;
-}
+  .whole-row.open {
+    grid-template-rows: 1fr;
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: var(--sys-size-2);
-  padding: 0;
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  .overflow-hidden {
+    overflow: hidden;
+  }
 
-.padded {
-  padding: var(--sys-size-2) 0;
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: var(--sys-size-2);
+    padding: 0;
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.settings-container-wrapper {
-  position: absolute;
-  inset: var(--sys-size-8) 0 0;
-  overflow: auto;
-  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
-  display: flex;
-  flex-direction: column;
-}
+  .padded {
+    padding: var(--sys-size-2) 0;
+  }
 
-@container ai-settings (min-width: 480px) {
   .settings-container-wrapper {
-    align-items: center;
+    position: absolute;
+    inset: var(--sys-size-8) 0 0;
+    overflow: auto;
+    padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
+    display: flex;
+    flex-direction: column;
   }
-}
 
-header {
-  font-size: var(--sys-typescale-headline3-size);
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  header {
+    font-size: var(--sys-typescale-headline3-size);
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.disabled-explainer {
-  background-color: var(--sys-color-surface-yellow);
-  border-radius: var(--sys-shape-corner-medium-small);
-  margin-top: var(--sys-size-11);
-  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
-  width: 100%;
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
-  color: var(--sys-color-yellow);
-}
+  .disabled-explainer {
+    background-color: var(--sys-color-surface-yellow);
+    border-radius: var(--sys-shape-corner-medium-small);
+    margin-top: var(--sys-size-11);
+    padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
+    width: 100%;
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+    color: var(--sys-color-yellow);
+  }
 
-.disabled-explainer-row {
-  display: flex;
-  gap: var(--sys-size-6);
-  margin-top: var(--sys-size-4);
+  .disabled-explainer-row {
+    display: flex;
+    gap: var(--sys-size-6);
+    margin-top: var(--sys-size-4);
+  }
 }

package/front_end/panels/settings/components/SyncSection.ts

@@ -16,6 +16,7 @@ import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as SettingsComponents from '../../../ui/components/settings/settings.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../../common/common.js';
@@ -112,7 +113,7 @@ function renderDataDisclaimer(): HTMLElement {
 
   const container = document.createElement('span');
   Lit.render(relevantDataTooltipTemplate, container);
-  cachedTooltipElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
+  cachedTooltipElement = uiI18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
     PH1: container,
   });
   return cachedTooltipElement;

package/front_end/panels/settings/settings-meta.ts

@@ -7,7 +7,6 @@ import './emulation/emulation-meta.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Settings from './settings.js';
@@ -117,7 +116,7 @@ UI.ViewManager.registerViewExtension({
   order: 2,
   async loadView() {
     const Settings = await loadSettingsModule();
-    return LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, new Settings.AISettingsTab.AISettingsTab());
+    return new Settings.AISettingsTab.AISettingsTab();
   },
   iconName: 'button-magic',
   settings: ['console-insights-enabled'],

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, render} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import dialogStyles from './dialog.css.js';
@@ -27,28 +27,29 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/AddSourceMapURLDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
 
 interface ViewInput {
   label: Platform.UIString.LocalizedString;
-  onKeyDown: (event: KeyboardEvent) => void;
+  onEnter: (value: string) => void;
+  onInputChange: (value: string) => void;
   apply: () => void;
 }
 
-interface ViewOutput {
-  input: HTMLInputElement;
-}
-
-type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${dialogStyles}</style>
     <label>${input.label}</label>
     <input class="harmony-input add-source-map" spellcheck="false" type="text"
         jslog=${VisualLogging.textField('url').track({keydown: 'Enter', change: true})}
-        @keydown=${input.onKeyDown} ${ref(e => { output.input = e as HTMLInputElement; })}>
+        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') {
+          e.consume(true);
+          input.onEnter((e.target as HTMLInputElement).value); }
+        }}
+        @change=${(e: Event) => input.onInputChange((e.target as HTMLInputElement).value)}
+        autofocus>
     <devtools-button @click=${input.apply} .jslogContext=${'add'}
         .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.add)}</devtools-button>`,
     target);
@@ -56,7 +57,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class AddDebugInfoURLDialog extends UI.Widget.HBox {
-  private input!: HTMLInputElement;
+  private url = '';
   private readonly dialog: UI.Dialog.Dialog;
   private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
   private constructor(
@@ -66,20 +67,14 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
 
     const viewInput = {
       label,
-      onKeyDown: this.onKeyDown.bind(this),
+      onEnter: this.onEnter.bind(this),
+      onInputChange: this.onInputChange.bind(this),
       apply: this.apply.bind(this),
     };
-    const that = this;
-    const viewOutput = {
-      set input(input: HTMLInputElement) {
-        that.input = input;
-      },
-    };
-    view(viewInput, viewOutput, this.contentElement);
+    view(viewInput, undefined, this.contentElement);
 
     this.dialog = new UI.Dialog.Dialog(jslogContext);
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-    this.dialog.setDefaultFocusedElement(this.input);
 
     this.callback = callback;
   }
@@ -103,14 +98,16 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
     this.callback(value);
   }
 
+  private onInputChange(value: string): void {
+    this.url = value;
+  }
+
   private apply(): void {
-    this.done(this.input.value as Platform.DevToolsPath.UrlString);
+    this.done(this.url as Platform.DevToolsPath.UrlString);
   }
 
-  private onKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      event.consume(true);
-      this.apply();
-    }
+  private onEnter(value: string): void {
+    this.url = value;
+    this.apply();
   }
 }

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -11,6 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -175,12 +176,12 @@ export class DebuggerPausedMessage {
       let messageElement;
       if (data.insertion) {
         if (data.targetNode === data.node) {
-          messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
+          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
         } else {
-          messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
+          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
         }
       } else {
-        messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
+        messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
       }
       subElement.appendChild(document.createElement('br'));
       subElement.appendChild(messageElement);

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -6,6 +6,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -62,14 +63,14 @@ export class ResourceOriginPlugin extends Plugin {
         }
         element.append(link);
       });
-      return [new UI.Toolbar.ToolbarItem(i18n.i18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: element}))];
+      return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: element}))];
     }
 
     // Handle anonymous scripts with an originStackTrace.
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
       if (script.originStackTrace?.callFrames.length) {
         const link = linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
-        return [new UI.Toolbar.ToolbarItem(i18n.i18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
+        return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }
     }
 

package/front_end/panels/sources/SourcesNavigator.ts

@@ -15,6 +15,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -190,7 +191,7 @@ export class FilesNavigatorView extends NavigatorView {
     const link =
         UI.XLink.XLink.create('https://goo.gle/devtools-automatic-workspace-folders', 'com.chrome.devtools.json');
     this.#automaticFileSystemNudge =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.automaticWorkspaceNudge, {PH1: link});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.automaticWorkspaceNudge, {PH1: link});
     this.#automaticFileSystemNudge.classList.add('automatic-file-system-nudge');
     this.contentElement.insertBefore(this.#automaticFileSystemNudge, this.contentElement.firstChild);
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -12,6 +12,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -633,11 +634,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
             await UI.ViewManager.ViewManager.instance().showView('navigator-files');
             await automaticFileSystemManager.connectAutomaticFileSystem(/* addIfMissing= */ true);
           });
-          tooltip.append(i18n.i18n.getFormatLocalizedString(
+          tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveAddFolderToWorkspace, {PH1: link}));
         } else {
           const link = UI.XLink.XLink.create('https://developer.chrome.com/docs/devtools/workspaces/', 'Workspace');
-          tooltip.append(i18n.i18n.getFormatLocalizedString(
+          tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveSetUpYourWorkspace, {PH1: link}));
         }
         suffixElement.append(icon, tooltip);

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -94,7 +94,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/WatchExpressionsSidebar
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let watchExpressionsSidebarPaneInstance: WatchExpressionsSidebarPane;
 
-export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWidget implements
+export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     UI.ActionRegistration.ActionDelegate, UI.Toolbar.ItemsProvider,
     UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame> {
   private watchExpressions: WatchExpression[];
@@ -106,7 +106,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(watchExpressionsSidebarPaneStyles, objectValueStyles);
 
     // TODO(szuend): Replace with a Set once the web test
@@ -125,7 +125,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.refreshButton = new UI.Toolbar.ToolbarButton(
         i18nString(UIStrings.refreshWatchExpressions), 'refresh', undefined, 'refresh-watch-expressions');
     this.refreshButton.setSize(Buttons.Button.Size.SMALL);
-    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.update, this);
+    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.requestUpdate, this);
 
     this.contentElement.classList.add('watch-expressions');
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.watch')}`);
@@ -138,10 +138,10 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.expandController =
         new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline);
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.requestUpdate, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.requestUpdate, this);
     this.linkifier = new Components.Linkifier.Linkifier();
-    this.update();
+    this.requestUpdate();
   }
 
   static instance(): WatchExpressionsSidebarPane {
@@ -182,7 +182,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.createWatchExpression(null).startEditing();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.linkifier.reset();
     this.contentElement.removeChildren();
     this.treeOutline.removeChildren();
@@ -265,14 +265,14 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
   private deleteAllButtonClicked(): void {
     this.watchExpressions = [];
     this.saveExpressions();
-    this.update();
+    this.requestUpdate();
   }
 
   private async focusAndAddExpressionToWatch(expression: string): Promise<void> {
     await UI.ViewManager.ViewManager.instance().showView('sources.watch');
     this.createWatchExpression(expression);
     this.saveExpressions();
-    this.update();
+    this.requestUpdate();
   }
 
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {