chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 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/legacy/legacy.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -665,46 +664,63 @@ export class CommandAutocompleteSuggestionProvider {
   }
 }
 
-export class InfoWidget extends UI.Widget.VBox {
-  private readonly tabbedPane: UI.TabbedPane.TabbedPane;
+interface InfoWidgetViewInput {
   request: Record<string, unknown>|undefined;
   response: Record<string, unknown>|undefined;
   type: 'sent'|'received'|undefined;
   selectedTab: 'request'|'response'|undefined;
-  constructor(element: HTMLElement) {
+}
+
+type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HTMLElement) => void;
+
+const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
+  // clang-format off
+  render(html`<devtools-widget .widgetConfig=${widgetConfig(UI.TabbedPane.TabbedPane, {
+    tabs: [
+      {
+        id: 'request',
+        title: i18nString(UIStrings.request),
+        view: input.type === undefined ?
+            new UI.EmptyWidget.EmptyWidget(
+                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
+            SourceFrame.JSONView.JSONView.createViewSync(input.request || null),
+        enabled: input.type === 'sent',
+        selected: input.selectedTab === 'request',
+      },
+      {
+        id: 'response',
+        title: i18nString(UIStrings.response),
+        view: input.type === undefined ?
+            new UI.EmptyWidget.EmptyWidget(
+                i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)) :
+            SourceFrame.JSONView.JSONView.createViewSync(input.response || null),
+        selected: input.selectedTab === 'response',
+      }
+    ]})}>
+  </devtools-widget>`, target);
+  // clang-format on
+};
+
+export class InfoWidget extends UI.Widget.VBox {
+  #view: InfoWidgetView;
+  request: Record<string, unknown>|undefined;
+  response: Record<string, unknown>|undefined;
+  type: 'sent'|'received'|undefined;
+  constructor(element: HTMLElement, view = INFO_WIDGET_VIEW) {
     super(element);
-    this.tabbedPane = new UI.TabbedPane.TabbedPane();
-    this.tabbedPane.appendTab('request', i18nString(UIStrings.request), new UI.Widget.Widget());
-    this.tabbedPane.appendTab('response', i18nString(UIStrings.response), new UI.Widget.Widget());
-    this.tabbedPane.show(this.contentElement);
-    this.tabbedPane.selectTab('response');
-    this.request = {};
+    this.#view = view;
+    this.requestUpdate();
   }
 
   override performUpdate(): void {
-    if (!this.request && !this.response) {
-      this.tabbedPane.changeTabView(
-          'request',
-          new UI.EmptyWidget.EmptyWidget(
-              i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)));
-      this.tabbedPane.changeTabView(
-          'response',
-          new UI.EmptyWidget.EmptyWidget(
-              i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectAMessageToView)));
-      return;
-    }
-
-    const requestEnabled = this.type && this.type === 'sent';
-    this.tabbedPane.setTabEnabled('request', Boolean(requestEnabled));
-    if (!requestEnabled) {
-      this.tabbedPane.selectTab('response');
-    }
-
-    this.tabbedPane.changeTabView('request', SourceFrame.JSONView.JSONView.createViewSync(this.request || null));
-    this.tabbedPane.changeTabView('response', SourceFrame.JSONView.JSONView.createViewSync(this.response || null));
-    if (this.selectedTab) {
-      this.tabbedPane.selectTab(this.selectedTab);
-    }
+    this.#view(
+        {
+          request: this.request,
+          response: this.response,
+          type: this.type,
+          selectedTab: this.type !== 'sent' ? 'response' : undefined,
+        },
+        undefined, this.contentElement);
   }
 }
 

package/front_end/panels/recorder/RecorderController.ts

@@ -23,7 +23,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
 import type {AddBreakpointEvent, RemoveBreakpointEvent} from './components/StepView.js';
-import type * as Controllers from './controllers/controllers.js';
 import * as Converters from './converters/converters.js';
 import * as Extensions from './extensions/extensions.js';
 import * as Models from './models/models.js';
@@ -982,7 +981,7 @@ export class RecorderController extends LitElement {
     await this.updateComplete;
     // FIXME: call a method on the recording view widget.
     await this.#recordingView?.updateComplete;
-    this.#recordingView?.contentElement?.querySelector('.section:last-child devtools-step-view:last-of-type')
+    this.#recordingView?.contentElement?.querySelector('.section:last-child .step-view-widget:last-of-type')
         ?.shadowRoot?.querySelector<HTMLElement>('.action')
         ?.click();
   }
@@ -1224,7 +1223,7 @@ export class RecorderController extends LitElement {
             titleChanged: this.#handleRecordingTitleChanged.bind(this),
           })}
           @requestselectorattribute=${(
-            event: Controllers.SelectorPicker.RequestSelectorAttributeEvent,
+            event: Components.SelectorPicker.RequestSelectorAttributeEvent,
           ) => {
             event.send(this.currentRecording?.flow.selectorAttribute);
           }}

