chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/application/StorageView.ts

@@ -1,25 +1,30 @@
 // Copyright 2016 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+
+import '../../ui/components/report_view/report_view.js';
+import '../../ui/kit/kit.js';
+import '../../ui/legacy/components/perf_ui/perf_ui.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 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 Buttons from '../../ui/components/buttons/buttons.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Icon, Link} from '../../ui/kit/kit.js';
-import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
-import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
+import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {IndexedDBModel} from './IndexedDBModel.js';
 import {ResourcesPanel} from './ResourcesPanel.js';
 import storageViewStyles from './storageView.css.js';
 
+const {classMap, ifDefined, live, ref} = Directives;
+const {bindToSetting} = UI.UIUtils;
+
 const UIStrings = {
   /**
    * @description Text in the storage view that expresses the amount of used and available storage quota.
@@ -162,49 +167,225 @@ export const storagePieColors: Map<Protocol.Storage.StorageType, string> =
 const str_ = i18n.i18n.registerUIStrings('panels/application/StorageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  subtitle: string;
+  settings: Map<Protocol.Storage.StorageType, Common.Settings.Setting<boolean>>;
+  includeThirdPartyCookiesSetting: Common.Settings.Setting<boolean>;
+  includeThirdPartyCookiesDisabled: boolean;
+  clearing: boolean;
+  quotaUsage: number|null;
+  quotaQuota: number|null;
+  quotaOverrideActive: boolean|null;
+  pieChartSlices: PerfUI.PieChart.Slice[];
+  quotaOverrideEnabled: boolean;
+  quotaOverrideValue: string;
+  quotaOverrideError: string;
+  onClear: () => void;
+  onToggleQuotaOverride: () => void;
+  onQuotaOverrideInput: (value: string) => void;
+  onApplyQuotaOverride: (value: string) => void;
+}
+
+export interface ViewOutput {
+  focusClearButton?: () => void;
+  focusQuotaOverrideEditor?: () => void;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  function renderSettingCheckbox(title: Platform.UIString.LocalizedString, settingName: Protocol.Storage.StorageType,
+                                 className: string): LitTemplate {
+    const setting = input.settings.get(settingName);
+    if (!setting) {
+      throw new Error(`Missing setting for storage type: ${settingName}`);
+    }
+    return html`<devtools-checkbox class=${className} title=${title} ${bindToSetting(setting)}>${
+        title}</devtools-checkbox>`;
+  }
+
+  function renderClearSiteData(): LitTemplate {
+    // clang-format off
+    return html`
+      <div class="report-section" jslog=${VisualLogging.section('clear-storage')}>
+        <devtools-report-section-header role="heading" aria-level="2">
+          ${i18nString(UIStrings.clearSiteData)}
+        </devtools-report-section-header>
+        <devtools-report-section>
+          <div class="clear-site-data-checkboxes-row" role="group" aria-label=${i18nString(UIStrings.clearSiteData)}>
+            <div class="clear-site-data-checkbox-column">
+              ${renderSettingCheckbox(i18nString(UIStrings.cacheStorage), Protocol.Storage.StorageType.Cache_storage, 'cache-storage-checkbox')}
+              ${renderSettingCheckbox(i18nString(UIStrings.fileSystem), Protocol.Storage.StorageType.File_systems, 'file-systems-checkbox')}
+              ${renderSettingCheckbox(i18nString(UIStrings.indexDB), Protocol.Storage.StorageType.Indexeddb, 'indexeddb-checkbox')}
+              ${renderSettingCheckbox(i18nString(UIStrings.localAndSessionStorage), Protocol.Storage.StorageType.Local_storage, 'local-and-session-storage-checkbox')}
+            </div>
+            <div class="clear-site-data-checkbox-column">
+              ${renderSettingCheckbox(i18nString(UIStrings.unregisterServiceWorker), Protocol.Storage.StorageType.Service_workers, 'unregister-service-worker-checkbox')}
+              ${renderSettingCheckbox(i18nString(UIStrings.cookies), Protocol.Storage.StorageType.Cookies, 'cookies-checkbox cookies-row')}
+              <div class="include-third-party-cookies-row">
+                <devtools-checkbox class="third-party-cookies-checkbox"
+                    title=${i18nString(UIStrings.thirdPartyCookies)}
+                    ?disabled=${input.includeThirdPartyCookiesDisabled}
+                    ${bindToSetting(input.includeThirdPartyCookiesSetting)}>
+                  ${i18nString(UIStrings.thirdPartyCookies)}
+                </devtools-checkbox>
+              </div>
+            </div>
+          </div>
+        </devtools-report-section>
+        <devtools-report-section class="clear-selected-button-row">
+          <devtools-button id="storage-view-clear-button"
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              .disabled=${input.clearing}
+              .jslogContext=${'storage.clear-site-data'}
+              @click=${input.onClear}
+              ${ref(e => {
+                output.focusClearButton = e instanceof HTMLElement ? () => e.focus() : undefined;
+              })}
+              >${input.clearing ? i18nString(UIStrings.clearing) : i18nString(UIStrings.clearSelected)}</devtools-button>
+        </devtools-report-section>
+      </div>`;
+    // clang-format on
+  }
+
+  function quotaTooltip(): string|undefined {
+    if (input.quotaUsage === null || input.quotaQuota === null) {
+      return undefined;
+    }
+    return i18nString(UIStrings.storageQuotaUsedWithBytes,
+                      {PH1: input.quotaUsage.toLocaleString(), PH2: input.quotaQuota.toLocaleString()});
+  }
+
+  function renderQuotaRow(): LitTemplate {
+    if (input.quotaUsage === null || input.quotaQuota === null) {
+      return nothing;
+    }
+    const quotaAsString = i18n.ByteUtilities.bytesToString(input.quotaQuota);
+    const usageAsString = i18n.ByteUtilities.bytesToString(input.quotaUsage);
+    const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
+    const quota = input.quotaOverrideActive ? html`<b>${formattedQuotaAsString}</b>` : quotaAsString;
+    // clang-format off
+    return html`
+      ${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota})}
+      ${!input.quotaOverrideActive && input.quotaQuota < 125829120 /* 120 MiB */ ? html`
+        <devtools-icon name="info" class="small" style="color: var(--icon-info)"
+            title=${i18nString(UIStrings.storageQuotaIsLimitedIn)}></devtools-icon>` : nothing}`;
+    // clang-format on
+  }
+
+  function renderUsage(): LitTemplate {
+    const pieChartData: PerfUI.PieChart.PieChartData = {
+      chartName: i18nString(UIStrings.storageUsage),
+      size: 110,
+      formatter: i18n.ByteUtilities.bytesToString,
+      showLegend: true,
+      total: input.quotaUsage ?? 0,
+      slices: input.pieChartSlices,
+    };
+    const onEditorInput = (event: Event): void => {
+      input.onQuotaOverrideInput((event.target as HTMLInputElement).value);
+    };
+    const onEditorKeyUp = (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' && !event.isComposing) {
+        input.onApplyQuotaOverride((event.target as HTMLInputElement).value);
+        event.consume(true);
+      }
+    };
+    const onEditorFocusOut = (event: FocusEvent): void => {
+      input.onApplyQuotaOverride((event.target as HTMLInputElement).value);
+      event.consume(true);
+    };
+    // clang-format off
+    return html`
+      <div class="report-section" jslog=${VisualLogging.section('usage')}>
+        <devtools-report-section-header role="heading" aria-level="2">
+          ${i18nString(UIStrings.usage)}
+        </devtools-report-section-header>
+        <devtools-report-section class="quota-usage-row" jslog=${VisualLogging.item('storage-usage')}
+            title=${ifDefined(quotaTooltip())}>${renderQuotaRow()}</devtools-report-section>
+        <devtools-report-section>
+          <devtools-link href="https://developer.chrome.com/docs/devtools/progressive-web-apps#opaque-responses"
+              jslogcontext="learn-more">${i18nString(UIStrings.learnMore)}</devtools-link>
+        </devtools-report-section>
+        <devtools-report-section class="usage-breakdown-row" jslog=${VisualLogging.item('usage-breakdown')}>
+          <devtools-perf-piechart .data=${pieChartData}></devtools-perf-piechart>
+        </devtools-report-section>
+        <devtools-report-section class="quota-override-row">
+          <devtools-checkbox .checked=${live(input.quotaOverrideEnabled)}
+              title=${i18nString(UIStrings.simulateCustomStorage)}
+              @change=${input.onToggleQuotaOverride}
+              jslog=${VisualLogging.toggle('simulate-custom-quota').track({change: true})}>
+            ${i18nString(UIStrings.simulateCustomStorage)}
+          </devtools-checkbox>
+        </devtools-report-section>
+        <devtools-report-section class=${classMap({hidden: !input.quotaOverrideEnabled})}>
+          <input class="quota-override-notification-editor"
+              aria-label=${i18nString(UIStrings.simulateCustomStorage)}
+              placeholder=${i18nString(UIStrings.pleaseEnterANumber)}
+              .value=${live(input.quotaOverrideValue)}
+              @input=${onEditorInput}
+              @keyup=${onEditorKeyUp}
+              @focusout=${onEditorFocusOut}
+              ${ref(e => {
+                output.focusQuotaOverrideEditor = e instanceof HTMLElement ? () => e.focus() : undefined;
+              })}
+              jslog=${VisualLogging.textField('quota-override').track({change: true})}>
+          <label>${i18nString(UIStrings.mb)}</label>
+        </devtools-report-section>
+        <devtools-report-section><div class="quota-override-error">${input.quotaOverrideError}</div></devtools-report-section>
+      </div>`;
+    // clang-format on
+  }
+
+  // clang-format off
+  render(html`
+    <devtools-report class="clear-storage-header" .data=${{reportTitle: i18nString(UIStrings.storageTitle)}}>
+      ${input.subtitle ? html`<div class="report-subtitle" slot="toolbar">${input.subtitle}</div>` : nothing}
+      ${renderClearSiteData()}
+      <devtools-report-divider></devtools-report-divider>
+      ${renderUsage()}
+    </devtools-report>`, target);
+  // clang-format on
+};
+
 /**
  * @implements {SDK.TargetManager.Observer}
  */
 export class StorageView extends UI.Widget.VBox {
+  readonly #view: View;
+  readonly #viewOutput: ViewOutput = {};
   private pieColors: Map<Protocol.Storage.StorageType, string>;
-  private reportView: UI.ReportView.ReportView;
-  private target: SDK.Target.Target|null;
-  private securityOrigin: string|null;
-  private storageKey: string|null;
+  private target: SDK.Target.Target|null = null;
+  private securityOrigin: string|null = null;
+  private storageKey: string|null = null;
+  private subtitle = '';
   private settings: Map<Protocol.Storage.StorageType, Common.Settings.Setting<boolean>>;
   private includeThirdPartyCookiesSetting: Common.Settings.Setting<boolean>;
-  private includeThirdPartyCookiesCheckbox: UI.UIUtils.CheckboxLabel;
-  private quotaRow: HTMLElement;
-  private quotaUsage: number|null;
-  private quotaQuota: number|null;
-  private quotaOverrideActive: boolean|null;
-  private pieChart: PerfUI.PieChart.PieChart;
-  private previousOverrideFieldValue: string;
-  private quotaOverrideCheckbox: UI.UIUtils.CheckboxLabel;
-  private quotaOverrideControlRow: HTMLElement;
-  private quotaOverrideEditor: HTMLInputElement;
-  private quotaOverrideErrorMessage: HTMLElement;
-  private clearButton: Buttons.Button.Button;
+  private quotaUsage: number|null = null;
+  private quotaQuota: number|null = null;
+  private quotaOverrideActive: boolean|null = null;
+  private pieChartSlices: PerfUI.PieChart.Slice[] = [];
+  private previousOverrideFieldValue = '';
+  private quotaOverrideFieldValue = '';
+  private quotaOverrideEnabled = false;
+  private quotaOverrideError = '';
+  private clearing = false;
+  private clearTimerId?: number;
   private readonly throttler = new Common.Throttler.Throttler(1000);
-
-  constructor() {
-    super({useShadowDom: true});
+  private readonly boundOnCookiesSettingChanged = (event: Common.EventTarget.EventTargetEvent<boolean>): void => {
+    this.onCookiesSettingChanged(event.data);
+  };
+  private readonly boundOnIncludeThirdPartyCookiesSettingChanged =
+      (event: Common.EventTarget.EventTargetEvent<boolean>): void => {
+        this.onIncludeThirdPartyCookiesSettingChanged(event.data);
+      };
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, jslog: `${VisualLogging.pane('clear-storage')}`});
+    this.#view = view;
     this.registerRequiredCSS(storageViewStyles);
-
-    this.contentElement.classList.add('clear-storage-container');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('clear-storage')}`);
     this.pieColors = storagePieColors;
 
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
-    this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.storageTitle));
-    this.reportView.registerRequiredCSS(storageViewStyles);
-
-    this.reportView.element.classList.add('clear-storage-header');
-    this.reportView.show(this.contentElement);
-    this.target = null;
-    this.securityOrigin = null;
-    this.storageKey = null;
-
     this.settings = new Map();
     for (const type of AllStorageTypes) {
       this.settings.set(
@@ -216,156 +397,28 @@ export class StorageView extends UI.Widget.VBox {
     this.includeThirdPartyCookiesSetting =
         Common.Settings.Settings.instance().createSetting('clear-storage-include-third-party-cookies', false);
 
-    const clearSiteData = this.reportView.appendSection(i18nString(UIStrings.clearSiteData));
-    clearSiteData.element.setAttribute('jslog', `${VisualLogging.section('clear-storage')}`);
-
-    const clearSiteDataCheckboxesRow = clearSiteData.appendRow();
-    clearSiteDataCheckboxesRow.classList.add('clear-site-data-checkboxes-row');
-    const leftColumn = clearSiteDataCheckboxesRow.createChild('div', 'clear-site-data-checkbox-column');
-    this.appendSettingCheckbox(leftColumn, i18nString(UIStrings.cacheStorage),
-                               Protocol.Storage.StorageType.Cache_storage, 'cache-storage-checkbox');
-    this.appendSettingCheckbox(leftColumn, i18nString(UIStrings.fileSystem), Protocol.Storage.StorageType.File_systems,
-                               'file-systems-checkbox');
-    this.appendSettingCheckbox(leftColumn, i18nString(UIStrings.indexDB), Protocol.Storage.StorageType.Indexeddb,
-                               'indexeddb-checkbox');
-    this.appendSettingCheckbox(leftColumn, i18nString(UIStrings.localAndSessionStorage),
-                               Protocol.Storage.StorageType.Local_storage, 'local-and-session-storage-checkbox');
-
-    const rightColumn = clearSiteDataCheckboxesRow.createChild('div', 'clear-site-data-checkbox-column');
-    this.appendSettingCheckbox(rightColumn, i18nString(UIStrings.unregisterServiceWorker),
-                               Protocol.Storage.StorageType.Service_workers, 'unregister-service-worker-checkbox');
-    const cookiesCheckbox = this.appendSettingCheckbox(rightColumn, i18nString(UIStrings.cookies),
-                                                       Protocol.Storage.StorageType.Cookies, 'cookies-checkbox');
-    cookiesCheckbox.classList.add('cookies-row');
-
-    const includeThirdPartyCookiesRow = rightColumn.createChild('div', 'include-third-party-cookies-row');
-    this.includeThirdPartyCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.thirdPartyCookies), this.includeThirdPartyCookiesSetting);
-    this.includeThirdPartyCookiesCheckbox.classList.add('third-party-cookies-checkbox');
-    includeThirdPartyCookiesRow.appendChild(this.includeThirdPartyCookiesCheckbox);
-
-    const clearButtonRow = clearSiteData.appendRow();
-    clearButtonRow.classList.add('clear-selected-button-row');
-    this.clearButton = UI.UIUtils.createTextButton(i18nString(UIStrings.clearSelected), this.clear.bind(this),
-                                                   {jslogContext: 'storage.clear-site-data'});
-    this.clearButton.id = 'storage-view-clear-button';
-    clearButtonRow.appendChild(this.clearButton);
-
-    clearSiteData.markFieldListAsGroup();
-
     const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
-    if (cookiesSetting) {
-      cookiesSetting.addChangeListener(event => this.onCookiesSettingChanged(event.data));
-    }
-    this.includeThirdPartyCookiesSetting.addChangeListener(
-        event => this.onIncludeThirdPartyCookiesSettingChanged(event.data));
-    cookiesCheckbox.addEventListener('change', () => {
-      this.syncCheckboxAttributeState(cookiesCheckbox);
-      if (!cookiesCheckbox.checked && this.includeThirdPartyCookiesCheckbox.checked) {
-        this.includeThirdPartyCookiesCheckbox.click();
-      }
-      this.onCookiesSettingChanged(cookiesCheckbox.checked);
-    });
-    this.includeThirdPartyCookiesCheckbox.addEventListener('change', () => {
-      this.syncCheckboxAttributeState(this.includeThirdPartyCookiesCheckbox);
-      this.onIncludeThirdPartyCookiesSettingChanged(this.includeThirdPartyCookiesCheckbox.checked);
-    });
     this.onCookiesSettingChanged(Boolean(cookiesSetting?.get()));
-
-    const quota = this.reportView.appendSection(i18nString(UIStrings.usage));
-    quota.element.setAttribute('jslog', `${VisualLogging.section('usage')}`);
-    this.quotaRow = quota.appendSelectableRow();
-    this.quotaRow.classList.add('quota-usage-row');
-    this.quotaRow.setAttribute('jslog', `${VisualLogging.item('storage-usage')}`);
-    const learnMoreRow = quota.appendRow();
-    const learnMore = Link.create(
-        'https://developer.chrome.com/docs/devtools/progressive-web-apps#opaque-responses',
-        i18nString(UIStrings.learnMore), undefined, 'learn-more');
-    learnMoreRow.appendChild(learnMore);
-    this.quotaUsage = null;
-    this.quotaQuota = null;
-    this.quotaOverrideActive = null;
-    this.pieChart = new PerfUI.PieChart.PieChart();
-    this.populatePieChart(0, []);
-    const usageBreakdownRow = quota.appendRow();
-    usageBreakdownRow.classList.add('usage-breakdown-row');
-    usageBreakdownRow.setAttribute('jslog', `${VisualLogging.item('usage-breakdown')}`);
-    usageBreakdownRow.appendChild(this.pieChart);
-
-    this.previousOverrideFieldValue = '';
-    const quotaOverrideCheckboxRow = quota.appendRow();
-    quotaOverrideCheckboxRow.classList.add('quota-override-row');
-    this.quotaOverrideCheckbox = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.simulateCustomStorage), false);
-    this.quotaOverrideCheckbox.setAttribute(
-        'jslog', `${VisualLogging.toggle('simulate-custom-quota').track({change: true})}`);
-    quotaOverrideCheckboxRow.appendChild(this.quotaOverrideCheckbox);
-    this.quotaOverrideCheckbox.addEventListener('click', this.onClickCheckbox.bind(this), false);
-    this.quotaOverrideControlRow = quota.appendRow();
-    this.quotaOverrideEditor = this.quotaOverrideControlRow.createChild('input', 'quota-override-notification-editor');
-    this.quotaOverrideEditor.setAttribute('placeholder', i18nString(UIStrings.pleaseEnterANumber));
-    this.quotaOverrideEditor.setAttribute(
-        'jslog', `${VisualLogging.textField('quota-override').track({change: true})}`);
-    this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb)));
-    this.quotaOverrideControlRow.classList.add('hidden');
-    this.quotaOverrideEditor.addEventListener('keyup', event => {
-      if (event.key === 'Enter') {
-        void this.applyQuotaOverrideFromInputField();
-        event.consume(true);
-      }
-    });
-    this.quotaOverrideEditor.addEventListener('focusout', event => {
-      void this.applyQuotaOverrideFromInputField();
-      event.consume(true);
-    });
-
-    const errorMessageRow = quota.appendRow();
-    this.quotaOverrideErrorMessage = errorMessageRow.createChild('div', 'quota-override-error');
-
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
   }
 
