chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -7,6 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.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';
 
@@ -626,65 +627,65 @@ export class AXNodeIgnoredReasonTreeElement extends AXNodePropertyTreeElement {
     let reasonElement: Element|null = null;
     switch (reason) {
       case 'activeModalDialog':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenBy, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenBy, {});
         break;
       case 'hiddenByChildTree':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenByChildTree, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsHiddenByChildTree, {});
         break;
       case 'ancestorIsLeafNode':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.ancestorChildrenAreAll, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.ancestorChildrenAreAll, {});
         break;
       case 'ariaHiddenElement': {
         const ariaHiddenSpan = document.createElement('span', {is: 'source-code'}).textContent = 'aria-hidden';
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsPlaceholder, {PH1: ariaHiddenSpan});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsPlaceholder, {PH1: ariaHiddenSpan});
         break;
       }
       case 'ariaHiddenSubtree': {
         const ariaHiddenSpan = document.createElement('span', {is: 'source-code'}).textContent = 'aria-hidden';
         const trueSpan = document.createElement('span', {is: 'source-code'}).textContent = 'true';
-        reasonElement = i18n.i18n.getFormatLocalizedString(
+        reasonElement = uiI18n.getFormatLocalizedString(
             str_, UIStrings.placeholderIsPlaceholderOnAncestor, {PH1: ariaHiddenSpan, PH2: trueSpan});
         break;
       }
       case 'emptyAlt':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementHasEmptyAltText, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementHasEmptyAltText, {});
         break;
       case 'emptyText':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.noTextContent, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.noTextContent, {});
         break;
       case 'inertElement':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsInert, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsInert, {});
         break;
       case 'inertSubtree':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsInAnInertSubTree, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsInAnInertSubTree, {});
         break;
       case 'inheritsPresentation':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementsInheritsPresentational, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementsInheritsPresentational, {});
         break;
       case 'labelContainer':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.partOfLabelElement, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.partOfLabelElement, {});
         break;
       case 'labelFor':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.labelFor, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.labelFor, {});
         break;
       case 'notRendered':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsNotRendered, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsNotRendered, {});
         break;
       case 'notVisible':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsNotVisible, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsNotVisible, {});
         break;
       case 'presentationalRole': {
         const role = axNode?.role()?.value || '';
         const rolePresentationSpan = document.createElement('span', {is: 'source-code'}).textContent = 'role=' + role;
         reasonElement =
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementHasPlaceholder, {PH1: rolePresentationSpan});
+            uiI18n.getFormatLocalizedString(str_, UIStrings.elementHasPlaceholder, {PH1: rolePresentationSpan});
         break;
       }
       case 'probablyPresentational':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementIsPresentational, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementIsPresentational, {});
         break;
       case 'uninteresting':