package/front_end/panels/recorder/components/ControlButton.ts

@@ -2,51 +2,85 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import controlButtonStyles from './controlButton.css.js';
 
-const {html, Decorators, LitElement} = Lit;
-const {customElement, property} = Decorators;
+const {html} = Lit;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-control-button': ControlButton;
-  }
+export interface ViewInput {
+  label: string;
+  shape: string;
+  disabled: boolean;
+  onClick: (event: Event) => void;
 }
 
-@customElement('devtools-control-button')
-export class ControlButton extends LitElement {
-  @property() declare label: string;
-  @property() declare shape: string;
-  @property({type: Boolean}) declare disabled: boolean;
-
-  constructor() {
-    super();
-    this.label = '';
-    this.shape = 'square';
-    this.disabled = false;
-  }
-
-  #handleClickEvent = (event: Event): void => {
-    if (this.disabled) {
+export const DEFAULT_VIEW = (input: ViewInput, _output: unknown, target: HTMLElement): void => {
+  const {label, shape, disabled, onClick} = input;
+  const handleClickEvent = (event: Event): void => {
+    if (disabled) {
       event.stopPropagation();
       event.preventDefault();
+    } else {
+      onClick(event);
     }
   };
+  // clang-format off
+  Lit.render(html`
+    <style>${controlButtonStyles}</style>
+    <button
+        @click=${handleClickEvent}
+        .disabled=${disabled}
+        class="control">
+      <div class="icon ${shape}"></div>
+      <div class="label">${label}</div>
+    </button>
+  `, target);
+  // clang-format on
+};
+
+export class ControlButton extends UI.Widget.Widget {
+  #label = '';
+  #shape = 'square';
+  #disabled = false;
+  #onClick: (event: Event) => void = () => {};
+
+  #view: typeof DEFAULT_VIEW;
+
+  constructor(element?: HTMLElement, view?: typeof DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['flex-none']});
+    this.#view = view || DEFAULT_VIEW;
+  }
+
+  set label(label: string) {
+    this.#label = label;
+    this.requestUpdate();
+  }
+
+  set shape(shape: string) {
+    this.#shape = shape;
+    this.requestUpdate();
+  }
+
+  set disabled(disabled: boolean) {
+    this.#disabled = disabled;
+    this.requestUpdate();
+  }
+
+  set onClick(onClick: (event: Event) => void) {
+    this.#onClick = onClick;
+    this.requestUpdate();
+  }
 
-  protected override render(): unknown {
-    // clang-format off
-    return html`
-            <style>${controlButtonStyles}</style>
-            <button
-                @click=${this.#handleClickEvent}
-                .disabled=${this.disabled}
-                class="control">
-              <div class="icon ${this.shape}"></div>
-              <div class="label">${this.label}</div>
-            </button>
-        `;
-    // clang-format on
+  override performUpdate(): void {
+    this.#view(
+        {
+          label: this.#label,
+          shape: this.#shape,
+          disabled: this.#disabled,
+          onClick: this.#onClick,
+        },
+        {}, this.contentElement);
   }
 }

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
-import './ControlButton.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Badges from '../../../models/badges/badges.js';
@@ -15,6 +14,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Models from '../models/models.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
+import {ControlButton} from './ControlButton.js';
 import createRecordingViewStyles from './createRecordingView.css.js';
 
 const {html, Directives: {ref, createRef, repeat}} = Lit;
@@ -267,16 +267,19 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       </div>
       <div class="footer">
         <div class="controls">
-          <devtools-control-button
-            @click=${onRecordingStarted}
-            .label=${i18nString(UIStrings.startRecording)}
-            .shape=${'circle'}
+          <devtools-widget
+            class="control-button"
+            .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+              label: i18nString(UIStrings.startRecording),
+              shape: 'circle',
+              onClick: onRecordingStarted,
+            })}
             jslog=${VisualLogging.action(Actions.RecorderActions.START_RECORDING).track({click: true})}
             title=${Models.Tooltip.getTooltipForActions(
               i18nString(UIStrings.startRecording),
               Actions.RecorderActions.START_RECORDING,
             )}
