chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/media/PlayerMessagesView.ts

@@ -10,11 +10,13 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import playerMessagesViewStyles from './playerMessagesView.css.js';
 
+const {classMap} = Directives;
+
 const UIStrings = {
   /**
    * @description A context menu item in the Console view of the Console panel.
@@ -104,7 +106,7 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   readonly #defaultTitle: Common.UIString.LocalizedString;
   private readonly customTitle: Common.UIString.LocalizedString;
   private readonly allTitle: Common.UIString.LocalizedString;
-  elementsForItems: WeakMap<SelectableLevel, HTMLElement>;
+  elementsForItems: WeakMap<SelectableLevel, ShadowRoot>;
 
   constructor(items: UI.ListModel.ListModel<SelectableLevel>, view: PlayerMessagesView) {
     this.items = items;
@@ -131,66 +133,86 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   }
 
   populate(): void {
-    this.items.insert(this.items.length, {
+    const defaultLevel = {
       title: this.#defaultTitle,
       overwrite: true,
       stringValue: '',
       value: MessageLevelBitfield.DEFAULT,
+    };
+    this.items.insert(this.items.length, defaultLevel);
+    this.itemMap.set(defaultLevel.value, defaultLevel);
 
-    });
-
-    this.items.insert(this.items.length, {
+    const allLevel = {
       title: this.allTitle,
       overwrite: true,
       stringValue: '',
       value: MessageLevelBitfield.ALL,
+    };
+    this.items.insert(this.items.length, allLevel);
+    this.itemMap.set(allLevel.value, allLevel);
 
-    });
-
-    this.items.insert(this.items.length, {
+    const errorLevel = {
       title: i18nString(UIStrings.error),
       overwrite: false,
       stringValue: 'error',
       value: MessageLevelBitfield.ERROR,
+    };
+    this.items.insert(this.items.length, errorLevel);
+    this.itemMap.set(errorLevel.value, errorLevel);
 
-    });
-
-    this.items.insert(this.items.length, {
+    const warningLevel = {
       title: i18nString(UIStrings.warning),
       overwrite: false,
       stringValue: 'warning',
       value: MessageLevelBitfield.WARNING,
-    });
+    };
+    this.items.insert(this.items.length, warningLevel);
+    this.itemMap.set(warningLevel.value, warningLevel);
 
-    this.items.insert(this.items.length, {
+    const infoLevel = {
       title: i18nString(UIStrings.info),
       overwrite: false,
       stringValue: 'info',
       value: MessageLevelBitfield.INFO,
-    });
+    };
+    this.items.insert(this.items.length, infoLevel);
+    this.itemMap.set(infoLevel.value, infoLevel);
 
-    this.items.insert(this.items.length, {
+    const debugLevel = {
       title: i18nString(UIStrings.debug),
       overwrite: false,
       stringValue: 'debug',
       value: MessageLevelBitfield.DEBUG,
+    };
+    this.items.insert(this.items.length, debugLevel);
+    this.itemMap.set(debugLevel.value, debugLevel);
+  }
 
-    });
+  #renderItem(item: SelectableLevel, target: ShadowRoot|HTMLElement): void {
+    const checked = Boolean(item.value & this.bitFieldValue);
+    // clang-format off
+    render(html`
+      <div class="media-messages-level-dropdown-element">
+        <div class="media-messages-level-dropdown-checkbox">
+          ${!item.overwrite && checked ? html`<div>✓</div>` : nothing}
+        </div>
+        <span class="media-messages-level-dropdown-text">${item.title}</span>
+      </div>
+    `, target, {host: this});
+    // clang-format on
   }
 
   private updateCheckMarks(): void {
     this.hiddenLevels = [];
     for (const [key, item] of this.itemMap) {
       if (!item.overwrite) {
-        const elementForItem = this.elementsForItems.get(item);
-        if (elementForItem?.firstChild) {
-          elementForItem.firstChild.remove();
-        }
-        if (elementForItem && key & this.bitFieldValue) {
-          UI.UIUtils.createTextChild(elementForItem.createChild('div'), '✓');
-        } else {
+        if (!(key & this.bitFieldValue)) {
           this.hiddenLevels.push(item.stringValue);
         }
+        const target = this.elementsForItems.get(item);
+        if (target) {
+          this.#renderItem(item, target);
+        }
       }
     }
   }
@@ -223,12 +245,9 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   createElementForItem(item: SelectableLevel): Element {
     const element = document.createElement('div');
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: playerMessagesViewStyles});
-    const container = shadowRoot.createChild('div', 'media-messages-level-dropdown-element');
-    const checkBox = container.createChild('div', 'media-messages-level-dropdown-checkbox');
-    const text = container.createChild('span', 'media-messages-level-dropdown-text');
-    UI.UIUtils.createTextChild(text, item.title);
-    this.elementsForItems.set(item, checkBox);
+    this.elementsForItems.set(item, shadowRoot);
     this.itemMap.set(item.value, item);
+    this.#renderItem(item, shadowRoot);
     this.updateCheckMarks();
     this.view.regenerateMessageDisplayCss(this.hiddenLevels);
     return element;
@@ -249,10 +268,29 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
   }
 }
 
+interface MessageItem {
+  type: 'message';
+  level: string;
+  message: Protocol.Media.PlayerMessage;
+}
+
+interface ErrorItem {
+  type: 'error';
+  level: 'error';
+  error: Protocol.Media.PlayerError;
+}
+
+type MessageOrErrorItem = MessageItem|ErrorItem;
+
 export class PlayerMessagesView extends UI.Widget.VBox {
   private readonly headerPanel: HTMLElement;
   private readonly bodyPanel: HTMLElement;
   private messageLevelSelector?: MessageLevelSelector;
+  #items: MessageOrErrorItem[] = [];
+  #hiddenLevels: string[] = [];
+  #filterString = '';
+  #dropDownItem?: UI.Toolbar.ToolbarItem;
+  #filterInput?: UI.Toolbar.ToolbarInput;
 
   constructor() {
     super({jslog: `${VisualLogging.pane('messages')}`});
@@ -261,15 +299,9 @@ export class PlayerMessagesView extends UI.Widget.VBox {
     this.headerPanel = this.contentElement.createChild('div', 'media-messages-header');
     this.bodyPanel = this.contentElement.createChild('div', 'media-messages-body');
 
-    this.buildToolbar();
-  }
-
-  private buildToolbar(): void {
-    const toolbar = this.headerPanel.createChild('devtools-toolbar', 'media-messages-toolbar');
-    toolbar.appendText(i18nString(UIStrings.logLevel));
-    toolbar.appendToolbarItem(this.createDropdown());
-    toolbar.appendSeparator();
-    toolbar.appendToolbarItem(this.createFilterInput());
+    this.#dropDownItem = this.createDropdown();
+    this.#filterInput = this.createFilterInput();
+    this.performUpdate();
   }
 
   private createDropdown(): UI.Toolbar.ToolbarItem {
@@ -300,45 +332,92 @@ export class PlayerMessagesView extends UI.Widget.VBox {
     return filterInput;
   }
 
-  regenerateMessageDisplayCss(hiddenLevels: string[]): void {
-    const messages = this.bodyPanel.getElementsByClassName('media-messages-message-container');
-    for (const message of messages) {
-      if (this.matchesHiddenLevels(message, hiddenLevels)) {
-        message.classList.add('media-messages-message-unselected');
-      } else {
-        message.classList.remove('media-messages-message-unselected');
-      }
-    }
+  override performUpdate(): void {
+    this.#renderToolbar();
+    this.#renderMessages();
+  }
+
+  #renderToolbar(): void {
+    // clang-format off
+    render(html`
+      <devtools-toolbar class="media-messages-toolbar">
+        <div class="toolbar-text">${i18nString(UIStrings.logLevel)}</div>
+        ${this.#dropDownItem?.element}
+        <div class="toolbar-divider"></div>
+        ${this.#filterInput?.element}
+      </devtools-toolbar>
+    `, this.headerPanel, {host: this});
+    // clang-format on
+  }
+
+  #renderMessages(): void {
+    // clang-format off
+    render(html`
+      ${this.#items.map(item => {
+        const isUnselected = this.#isLevelHidden(item.level);
+        let isFiltered = false;
+        if (this.#filterString !== '') {
+          if (item.type === 'message') {
+            isFiltered = !item.message.message.includes(this.#filterString);
+          } else {
+            isFiltered = !this.#errorMatchesFilter(item.error, this.#filterString);
+          }
+        }
+        const classes = {
+          'media-messages-message-container': true,
+          [`media-message-${item.level}`]: true,
+          'media-messages-message-unselected': isUnselected,
+          'media-messages-message-filtered': isFiltered,
+        };
+        return html`
+          <div class=${classMap(classes)}>
+            ${item.type === 'message' ? item.message.message : this.renderError(item.error)}
+          </div>
+        `;
+      })}
+    `, this.bodyPanel, {host: this});
+    // clang-format on
+  }
+
+  #isLevelHidden(level: string): boolean {
+    return this.#hiddenLevels.includes(level);
   }
 
-  private matchesHiddenLevels(element: Element, hiddenLevels: string[]): boolean {
-    for (const level of hiddenLevels) {
-      if (element.classList.contains('media-message-' + level)) {
+  #errorMatchesFilter(error: Protocol.Media.PlayerError, filter: string): boolean {
+    if (error.errorType.includes(filter) || error.code.toString().includes(filter)) {
+      return true;
+    }
+    for (const [key, value] of Object.entries(error.data)) {
+      if (`${key}: ${value}`.includes(filter)) {
+        return true;
+      }
+    }
+    for (const stackEntry of error.stack) {
+      if (`${stackEntry.file}:${stackEntry.line}`.includes(filter)) {
+        return true;
+      }
+    }
+    for (const cause of error.cause) {
+      if (this.#errorMatchesFilter(cause, filter)) {
         return true;
       }
     }
     return false;
   }
 
+  regenerateMessageDisplayCss(hiddenLevels: string[]): void {
+    this.#hiddenLevels = hiddenLevels;
+    this.performUpdate();
+  }
+
   private filterByString(userStringData: {data: string}): void {
-    const userString = userStringData.data;
-    const messages = this.bodyPanel.getElementsByClassName('media-messages-message-container');
-
-    for (const message of messages) {
-      if (userString === '') {
-        message.classList.remove('media-messages-message-filtered');
-      } else if (message.textContent?.includes(userString)) {
-        message.classList.remove('media-messages-message-filtered');
-      } else {
-        message.classList.add('media-messages-message-filtered');
-      }
-    }
+    this.#filterString = userStringData.data;
+    this.performUpdate();
   }
 
   addMessage(message: Protocol.Media.PlayerMessage): void {
-    const container =
-        this.bodyPanel.createChild('div', 'media-messages-message-container media-message-' + message.level);
-    UI.UIUtils.createTextChild(container, message.message);
+    this.#items.push({type: 'message', level: message.level, message});
+    this.performUpdate();
   }
 
   private renderError(error: Protocol.Media.PlayerError): LitTemplate {
@@ -393,7 +472,9 @@ export class PlayerMessagesView extends UI.Widget.VBox {
                   <span class="status-error-field-label"
                     >${i18nString(UIStrings.errorCauseLabel)}</span
                   >
-                  ${this.renderError(error.cause[0])}
+                  <div>
+                    ${error.cause.map(cause => this.renderError(cause))}
+                  </div>
                 `
               : nothing
           }
@@ -404,7 +485,7 @@ export class PlayerMessagesView extends UI.Widget.VBox {
   }
 
   addError(error: Protocol.Media.PlayerError): void {
-    const container = this.bodyPanel.createChild('div', 'media-messages-message-container media-message-error');
-    render(this.renderError(error), container);
+    this.#items.push({type: 'error', level: 'error', error});
+    this.performUpdate();
   }
 }

package/front_end/panels/network/BinaryResourceView.ts

@@ -10,68 +10,147 @@ 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 type * as TextUtils from '../../core/text_utils/text_utils.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import binaryResourceViewStyles from './binaryResourceView.css.js';
 
+const {widget} = UI.Widget;
+
 const UIStrings = {
   /**
-   * @description Text in Binary Resource View of the Network panel. Shown to the user as a status
+   * @description Text in binary resource view of the Network panel. Shown to the user as a status
    * message after the current text has been copied to the clipboard. Base64 is a format for encoding
    * data.
    */
   copiedAsBase: 'Copied as `Base64`',
   /**
-   * @description Text in Binary Resource View of the Network panel
+   * @description Option label in binary resource view of the Network panel to view data in hexadecimal (Hex) format.
    */
-  hexViewer: '`Hex` Viewer',
+  hexViewer: '`Hex` viewer',
   /**
-   * @description Text in Binary Resource View of the Network panel. Shown to the user as a status
-   * message after the current text has been copied to the clipboard. Hex is short for hexadecimal,
-   * and is a format for encoding data.
+   * @description Status message in binary resource view of the Network panel after copying text in hexadecimal (Hex) format. Hex is short for hexadecimal.
    */
   copiedAsHex: 'Copied as `Hex`',
   /**
-   * @description Text in Binary Resource View of the Network panel. Shown to the user as a status
+   * @description Text in binary resource view of the Network panel. Shown to the user as a status
    * message after the current text has been copied to the clipboard. UTF-8 is a format for encoding data.
    */
   copiedAsUtf: 'Copied as `UTF-8`',
   /**
-   * @description Screen reader label for a select box that chooses how to display binary data in the Network panel
+   * @description Screen reader label for a select box that chooses how to display binary data in the Network panel.
    */
   binaryViewType: 'Binary view type',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon copy button in the Binary Resource View of the Network panel
+   * @description Tooltip text that appears when hovering over the largeicon copy button in the binary resource view of the Network panel.
    */
   copyToClipboard: 'Copy to clipboard',
   /**
-   * @description A context menu command in the Binary Resource View of the Network panel, for
+   * @description A context menu command in the binary resource view of the Network panel, for
    * copying to the clipboard. Base64 is a format for encoding data.
    */
   copyAsBase: 'Copy as `Base64`',
   /**
-   * @description A context menu command in the Binary Resource View of the Network panel, for copying
-   * to the clipboard. Hex is short for hexadecimal, and is a format for encoding data.
+   * @description A context menu command in the binary resource view of the Network panel, for copying
+   * to the clipboard in hexadecimal (Hex) format. Hex is short for hexadecimal.
    */
   copyAsHex: 'Copy as `Hex`',
   /**
-   * @description A context menu command in the Binary Resource View of the Network panel, for copying
-   *to the clipboard. UTF-8 is a format for encoding data.
+   * @description A context menu command in the binary resource view of the Network panel, for copying
+   * to the clipboard. UTF-8 is a format for encoding data.
    */
   copyAsUtf: 'Copy as `UTF-8`',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/BinaryResourceView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export interface ViewInput {
+  binaryViewObjects: BinaryViewObject[];
+  content: TextUtils.StreamingContentData.StreamingContentData;
+  contentUrl: Platform.DevToolsPath.UrlString;
+  resourceType: Common.ResourceType.ResourceType;
+  activePositionPercentage: number;
+  binaryViewTypeSetting: Common.Settings.Setting<string>;
+  binaryViewTypeChanged: (event: Event) => void;
+  copySelectedViewToClipboard: () => void;
+  copiedText: UI.Toolbar.ToolbarText;
+}
+export type ViewOutput = undefined;
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+const defaultView: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${binaryResourceViewStyles}</style>
+    <div class="vbox flex-auto">
+      ${input.binaryViewObjects.map(
+        obj => obj.type === input.binaryViewTypeSetting.get() ? html`
+          <devtools-widget
+            class="widget vbox flex-auto"
+            ${widget((e: HTMLElement) => {
+              const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
+                  input.content, input.contentUrl, input.resourceType);
+              let view: SourceFrame.ResourceSourceFrame.ResourceSourceFrame|
+                  SourceFrame.StreamingContentHexView.StreamingContentHexView;
+              switch (obj.type) {
+                case 'base64':
+                  view = factory.createBase64View(e);
+                  break;
+                case 'hex':
+                  view = factory.createHexView(e);
+                  break;
+                case 'utf8':
+                  view = factory.createUtf8View(e);
+                  break;
+                default:
+                  throw new Error('Unsupported view type');
+              }
+              if ('setPositionPercentage' in view) {
+                view.setPositionPercentage(input.activePositionPercentage);
+              }
+              return view;
+            })}>
+          </devtools-widget>
+        ` : nothing,
+      )}
+      <devtools-toolbar class="binary-view-toolbar">
+          <select class="toolbar-item" title=${i18nString(UIStrings.binaryViewType)}
+              aria-label=${i18nString(UIStrings.binaryViewType)}
+              @change=${input.binaryViewTypeChanged}>
+            ${input.binaryViewObjects.map(viewObject => html`
+              <option value=${viewObject.type}
+                  ?selected=${viewObject.type === input.binaryViewTypeSetting.get()}
+                  jslog=${VisualLogging.item(viewObject.type).track({click: true})}>${viewObject.label}</option>
+            `)}
+          </select>
+        <devtools-button class="toolbar-button toolbar-item" title=${i18nString(UIStrings.copyToClipboard)}
+            @click=${input.copySelectedViewToClipboard}
+            .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: 'copy',
+              jslogContext: 'copy',
+            } as Buttons.Button.ButtonData}></devtools-button>
+        ${input.copiedText.element}
+      </devtools-toolbar>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class BinaryResourceView extends UI.Widget.VBox {
+  private activePositionPercentage = 0;
   private readonly binaryResourceViewFactory: SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory;
-  private readonly toolbar: UI.Toolbar.Toolbar;
+  private readonly streamingContent: TextUtils.StreamingContentData.StreamingContentData;
+  private readonly contentUrl: Platform.DevToolsPath.UrlString;
+  private readonly resourceType: Common.ResourceType.ResourceType;
   private readonly binaryViewObjects: BinaryViewObject[];
   private binaryViewTypeSetting: Common.Settings.Setting<string>;
-  private binaryViewTypeCombobox: UI.Toolbar.ToolbarComboBox;
-  private readonly copiedText: UI.Toolbar.ToolbarText;
+  readonly copiedText: UI.Toolbar.ToolbarText;
   private addFadeoutSettimeoutId: number|null;
-  private lastView: UI.Widget.Widget|null;
+  private litContainer: HTMLElement;
+  #view = defaultView;
 
   constructor(
       content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
@@ -79,48 +158,34 @@ export class BinaryResourceView extends UI.Widget.VBox {
     super(element);
     this.registerRequiredCSS(binaryResourceViewStyles);
 
+    this.streamingContent = content;
+    this.contentUrl = contentUrl;
+    this.resourceType = resourceType;
+
     this.binaryResourceViewFactory =
         new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(content, contentUrl, resourceType);
 
-    this.toolbar = this.element.createChild('devtools-toolbar', 'binary-view-toolbar');
-
     this.binaryViewObjects = [
       new BinaryViewObject(
           'base64', i18n.i18n.lockedString('Base64'), i18nString(UIStrings.copiedAsBase),
-          this.binaryResourceViewFactory.createBase64View.bind(this.binaryResourceViewFactory),
           this.binaryResourceViewFactory.base64.bind(this.binaryResourceViewFactory)),
       new BinaryViewObject(
           'hex', i18nString(UIStrings.hexViewer), i18nString(UIStrings.copiedAsHex),
-          this.binaryResourceViewFactory.createHexView.bind(this.binaryResourceViewFactory),
           this.binaryResourceViewFactory.hex.bind(this.binaryResourceViewFactory)),
       new BinaryViewObject(
           'utf8', i18n.i18n.lockedString('UTF-8'), i18nString(UIStrings.copiedAsUtf),
-          this.binaryResourceViewFactory.createUtf8View.bind(this.binaryResourceViewFactory),
           this.binaryResourceViewFactory.utf8.bind(this.binaryResourceViewFactory)),
     ];
     this.binaryViewTypeSetting = Common.Settings.Settings.instance().createSetting('binary-view-type', 'hex');
-    this.binaryViewTypeCombobox =
-        new UI.Toolbar.ToolbarComboBox(this.binaryViewTypeChanged.bind(this), i18nString(UIStrings.binaryViewType));
-    for (const viewObject of this.binaryViewObjects) {
-      this.binaryViewTypeCombobox.addOption(
-          this.binaryViewTypeCombobox.createOption(viewObject.label, viewObject.type));
-    }
-    this.toolbar.appendToolbarItem(this.binaryViewTypeCombobox);
-
-    const copyButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyToClipboard), 'copy');
-    copyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      this.copySelectedViewToClipboard();
-    }, this);
-    this.toolbar.appendToolbarItem(copyButton);
 
     this.copiedText = new UI.Toolbar.ToolbarText();
     this.copiedText.element.classList.add('binary-view-copied-text');