-        reasonElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.elementNotInteresting, {});
+        reasonElement = uiI18n.getFormatLocalizedString(str_, UIStrings.elementNotInteresting, {});
         break;
     }
     if (reasonElement) {

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -15,7 +15,7 @@ import {SourceOrderPane} from './SourceOrderView.js';
 
 let accessibilitySidebarViewInstance: AccessibilitySidebarView;
 
-export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget {
+export class AccessibilitySidebarView extends UI.Widget.VBox {
   #node: SDK.DOMModel.DOMNode|null;
   #axNode: SDK.AccessibilityModel.AccessibilityNode|null;
   private skipNextPullNode: boolean;
@@ -24,8 +24,8 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   private readonly ariaSubPane: ARIAAttributesPane;
   private readonly axNodeSubPane: AXNodeSubPane;
   private readonly sourceOrderSubPane: SourceOrderPane;
-  private constructor(throttlingTimeout?: number) {
-    super(false /* useShadowDom */, throttlingTimeout);
+  private constructor() {
+    super();
     this.element.classList.add('accessibility-sidebar-view');
     this.#node = null;
     this.#axNode = null;
@@ -44,12 +44,9 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.pullNode();
   }
 
-  static instance(opts?: {
-    forceNew: boolean,
-    throttlingTimeout: number,
-  }): AccessibilitySidebarView {
+  static instance(opts?: {forceNew: boolean}): AccessibilitySidebarView {
     if (!accessibilitySidebarViewInstance || opts?.forceNew) {
-      accessibilitySidebarViewInstance = new AccessibilitySidebarView(opts?.throttlingTimeout);
+      accessibilitySidebarViewInstance = new AccessibilitySidebarView();
     }
     return accessibilitySidebarViewInstance;
   }
@@ -65,7 +62,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
   setNode(node: SDK.DOMModel.DOMNode|null, fromAXTree?: boolean): void {
     this.skipNextPullNode = Boolean(fromAXTree);
     this.#node = node;
-    this.update();
+    this.requestUpdate();
   }
 
   accessibilityNodeCallback(axNode: SDK.AccessibilityModel.AccessibilityNode|null): void {
@@ -85,7 +82,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.breadcrumbsSubPane.setAXNode(axNode);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const node = this.node();
     this.axNodeSubPane.setNode(node);
     this.ariaSubPane.setNode(node);
@@ -109,7 +106,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     super.wasShown();
 
     // Pull down the latest date for this node.
-    void this.doUpdate();
+    void this.performUpdate();
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this, {scoped: true});
@@ -152,6 +149,6 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     if (this.node() !== node) {
       return;
     }
-    this.update();
+    this.requestUpdate();
   }
 }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -531,13 +531,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #getChatUiState(): ChatViewState {
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
 
-    // Special case due to the way its handled downstream quirks
-    if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-      return ChatViewState.CHAT_VIEW;
-    }
-
-    if (!this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
-      return ChatViewState.CONSENT_VIEW;
+    if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE ||
+        !this.#aiAssistanceEnabledSetting?.getIfNotDisabled() || blockedByAge) {
+      return ChatViewState.DISABLED_VIEW;
     }
 
     if (this.#conversation?.type) {
@@ -986,7 +982,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getChatInputPlaceholder(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.CONSENT_VIEW || !this.#conversation) {
+    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation) {
       return i18nString(UIStrings.followTheSteps);
     }
 
@@ -1019,7 +1015,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getDisclaimerText(): Platform.UIString.LocalizedString {
     const state = this.#getChatUiState();
-    if (state === ChatViewState.CONSENT_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
+    if (state === ChatViewState.DISABLED_VIEW || !this.#conversation || this.#conversation.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
 

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -19,6 +19,7 @@ import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -203,10 +204,6 @@ const UIStringsNotTranslate = {
    * @description Title for the add image button.
    */
   addImageButtonTitle: 'Add image',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForEmptyState: 'This is an experimental AI feature and won\'t always get it right.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -263,7 +260,7 @@ export interface ModelChatMessage {
 export type ChatMessage = UserChatMessage|ModelChatMessage;
 
 export const enum State {
-  CONSENT_VIEW = 'consent-view',
+  DISABLED_VIEW = 'disabled-view',
   CHAT_VIEW = 'chat-view',
   EXPLORE_VIEW = 'explore-view'
 }
@@ -516,6 +513,10 @@ export class ChatView extends HTMLElement {
 
   #render(): void {
     const renderFooter = (): Lit.LitTemplate => {
+      if (this.#props.state !== State.CHAT_VIEW) {
+        return Lit.nothing;
+      }
+
       const classes = Lit.Directives.classMap({
         'chat-view-footer': true,
         'has-conversation': !!this.#props.conversationType,
@@ -523,35 +524,58 @@ export class ChatView extends HTMLElement {
       });
 
       // clang-format off
-      const footerContents = this.#props.conversationType
-        ? renderRelevantDataDisclaimer({
-          isLoading: this.#props.isLoading,
-          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
-          disclaimerText: this.#props.disclaimerText,
-        })
-        : html`<p>
-            ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
-            <button
-              class="link"
-              role="link"
-              jslog=${VisualLogging.link('open-ai-settings').track({
-                click: true,
-              })}
-              @click=${() => {
-                void UI.ViewManager.ViewManager.instance().showView(
-                  'chrome-ai',
-                );
-              }}
-            >${i18nString(UIStrings.learnAbout)}</button>
-          </p>`;
-
       return html`
         <footer class=${classes} jslog=${VisualLogging.section('footer')}>
-          ${footerContents}
+          ${renderRelevantDataDisclaimer({
+            isLoading: this.#props.isLoading,
+            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+            tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
+            disclaimerText: this.#props.disclaimerText
+          })}
         </footer>
       `;
+      // clang-format on
     };
+
+    const renderInputOrReadOnlySection = (): Lit.LitTemplate => {
+      if (this.#props.state !== State.CHAT_VIEW) {
+        return Lit.nothing;
+      }
+
+      if (this.#props.conversationType && this.#props.isReadOnly) {
+        return renderReadOnlySection({
+          conversationType: this.#props.conversationType,
+          onNewConversation: this.#props.onNewConversation,
+        });
+      }
+
+      return renderChatInput({
+        isLoading: this.#props.isLoading,
+        blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+        isTextInputDisabled: this.#props.isTextInputDisabled,
+        inputPlaceholder: this.#props.inputPlaceholder,
+        disclaimerText: this.#props.disclaimerText,
+        selectedContext: this.#props.selectedContext,
+        inspectElementToggled: this.#props.inspectElementToggled,
+        multimodalInputEnabled: this.#props.multimodalInputEnabled,
+        conversationType: this.#props.conversationType,
+        imageInput: this.#props.imageInput,
+        aidaAvailability: this.#props.aidaAvailability,
+        isTextInputEmpty: this.#props.isTextInputEmpty,
+        uploadImageInputEnabled: this.#props.uploadImageInputEnabled,
+        onContextClick: this.#props.onContextClick,
+        onInspectElementClick: this.#props.onInspectElementClick,
+        onSubmit: this.#handleSubmit,
+        onTextAreaKeyDown: this.#handleTextAreaKeyDown,
+        onCancel: this.#handleCancel,
+        onNewConversation: this.#props.onNewConversation,
+        onTakeScreenshot: this.#props.onTakeScreenshot,
+        onRemoveImageInput: this.#props.onRemoveImageInput,
+        onTextInputChange: this.#props.onTextInputChange,
+        onImageUpload: this.#handleImageUpload
+      });
+    };
+
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
@@ -576,38 +600,7 @@ export class ChatView extends HTMLElement {
             onMessageContainerRef: this.#handleMessageContainerRef,
             onCopyResponseClick: this.#props.onCopyResponseClick,
           })}
-          ${this.#props.isReadOnly
-            ? renderReadOnlySection({
-                conversationType: this.#props.conversationType,
-                onNewConversation: this.#props.onNewConversation,
-              })
-            : renderChatInput({
-                isLoading: this.#props.isLoading,
-                blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-                isTextInputDisabled: this.#props.isTextInputDisabled,
-                inputPlaceholder: this.#props.inputPlaceholder,
-                state: this.#props.state,
-                disclaimerText: this.#props.disclaimerText,
-                selectedContext: this.#props.selectedContext,
-                inspectElementToggled: this.#props.inspectElementToggled,
-                multimodalInputEnabled: this.#props.multimodalInputEnabled,
-                conversationType: this.#props.conversationType,
-                imageInput: this.#props.imageInput,
-                isTextInputEmpty: this.#props.isTextInputEmpty,
-                aidaAvailability: this.#props.aidaAvailability,
-                uploadImageInputEnabled: this.#props.uploadImageInputEnabled,
-                onContextClick: this.#props.onContextClick,
-                onInspectElementClick: this.#props.onInspectElementClick,
-                onSubmit: this.#handleSubmit,
-                onTextAreaKeyDown: this.#handleTextAreaKeyDown,
-                onCancel: this.#handleCancel,
-                onNewConversation: this.#props.onNewConversation,
-                onTakeScreenshot: this.#props.onTakeScreenshot,
-                onRemoveImageInput: this.#props.onRemoveImageInput,
-                onTextInputChange: this.#props.onTextInputChange,
-                onImageUpload: this.#handleImageUpload,
-              })
-          }
+          ${renderInputOrReadOnlySection()}
         </main>
        ${renderFooter()}
       </div>
@@ -1411,7 +1404,6 @@ function renderChatInput({
   blockedByCrossOrigin,
   isTextInputDisabled,
   inputPlaceholder,
-  state,
   selectedContext,
   inspectElementToggled,
   multimodalInputEnabled,
@@ -1436,7 +1428,6 @@ function renderChatInput({
   blockedByCrossOrigin: boolean,
   isTextInputDisabled: boolean,
   inputPlaceholder: Platform.UIString.LocalizedString,
-  state: State,
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null,
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
@@ -1461,8 +1452,7 @@ function renderChatInput({
     return Lit.nothing;
   }
 
-  const shouldShowMultiLine = state !== State.CONSENT_VIEW &&
-      aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE && selectedContext;
+  const shouldShowMultiLine = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE && selectedContext;
   const chatInputContainerCls = Lit.Directives.classMap({
     'chat-input-container': true,
     'single-line-layout': !shouldShowMultiLine,
@@ -1546,16 +1536,16 @@ function renderConsentViewContents(): Lit.TemplateResult {
     return html`${i18nString(UIStrings.notAvailableInIncognitoMode)}`;
   }
   if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
-    consentViewContents = i18n.i18n.getFormatLocalizedString(
+    consentViewContents = uiI18n.getFormatLocalizedString(
         str_, UIStrings.turnOnForStylesRequestsPerformanceAndFiles, {PH1: settingsLink});
   } else if (config.devToolsAiAssistanceFileAgent?.enabled) {
     consentViewContents =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesRequestsAndFiles, {PH1: settingsLink});
   } else if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
     consentViewContents =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink});
   } else {
-    consentViewContents = i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
+    consentViewContents = uiI18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink});
   }
 
   return html`${consentViewContents}`;
@@ -1617,11 +1607,10 @@ function renderMainContents({
   conversationType?: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
-  if (state === State.CONSENT_VIEW) {
-    return renderDisabledState(renderConsentViewContents());
-  }
-
-  if (aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+  if (state === State.DISABLED_VIEW) {
+    if (aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return renderDisabledState(renderConsentViewContents());
+    }
     return renderDisabledState(renderAidaUnavailableContents(aidaAvailability));
   }
 

package/front_end/panels/application/AppManifestView.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -704,7 +705,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
         });
         suggestedIdNote.appendChild(
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
+            uiI18n.getFormatLocalizedString(str_, UIStrings.appIdNote, {PH1: suggestedIdSpan, PH2: copyButton}));
       }
     } else {
       this.identitySection.removeField(i18nString(UIStrings.computedAppId));
@@ -781,7 +782,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         'https://web.dev/maskable-icon/', i18nString(UIStrings.documentationOnMaskableIcons), undefined, undefined,
         'learn-more');
     this.iconsSection.appendRow().appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOurS, {PH1: documentationLink}));
+        uiI18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOurS, {PH1: documentationLink}));
 
     let squareSizedIconAvailable = false;
     for (const icon of icons) {
@@ -938,8 +939,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       const wco = document.createElement('code');
       wco.classList.add('wco');
       wco.textContent = 'window-controls-overlay';
-      wcoStatusMessage.appendChild(i18n.i18n.getFormatLocalizedString(
-          str_, UIStrings.wcoFound, {PH1: wco, PH2: displayOverrideText, PH3: link}));
+      wcoStatusMessage.appendChild(
+          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoFound, {PH1: wco, PH2: displayOverrideText, PH3: link}));
 
       if (this.overlayModel) {
         await this.appendWindowControlsToSection(this.overlayModel, url, stringProperty('theme_color'));
@@ -950,14 +951,14 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       wcoStatusMessage.appendChild(infoIcon);
 
       wcoStatusMessage.appendChild(
-          i18n.i18n.getFormatLocalizedString(str_, UIStrings.wcoNotFound, {PH1: displayOverrideText}));
+          uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNotFound, {PH1: displayOverrideText}));
     }
 
     const wcoDocumentationLink = UI.XLink.XLink.create(
         'https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay',
         i18nString(UIStrings.customizePwaTitleBar), undefined, undefined, 'customize-pwa-tittle-bar');
     this.windowControlsSection.appendRow().appendChild(
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.wcoNeedHelpReadMore, {PH1: wcoDocumentationLink}));
+        uiI18n.getFormatLocalizedString(str_, UIStrings.wcoNeedHelpReadMore, {PH1: wcoDocumentationLink}));
 
     this.dispatchEventToListeners(Events.MANIFEST_RENDERED);
   }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -2478,7 +2478,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     this.targetInfo = targetInfo;
     if (this.view) {
       this.view.setTargetInfo(targetInfo);
-      this.view.update();
+      this.view.requestUpdate();
     }
   }
 