-          ></devtools-control-button>
+          ></devtools-widget>
         </div>
       </div>
     `,

package/front_end/panels/recorder/components/ExtensionView.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as PublicExtensions from '../../../models/extensions/extensions.js';

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';

package/front_end/panels/recorder/components/RecordingView.ts

@@ -2,10 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './ExtensionView.js';
-import './ControlButton.js';
-import './ReplaySection.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -29,14 +27,15 @@ import * as Models from '../models/models.js';
 import {PlayRecordingSpeed} from '../models/RecordingPlayer.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
 
+import {ControlButton} from './ControlButton.js';
 import recordingViewStyles from './recordingView.css.js';
-import type {ReplaySectionData, StartReplayEvent} from './ReplaySection.js';
+import {ReplaySection} from './ReplaySection.js';
 import {
   type CopyStepEvent,
   State,
-  type StepView,
-  type StepViewData,
+  StepView,
 } from './StepView.js';
+
 const {html} = Lit;
 
 const UIStrings = {
@@ -549,17 +548,15 @@ function renderReplayOrAbortButton(input: ViewInput): Lit.LitTemplate {
   }
 
   // clang-format off
-    return html`<devtools-replay-section
-        .data=${
-          {
-            settings: input.recorderSettings,
-            replayExtensions: input.replayExtensions,
-          } as ReplaySectionData
-        }
-        .disabled=${input.replayState.isPlaying}
-        @startreplay=${input.onTogglePlaying}
+    return html`<devtools-widget
+        .widgetConfig=${UI.Widget.widgetConfig(ReplaySection, {
+          settings: input.recorderSettings,
+          replayExtensions: input.replayExtensions,
+          onStartReplay: input.onTogglePlaying,
+          disabled: input.replayState.isPlaying,
+        })}
         >
-      </devtools-replay-section>`;
+      </devtools-widget>`;
   // clang-format on
 }
 
@@ -597,65 +594,61 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
               </div>
               <div class="content">
                 <div class="steps">
-                  <devtools-step-view
-                    @click=${input.onStepClick}
-                    @mouseover=${input.onStepHover}
-                    .data=${
-                      {
-                        section,
-                        state: input.getSectionState(section),
-                        isStartOfGroup: true,
-                        isEndOfGroup: section.steps.length === 0,
-                        isFirstSection: i === 0,
-                        isLastSection:
-                          i === input.sections.length - 1 &&
-                          section.steps.length === 0,
-                        isSelected:
-                          input.selectedStep === (section.causingStep || null),
-                        sectionIndex: i,
-                        isRecording: input.isRecording,
-                        isPlaying: input.replayState.isPlaying,
-                        error:
-                          input.getSectionState(section) === State.ERROR
-                            ? input.currentError
-                            : undefined,
-                        hasBreakpoint: false,
-                        removable: input.recording.steps.length > 1 && section.causingStep,
-                      } as StepViewData
-                    }
+                  <devtools-widget
+                    .widgetConfig=${UI.Widget.widgetConfig(StepView, {
+                      section,
+                      state: input.getSectionState(section),
+                      isStartOfGroup: true,
+                      isEndOfGroup: section.steps.length === 0,
+                      isFirstSection: i === 0,
+                      isLastSection:
+                        i === input.sections.length - 1 &&
+                        section.steps.length === 0,
+                      isSelected:
+                        input.selectedStep === (section.causingStep || null),
+                      sectionIndex: i,
+                      isRecording: input.isRecording,
+                      isPlaying: input.replayState.isPlaying,
+                      error:
+                        input.getSectionState(section) === State.ERROR
+                          ? (input.currentError ?? undefined)
+                          : undefined,
+                      hasBreakpoint: false,
+                      removable: input.recording.steps.length > 1 && Boolean(section.causingStep),
+                      onStepClick: input.onStepClick,
+                      onStepHover: input.onStepHover,
+                    })}
                   >
-                  </devtools-step-view>
+                  </devtools-widget>
                   ${section.steps.map(step => {
                     const stepIndex = input.recording.steps.indexOf(step);
                     return html`
-                      <devtools-step-view
-                      @click=${input.onStepClick}
-                      @mouseover=${input.onStepHover}
+                      <devtools-widget
                       @copystep=${input.onCopyStep}
-                      .data=${
-                        {
-                          step,
-                          state: input.getStepState(step),
-                          error: input.currentStep === step ? input.currentError : undefined,
-                          isFirstSection: false,
-                          isLastSection:
-                            i === input.sections.length - 1 && input.recording.steps[input.recording.steps.length - 1] === step,
-                          isStartOfGroup: false,
-                          isEndOfGroup: section.steps[section.steps.length - 1] === step,
-                          stepIndex,
-                          hasBreakpoint: input.breakpointIndexes.has(stepIndex),
-                          sectionIndex: -1,
-                          isRecording: input.isRecording,
-                          isPlaying: input.replayState.isPlaying,
-                          removable: input.recording.steps.length > 1,
-                          builtInConverters: input.builtInConverters,
-                          extensionConverters: input.extensionConverters,
-                          isSelected: input.selectedStep === step,
-                          recorderSettings: input.recorderSettings,
-                        } as StepViewData
-                      }
+                      .widgetConfig=${UI.Widget.widgetConfig(StepView, {
+                        step,
+                        state: input.getStepState(step),
+                        error: input.currentStep === step ? (input.currentError ?? undefined) : undefined,
+                        isFirstSection: false,
+                        isLastSection:
+                          i === input.sections.length - 1 && input.recording.steps[input.recording.steps.length - 1] === step,
+                        isStartOfGroup: false,
+                        isEndOfGroup: section.steps[section.steps.length - 1] === step,
+                        stepIndex,
+                        hasBreakpoint: input.breakpointIndexes.has(stepIndex),
+                        sectionIndex: -1,
+                        isRecording: input.isRecording,
+                        isPlaying: input.replayState.isPlaying,
+                        removable: input.recording.steps.length > 1,
+                        builtInConverters: input.builtInConverters as Converters.Converter.Converter[],
+                        extensionConverters: input.extensionConverters as Converters.Converter.Converter[],
+                        isSelected: input.selectedStep === step,
+                        recorderSettings: input.recorderSettings ?? undefined,
+                        onStepClick: input.onStepClick,
+                        onStepHover: input.onStepHover,
+                      })}
                       jslog=${VisualLogging.section('step').track({click: true})}