-  private appendSettingCheckbox(container: HTMLElement, title: Platform.UIString.LocalizedString,
-                                settingName: Protocol.Storage.StorageType,
-                                className?: string): UI.UIUtils.CheckboxLabel {
-    const setting = this.settings.get(settingName);
-    if (!setting) {
-      throw new Error(`Missing setting for storage type: ${settingName}`);
-    }
-    const checkbox = SettingsUI.SettingsUI.createSettingCheckbox(title, setting);
-    if (className) {
-      checkbox.classList.add(className);
-    }
-    container.appendChild(checkbox);
-    return checkbox;
-  }
-
   private onCookiesSettingChanged(cookiesEnabled: boolean): void {
-    if (!cookiesEnabled) {
-      this.includeThirdPartyCookiesCheckbox.toggleAttribute('checked', true);
-      this.includeThirdPartyCookiesCheckbox.toggleAttribute('checked', false);
-      if (this.includeThirdPartyCookiesSetting.get()) {
-        this.includeThirdPartyCookiesSetting.set(false);
-      }
+    // Unchecking general cookies clearing must also uncheck third-party cookies.
+    if (!cookiesEnabled && this.includeThirdPartyCookiesSetting.get()) {
+      this.includeThirdPartyCookiesSetting.set(false);
+      return;
     }
-    this.updateThirdPartyCookiesCheckboxState();
+    this.requestUpdate();
   }
 
   private onIncludeThirdPartyCookiesSettingChanged(includeThirdPartyCookiesEnabled: boolean): void {
     const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
+    // Checking third-party cookies requires general cookies clearing to be enabled.
     if (includeThirdPartyCookiesEnabled && cookiesSetting && !cookiesSetting.get()) {
       cookiesSetting.set(true);
       return;
     }
-    this.updateThirdPartyCookiesCheckboxState();
-  }
-
-  private syncCheckboxAttributeState(checkbox: UI.UIUtils.CheckboxLabel): void {
-    checkbox.toggleAttribute('checked', checkbox.checked);
-  }
-
-  private updateThirdPartyCookiesCheckboxState(): void {
-    const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
-    this.includeThirdPartyCookiesCheckbox.disabled = !cookiesSetting?.get();
+    this.requestUpdate();
   }
 
   targetAdded(target: SDK.Target.Target): void {
@@ -400,6 +453,25 @@ export class StorageView extends UI.Widget.VBox {
         SDK.StorageKeyManager.Events.MAIN_STORAGE_KEY_CHANGED, this.storageKeyChanged, this);
   }
 
+  override willHide(): void {
+    super.willHide();
+    const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
+    cookiesSetting?.removeChangeListener(this.boundOnCookiesSettingChanged);
+    this.includeThirdPartyCookiesSetting.removeChangeListener(this.boundOnIncludeThirdPartyCookiesSettingChanged);
+  }
+
+  override wasHidden(): void {
+    super.wasHidden();
+    if (this.clearTimerId !== undefined) {
+      window.clearTimeout(this.clearTimerId);
+      this.clearTimerId = undefined;
+    }
+    if (this.clearing) {
+      this.clearing = false;
+      this.requestUpdate();
+    }
+  }
+
   private originChanged(
       event: Common.EventTarget.EventTargetEvent<SDK.SecurityOriginManager.MainSecurityOriginChangedEvent>): void {
     const {mainSecurityOrigin, unreachableMainSecurityOrigin} = event.data;
@@ -416,69 +488,74 @@ export class StorageView extends UI.Widget.VBox {
     const oldOrigin = this.securityOrigin;
     if (unreachableMainOrigin) {
       this.securityOrigin = unreachableMainOrigin;
-      this.reportView.setSubtitle(i18nString(UIStrings.sFailedToLoad, {PH1: unreachableMainOrigin}));
+      this.subtitle = i18nString(UIStrings.sFailedToLoad, {PH1: unreachableMainOrigin});
     } else {
       this.securityOrigin = mainOrigin;
-      this.reportView.setSubtitle(mainOrigin);
+      this.subtitle = mainOrigin;
     }
 
     if (oldOrigin !== this.securityOrigin) {
-      this.quotaOverrideControlRow.classList.add('hidden');
-      this.quotaOverrideCheckbox.checked = false;
-      this.quotaOverrideErrorMessage.textContent = '';
+      this.quotaOverrideEnabled = false;
+      this.quotaOverrideError = '';
       this.quotaUsage = null;
       this.quotaQuota = null;
       this.quotaOverrideActive = null;
+      this.pieChartSlices = [];
     }
-    void this.performUpdate();
+    this.requestUpdate();
+    void this.refreshUsageAndQuota();
   }
 
   private updateStorageKey(mainStorageKey: string): void {
     const oldStorageKey = this.storageKey;
 
     this.storageKey = mainStorageKey;
-    this.reportView.setSubtitle(mainStorageKey);
+    this.subtitle = mainStorageKey;
 
     if (oldStorageKey !== this.storageKey) {
-      this.quotaOverrideControlRow.classList.add('hidden');
-      this.quotaOverrideCheckbox.checked = false;
-      this.quotaOverrideErrorMessage.textContent = '';
+      this.quotaOverrideEnabled = false;
+      this.quotaOverrideError = '';
     }
-    void this.performUpdate();
+    this.requestUpdate();
   }
 
-  private async applyQuotaOverrideFromInputField(): Promise<void> {
+  private async applyQuotaOverrideFromInputField(editorString: string): Promise<void> {
+    this.quotaOverrideFieldValue = editorString;
     if (!this.target || !this.securityOrigin) {
-      this.quotaOverrideErrorMessage.textContent = i18nString(UIStrings.internalError);
+      this.quotaOverrideError = i18nString(UIStrings.internalError);
+      this.requestUpdate();
       return;
     }
-    this.quotaOverrideErrorMessage.textContent = '';
-    const editorString = this.quotaOverrideEditor.value;
+    this.quotaOverrideError = '';
     if (editorString === '') {
       await this.clearQuotaForOrigin(this.target, this.securityOrigin);
       this.previousOverrideFieldValue = '';
+      this.requestUpdate();
       return;
     }
     const quota = parseFloat(editorString);
     if (!Number.isFinite(quota)) {
-      this.quotaOverrideErrorMessage.textContent = i18nString(UIStrings.pleaseEnterANumber);
+      this.quotaOverrideError = i18nString(UIStrings.pleaseEnterANumber);
+      this.requestUpdate();
       return;
     }
     if (quota < 0) {
-      this.quotaOverrideErrorMessage.textContent = i18nString(UIStrings.numberMustBeNonNegative);
+      this.quotaOverrideError = i18nString(UIStrings.numberMustBeNonNegative);
+      this.requestUpdate();
       return;
     }
     const cutoff = 9_000_000_000_000;
     if (quota >= cutoff) {
-      this.quotaOverrideErrorMessage.textContent =
-          i18nString(UIStrings.numberMustBeSmaller, {PH1: cutoff.toLocaleString()});
+      this.quotaOverrideError = i18nString(UIStrings.numberMustBeSmaller, {PH1: cutoff.toLocaleString()});
+      this.requestUpdate();
       return;
     }
     const bytesPerMB = 1000 * 1000;
     const quotaInBytes = Math.round(quota * bytesPerMB);
     const quotaFieldValue = `${quotaInBytes / bytesPerMB}`;
-    this.quotaOverrideEditor.value = quotaFieldValue;
     this.previousOverrideFieldValue = quotaFieldValue;
+    this.quotaOverrideFieldValue = quotaFieldValue;
+    this.requestUpdate();
     await this.target.storageAgent().invoke_overrideQuotaForOrigin(
         {origin: this.securityOrigin, quotaSize: quotaInBytes});
   }
@@ -488,16 +565,19 @@ export class StorageView extends UI.Widget.VBox {
   }
 
   private async onClickCheckbox(): Promise<void> {
-    if (this.quotaOverrideControlRow.classList.contains('hidden')) {
-      this.quotaOverrideControlRow.classList.remove('hidden');
-      this.quotaOverrideCheckbox.checked = true;
-      this.quotaOverrideEditor.value = this.previousOverrideFieldValue;
-      window.setTimeout(() => this.quotaOverrideEditor.focus(), 500);
-    } else if (this.target && this.securityOrigin) {
-      this.quotaOverrideControlRow.classList.add('hidden');
-      this.quotaOverrideCheckbox.checked = false;
-      await this.clearQuotaForOrigin(this.target, this.securityOrigin);
-      this.quotaOverrideErrorMessage.textContent = '';
+    if (!this.quotaOverrideEnabled) {
+      this.quotaOverrideEnabled = true;
+      this.quotaOverrideFieldValue = this.previousOverrideFieldValue;
+      this.requestUpdate();
+      await this.updateComplete;
+      this.#viewOutput.focusQuotaOverrideEditor?.();
+    } else {
+      this.quotaOverrideEnabled = false;
+      this.quotaOverrideError = '';
+      this.requestUpdate();
+      if (this.target && this.securityOrigin) {
+        await this.clearQuotaForOrigin(this.target, this.securityOrigin);
+      }
     }
   }
 
@@ -519,13 +599,17 @@ export class StorageView extends UI.Widget.VBox {
           this.target, this.storageKey, this.securityOrigin, selectedStorageTypes, includeThirdPartyCookies);
     }
 
-    this.clearButton.disabled = true;
-    const label = this.clearButton.textContent;
-    this.clearButton.textContent = i18nString(UIStrings.clearing);
-    window.setTimeout(() => {
-      this.clearButton.disabled = false;
-      this.clearButton.textContent = label;
-      this.clearButton.focus();
+    this.clearing = true;
+    this.requestUpdate();
+    window.clearTimeout(this.clearTimerId);
+    this.clearTimerId = window.setTimeout(async () => {
+      this.clearTimerId = undefined;
+      this.clearing = false;
+      this.requestUpdate();
+      await this.updateComplete;
+      if (this.isShowing()) {
+        this.#viewOutput.focusClearButton?.();
+      }
     }, 500);
 
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.SiteDataCleared));
@@ -578,24 +662,33 @@ export class StorageView extends UI.Widget.VBox {
     }
   }
 
-  override async performUpdate(): Promise<void> {
+  private async refreshUsageAndQuota(): Promise<void> {
+    if (!this.isShowing()) {
+      return;
+    }
     if (!this.securityOrigin || !this.target) {
-      this.quotaRow.textContent = '';
       this.quotaUsage = null;
       this.quotaQuota = null;
       this.quotaOverrideActive = null;
-      this.populatePieChart(0, []);
+      this.pieChartSlices = [];
+      this.requestUpdate();
       return;
     }
 
     const securityOrigin = this.securityOrigin;
     const response = await this.target.storageAgent().invoke_getUsageAndQuota({origin: securityOrigin});
+    if (this.securityOrigin !== securityOrigin) {
+      return;
+    }
     if (response.getError()) {
-      this.quotaRow.textContent = '';
       this.quotaUsage = null;
       this.quotaQuota = null;
       this.quotaOverrideActive = null;
-      this.populatePieChart(0, []);
+      this.pieChartSlices = [];
+      this.requestUpdate();
+      if (this.isShowing()) {
+        void this.throttler.schedule(() => this.refreshUsageAndQuota());
+      }
       return;
     }
 
@@ -608,35 +701,6 @@ export class StorageView extends UI.Widget.VBox {
       this.quotaQuota = response.quota;
       this.quotaOverrideActive = response.overrideActive;
 
-      this.quotaRow.textContent = '';
-      const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
-      const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
-      const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
-
-      let quota: string|HTMLElement = quotaAsString;
-      if (response.overrideActive) {
-        const element = document.createElement('b');
-        element.textContent = formattedQuotaAsString;
-        quota = element;
-      }
-
-      const element =
-          uiI18n.getFormatLocalizedString(str_, UIStrings.storageQuotaUsed, {PH1: usageAsString, PH2: quota});
-      this.quotaRow.appendChild(element);
-      UI.Tooltip.Tooltip.install(
-          this.quotaRow,
-          i18nString(UIStrings.storageQuotaUsedWithBytes,
-                     {PH1: response.usage.toLocaleString(), PH2: response.quota.toLocaleString()}));
-
-      if (!response.overrideActive && response.quota < 125829120) {  // 120 MiB
-        const icon = new Icon();
-        icon.name = 'info';
-        icon.style.color = 'var(--icon-info)';
-        icon.classList.add('small');
-        UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.storageQuotaIsLimitedIn));
-        this.quotaRow.appendChild(icon);
-      }
-
       if (usageChanged) {
         const slices: PerfUI.PieChart.Slice[] = [];
         for (const usageForType of response.usageBreakdown.sort((a, b) => b.usage - a.usage)) {
@@ -648,22 +712,52 @@ export class StorageView extends UI.Widget.VBox {
           const color = this.pieColors.get(usageForType.storageType) || '#ccc';
           slices.push({value, color, title});
         }
-        this.populatePieChart(response.usage, slices);
+        this.pieChartSlices = slices;
       }
+      this.requestUpdate();
     }
 
-    void this.throttler.schedule(this.requestUpdate.bind(this));
+    if (this.isShowing()) {
+      void this.throttler.schedule(() => this.refreshUsageAndQuota());
+    }
   }
 
-  private populatePieChart(total: number, slices: PerfUI.PieChart.Slice[]): void {
-    this.pieChart.data = {
-      chartName: i18nString(UIStrings.storageUsage),
-      size: 110,
-      formatter: i18n.ByteUtilities.bytesToString,
-      showLegend: true,
-      total,
-      slices,
-    };
+  override wasShown(): void {
+    super.wasShown();
+    const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
+    cookiesSetting?.addChangeListener(this.boundOnCookiesSettingChanged);
+    this.includeThirdPartyCookiesSetting.addChangeListener(this.boundOnIncludeThirdPartyCookiesSettingChanged);
+    this.onCookiesSettingChanged(Boolean(cookiesSetting?.get()));
+    void this.refreshUsageAndQuota();
+  }
+
+  override performUpdate(): void {
+    const cookiesSetting = this.settings.get(Protocol.Storage.StorageType.Cookies);
+    this.#view({
+      subtitle: this.subtitle,
+      settings: this.settings,
+      includeThirdPartyCookiesSetting: this.includeThirdPartyCookiesSetting,
+      includeThirdPartyCookiesDisabled: !cookiesSetting?.get(),
+      clearing: this.clearing,
+      quotaUsage: this.quotaUsage,
+      quotaQuota: this.quotaQuota,
+      quotaOverrideActive: this.quotaOverrideActive,
+      pieChartSlices: this.pieChartSlices,
+      quotaOverrideEnabled: this.quotaOverrideEnabled,
+      quotaOverrideValue: this.quotaOverrideFieldValue,
+      quotaOverrideError: this.quotaOverrideError,
+      onClear: () => this.clear(),
+      onToggleQuotaOverride: () => {
+        void this.onClickCheckbox();
+      },
+      onQuotaOverrideInput: value => {
+        this.quotaOverrideFieldValue = value;
+      },
+      onApplyQuotaOverride: value => {
+        void this.applyQuotaOverrideFromInputField(value);
+      },
+    },
+               this.#viewOutput, this.contentElement);
   }
 
   static getStorageTypeName(type: Protocol.Storage.StorageType): string {