@@ -2487,7 +2487,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     this.isWindowClosed = true;
     if (this.view) {
       this.view.setIsWindowClosed(true);
-      this.view.update();
+      this.view.requestUpdate();
     }
   }
 
@@ -2496,7 +2496,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
     if (!this.view) {
       this.view = new OpenedWindowDetailsView(this.targetInfo, this.isWindowClosed);
     } else {
-      this.view.update();
+      this.view.requestUpdate();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('frame-window');
@@ -2525,7 +2525,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
     if (!this.view) {
       this.view = new WorkerDetailsView(this.targetInfo);
     } else {
-      this.view.update();
+      this.view.requestUpdate();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('frame-worker');

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -6,8 +6,6 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -23,8 +21,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheTre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.BackForwardCacheView.BackForwardCacheView>;
+  private view?: ApplicationComponents.BackForwardCacheView.BackForwardCacheView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.backForwardCache), false, 'bfcache');
@@ -39,8 +36,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BackForwardCacheView.BackForwardCacheView());
+      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('back-forward-cache');

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -136,7 +136,7 @@ async function maybeCreateLinkToElementsPanel(
   return linkElement;
 }
 
-export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget {
+export class OpenedWindowDetailsView extends UI.Widget.VBox {
   private targetInfo: Protocol.Target.TargetInfo;
   private isWindowClosed: boolean;
   private readonly reportView: UI.ReportView.ReportView;
@@ -169,10 +169,10 @@ export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget
     this.securitySection.setFieldVisible(i18nString(UIStrings.openerFrame), false);
     this.hasDOMAccessValue = this.securitySection.appendField(i18nString(UIStrings.accessToOpener));
     UI.Tooltip.Tooltip.install(this.hasDOMAccessValue, i18nString(UIStrings.showsWhetherTheOpenedWindowIs));
-    this.update();
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.reportView.setTitle(this.buildTitle());
     this.#urlFieldValue.textContent = this.targetInfo.url;
     this.#urlFieldValue.title = this.targetInfo.url;
@@ -208,7 +208,7 @@ export class OpenedWindowDetailsView extends UI.ThrottledWidget.ThrottledWidget
   }
 }
 