-    this.toolbar.appendChild(this.copiedText.element);
 
     this.addFadeoutSettimeoutId = null;
 
-    this.lastView = null;
-    this.updateView();
+    this.litContainer = this.element.createChild('div', 'vbox flex-auto');
+
+    this.performUpdate();
   }
 
   private getCurrentViewObject(): BinaryViewObject|null {
@@ -133,7 +198,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
     return binaryViewObject || null;
   }
 
-  private copySelectedViewToClipboard(): void {
+  copySelectedViewToClipboard(): void {
     const viewObject = this.getCurrentViewObject();
     if (!viewObject) {
       return;
@@ -141,47 +206,48 @@ export class BinaryResourceView extends UI.Widget.VBox {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(viewObject.content());
     this.copiedText.setText(viewObject.copiedMessage);
     this.copiedText.element.classList.remove('fadeout');
-    function addFadeoutClass(this: BinaryResourceView): void {
+    const addFadeoutClass = (): void => {
       this.copiedText.element.classList.add('fadeout');
-    }
+    };
     if (this.addFadeoutSettimeoutId) {
       clearTimeout(this.addFadeoutSettimeoutId);
       this.addFadeoutSettimeoutId = null;
     }
-    this.addFadeoutSettimeoutId = window.setTimeout(addFadeoutClass.bind(this), 2000);
+    this.addFadeoutSettimeoutId = window.setTimeout(addFadeoutClass, 2000);
   }
 
-  private updateView(): void {
-    const newViewObject = this.getCurrentViewObject();
-    if (!newViewObject) {
-      return;
-    }
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      activePositionPercentage: this.activePositionPercentage,
+      content: this.streamingContent,
+      contentUrl: this.contentUrl,
+      resourceType: this.resourceType,
+      binaryViewObjects: this.binaryViewObjects,
+      binaryViewTypeSetting: this.binaryViewTypeSetting,
+      binaryViewTypeChanged: this.binaryViewTypeChanged.bind(this),
+      copySelectedViewToClipboard: this.copySelectedViewToClipboard.bind(this),
+      copiedText: this.copiedText,
+    };
+    this.#view(viewInput, undefined, this.litContainer);
+  }
 
-    const newView = newViewObject.getView();
-    if (newView === this.lastView) {
+  binaryViewTypeChanged(event: Event): void {
+    const newViewType = (event.target as HTMLSelectElement).value;
+    if (this.binaryViewTypeSetting.get() === newViewType) {
       return;
     }
 
-    if (this.lastView) {
-      this.lastView.detach();
+    const currentViewWidget = this.litContainer.querySelector('devtools-widget');
+    if (currentViewWidget) {
+      const view = UI.Widget.Widget.get(currentViewWidget) as SourceFrame.ResourceSourceFrame.ResourceSourceFrame |
+          SourceFrame.StreamingContentHexView.StreamingContentHexView;
+      if (view && 'getPositionPercentage' in view) {
+        this.activePositionPercentage = view.getPositionPercentage();
+      }
     }
-    this.lastView = newView;
-
-    newView.show(this.element, this.toolbar);
-    this.binaryViewTypeCombobox.element.value = this.binaryViewTypeSetting.get();
-  }
 
-  private binaryViewTypeChanged(): void {
-    const selectedOption = (this.binaryViewTypeCombobox.selectedOption());
-    if (!selectedOption) {
-      return;
-    }
-    const newViewType = selectedOption.value;
-    if (this.binaryViewTypeSetting.get() === newViewType) {
-      return;
-    }
     this.binaryViewTypeSetting.set(newViewType);
-    this.updateView();
+    this.performUpdate();
   }
 
   addCopyToContextMenu(contextMenu: UI.ContextMenu.ContextMenu, submenuItemText: string): void {
@@ -208,24 +274,11 @@ export class BinaryViewObject {
   label: string;
   copiedMessage: string;
   content: () => string;
-  private createViewFn: () => UI.Widget.Widget;
-  private view: UI.Widget.Widget|null;
 
-  constructor(
-      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget, content: () => string) {
+  constructor(type: string, label: string, copiedMessage: string, content: () => string) {
     this.type = type;
     this.label = label;
     this.copiedMessage = copiedMessage;
     this.content = content;
-    this.createViewFn = createViewFn;
-
-    this.view = null;
-  }
-
-  getView(): UI.Widget.Widget {
-    if (!this.view) {
-      this.view = this.createViewFn();
-    }
-    return this.view;
   }
 }