-                      ></devtools-step-view>
+                      ></devtools-widget>
                     `;
                   })}
                   ${!input.recordingTogglingInProgress && input.isRecording && i === input.sections.length - 1 ? html`<devtools-button
@@ -683,7 +676,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-        // clang-format on
+    // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {
@@ -790,15 +783,15 @@ interface ViewInput {
   getStepState: (step: Models.Schema.Step) => State;
   onAbortReplay: () => void;
   onMeasurePerformanceClick: (event: Event) => void;
-  onTogglePlaying: (event: StartReplayEvent) => void;
+  onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
   onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
   onCopyStep: (event: CopyStepEvent) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
   onReplaySettingsKeydown: (event: Event) => void;
   onSelectMenuLabelClick: (event: Event) => void;
-  onStepClick: (event: Event) => void;
-  onStepHover: (event: MouseEvent) => void;
+  onStepClick: (step: Models.Schema.Step|Models.Section.Section) => void;
+  onStepHover: (step: Models.Schema.Step|Models.Section.Section) => void;
   onTimeoutInput: (event: Event) => void;
   onTitleBlur: (event: Event) => void;
   onTitleInputKeyDown: (event: KeyboardEvent) => void;
@@ -844,18 +837,21 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         `}
         ${input.isRecording ? html`<div class="footer">
           <div class="controls">
-            <devtools-control-button
+            <devtools-widget
+              class="control-button"
+              .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+                label: footerButtonTitle,
+                shape: 'square',
+                disabled: input.recordingTogglingInProgress,
+                onClick: input.onRecordingFinished,
+              })}
               jslog=${VisualLogging.toggle('toggle-recording').track({click: true})}
-              @click=${input.onRecordingFinished}
-              .disabled=${input.recordingTogglingInProgress}
-              .shape=${'square'}
-              .label=${footerButtonTitle}
               title=${Models.Tooltip.getTooltipForActions(
                 footerButtonTitle,
                 Actions.RecorderActions.START_RECORDING,
               )}
             >
-            </devtools-control-button>
+            </devtools-widget>
           </div>
         </div>`: Lit.nothing}
       </div>
@@ -977,11 +973,11 @@ export class RecordingView extends UI.Widget.Widget {
             this.abortReplay?.();
           },
           onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
-          onTogglePlaying: (event: StartReplayEvent) => {
+          onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
             this.playRecording?.({
               targetPanel: TargetPanel.DEFAULT,
-              speed: event.speed,
-              extension: event.extension,
+              speed,
+              extension,
             });
           },
           onCodeFormatChange: this.#onCodeFormatChange.bind(this),
@@ -1073,19 +1069,16 @@ export class RecordingView extends UI.Widget.Widget {
     return index >= ownIndex ? State.SUCCESS : State.OUTSTANDING;
   }
 
-  #onStepHover = (event: MouseEvent): void => {
-    const stepView = event.target as StepView;
-    const step = stepView.step || stepView.section?.causingStep;
+  #onStepHover = (stepOrSection: Models.Schema.Step|Models.Section.Section): void => {
+    const step = 'type' in stepOrSection ? stepOrSection : stepOrSection.causingStep;
     if (!step || this.#selectedStep) {
       return;
     }
     this.#highlightCodeForStep(step);
   };
 
-  #onStepClick(event: Event): void {
-    event.stopPropagation();
-    const stepView = event.target as StepView;
-    const selectedStep = stepView.step || stepView.section?.causingStep || null;
+  #onStepClick(stepOrSection: Models.Schema.Step|Models.Section.Section): void {
+    const selectedStep = 'type' in stepOrSection ? stepOrSection : stepOrSection.causingStep || null;
     if (this.#selectedStep === selectedStep) {
       return;
     }