-export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
+export class WorkerDetailsView extends UI.Widget.VBox {
   private readonly targetInfo: Protocol.Target.TargetInfo;
   private readonly reportView: UI.ReportView.ReportView;
   private readonly documentSection: UI.ReportView.Section;
@@ -239,7 +239,7 @@ export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
 
     this.isolationSection = this.reportView.appendSection(i18nString(UIStrings.securityIsolation));
     this.coepPolicy = this.isolationSection.appendField(i18nString(UIStrings.crossoriginEmbedderPolicy));
-    this.update();
+    this.requestUpdate();
   }
 
   workerTypeToString(type: string): Common.UIString.LocalizedString {
@@ -295,7 +295,7 @@ export class WorkerDetailsView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     await this.updateCoopCoepStatus();
   }
 }

package/front_end/panels/application/StorageView.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -146,7 +147,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @implements {SDK.TargetManager.Observer}
  */
-export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
+export class StorageView extends UI.Widget.VBox {
   private pieColors: Map<Protocol.Storage.StorageType, string>;
   private reportView: UI.ReportView.ReportView;
   private target: SDK.Target.Target|null;
@@ -163,9 +164,10 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
   private quotaOverrideEditor: HTMLInputElement;
   private quotaOverrideErrorMessage: HTMLElement;
   private clearButton: Buttons.Button.Button;
+  private readonly throttler = new Common.Throttler.Throttler(1000);
 
   constructor() {
-    super(true, 1000);
+    super({useShadowDom: true});
     this.registerRequiredCSS(storageViewStyles);
 
     this.contentElement.classList.add('clear-storage-container');
@@ -341,7 +343,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideCheckbox.checked = false;
       this.quotaOverrideErrorMessage.textContent = '';
     }
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private updateStorageKey(mainStorageKey: string): void {
@@ -355,7 +357,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideCheckbox.checked = false;
       this.quotaOverrideErrorMessage.textContent = '';
     }
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private async applyQuotaOverrideFromInputField(): Promise<void> {
@@ -489,7 +491,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     if (!this.securityOrigin || !this.target) {
       this.quotaRow.textContent = '';
       this.populatePieChart(0, []);
@@ -509,8 +511,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
     const quota =
         quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
-    const element =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
+    const element = uiI18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
     this.quotaRow.appendChild(element);
     UI.Tooltip.Tooltip.install(
         this.quotaRow,
@@ -542,7 +543,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.populatePieChart(response.usage, slices);
     }
 
-    this.update();
+    void this.throttler.schedule(this.requestUpdate.bind(this));
   }
 
   private populatePieChart(total: number, slices: PerfUI.PieChart.Slice[]): void {