chrome-devtools-frontend 1.0.939277 → 1.0.941095

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -11,10 +11,13 @@ let eventListenerBreakpointsSidebarPaneInstance: EventListenerBreakpointsSidebar
 
 export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsSidebarPane {
   private constructor() {
-    const categories = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints().map(
-        breakpoint => breakpoint.category());
+    let breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[] =
+        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
+    const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
+    breakpoints = breakpoints.concat(nonDomBreakpoints);
+
+    const categories = breakpoints.map(breakpoint => breakpoint.category());
     categories.sort();
-    const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
     super(
         categories, breakpoints, 'sources.eventListenerBreakpoints', Protocol.Debugger.PausedEventReason.EventListener);
   }
@@ -27,10 +30,15 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
   }
 
   getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
-    return SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(details.auxData as {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
+    const auxData = details.auxData as {
       eventName: string,
       targetName: string,
-    });
+    };
+    const domBreakpoint = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(auxData);
+    if (domBreakpoint) {
+      return domBreakpoint;
+    }
+    return SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(auxData);
   }
 }

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -6,6 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as Legacy from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -76,14 +77,12 @@ export class OverviewStartRequestedEvent extends Event {
 export class CSSOverviewStartView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #feedbackLink: HTMLAnchorElement;
+  #feedbackLink: HTMLElement;
 
   constructor() {
     super();
-    this.#feedbackLink = document.createElement('a');
-    this.#feedbackLink.href = FEEDBACK_LINK;
-    this.#feedbackLink.target = '_blank';
-    this.#feedbackLink.innerText = i18nString(UIStrings.feedbackInline);
+    this.#feedbackLink =
+        Legacy.XLink.XLink.create(FEEDBACK_LINK, i18nString(UIStrings.feedbackInline), 'devtools-link');
   }
 
   connectedCallback(): void {
@@ -106,7 +105,6 @@ export class CSSOverviewStartView extends HTMLElement {
   private render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
     render(html`
       <div class="css-overview-start-view">
         <h1 class="summary-header">${i18nString(UIStrings.identifyCSSImprovements)}</h1>
@@ -144,11 +142,11 @@ export class CSSOverviewStartView extends HTMLElement {
             </div>
             <div>
               <h1 class="video-doc-header">${i18nString(UIStrings.videoAndDocumentation)}</h1>
-              <a href=${DOC_LINK} target="_blank">${i18nString(UIStrings.quickStartWithCSSOverview)}</a>
+              <x-link class="devtools-link" href=${DOC_LINK}>${i18nString(UIStrings.quickStartWithCSSOverview)}</x-link>
             </div>
           </div>
         </section>
-        <a class="feedback-standalone" href=${FEEDBACK_LINK} target="_blank">${i18nString(UIStrings.feedbackStandalone)}</a>
+        <x-link class="feedback-standalone" href=${FEEDBACK_LINK}>${i18nString(UIStrings.feedbackStandalone)}</x-link>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -95,6 +95,12 @@ h1 {
   margin-bottom: 24px;
 }
 
+.feedback-prompt .devtools-link {
+  color: -webkit-link;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .resources {
   display: flex;
   flex-direction: row;
@@ -125,7 +131,7 @@ h1 {
   font-weight: bold;
 }
 
-.resources a {
+.resources .devtools-link {
   font-size: 14px;
   line-height: 22px;
   letter-spacing: 0.04em;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1827,7 +1827,8 @@ export class StylePropertiesSection {
     containerElement.data = {
       container: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(container.containerNode),
       queryName: containerQuery.name,
-      onContainerLinkClick: (): void => {
+      onContainerLinkClick: (event): void => {
+        event.preventDefault();
         ElementsPanel.instance().revealAndSelectNode(container.containerNode, true, true);
         container.containerNode.scrollIntoView();
       },

package/front_end/panels/issues/IssueKindView.ts

@@ -14,10 +14,17 @@ import * as Components from './components/components.js';
 
 const UIStrings = {
   /**
-    * @description Menu entry for hiding all current issues belonging to a particular kind.
-    * @example {Page Errors} PH1
+    * @description Menu entry for hiding all current Page Errors.
     */
-  hideAllCurrent: 'Hide all current {PH1}',
+  hideAllCurrentPageErrors: 'Hide all current Page Errors',
+  /**
+    * @description Menu entry for hiding all current Breaking Changes.
+    */
+  hideAllCurrentBreakingChanges: 'Hide all current Breaking Changes',
+  /**
+    * @description Menu entry for hiding all current Page Errors.
+    */
+  hideAllCurrentImprovements: 'Hide all current Improvements',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssueKindView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -70,6 +77,17 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     return this.kind;
   }
 
+  getHideAllCurrentKindString(): Common.UIString.LocalizedString {
+    switch (this.kind) {
+      case IssuesManager.Issue.IssueKind.PageError:
+        return i18nString(UIStrings.hideAllCurrentPageErrors);
+      case IssuesManager.Issue.IssueKind.Improvement:
+        return i18nString(UIStrings.hideAllCurrentImprovements);
+      case IssuesManager.Issue.IssueKind.BreakingChange:
+        return i18nString(UIStrings.hideAllCurrentBreakingChanges);
+    }
+  }
+
   private appendHeader(): void {
     const header = document.createElement('div');
     header.classList.add('header');
@@ -93,7 +111,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     const hideAvailableIssuesBtn = new Components.HideIssuesMenu.HideIssuesMenu();
     hideAvailableIssuesBtn.classList.add('hide-available-issues');
     hideAvailableIssuesBtn.data = {
-      menuItemLabel: i18nString(UIStrings.hideAllCurrent, {PH1: IssuesManager.Issue.getIssueKindName(this.kind)}),
+      menuItemLabel: this.getHideAllCurrentKindString(),
       menuItemAction: (): void => {
         const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
         const values = setting.get();

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -262,42 +262,19 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       return '';
     }
     const mainTarget = this.manager.target();
-    const runtimeModel = mainTarget.model(SDK.RuntimeModel.RuntimeModel);
-    const executionContext = runtimeModel && runtimeModel.defaultExecutionContext();
-    let inspectedURL = mainTarget.inspectedURL();
-    if (!executionContext) {
-      return inspectedURL;
-    }
+    // target.inspectedURL is reliably populated, however it lacks any url #hash
+    const inspectedURL = mainTarget.inspectedURL();
 
-    // Evaluate location.href for a more specific URL than inspectedURL provides so that SPA hash navigation routes
-    // will be respected and audited.
-    try {
-      const result = await executionContext.evaluate(
-          {
-            expression: 'window.location.href',
-            objectGroup: 'lighthouse',
-            includeCommandLineAPI: false,
-            silent: false,
-            returnByValue: true,
-            generatePreview: false,
-            allowUnsafeEvalBlockedByCSP: undefined,
-            disableBreaks: undefined,
-            replMode: undefined,
-            throwOnSideEffect: undefined,
-            timeout: undefined,
-          },
-          /* userGesture */ false, /* awaitPromise */ false);
-      if ((!('exceptionDetails' in result) || !result.exceptionDetails) && 'object' in result && result.object) {
-        if (result.object.value) {
-          inspectedURL = result.object.value;
-        }
-        result.object.release();
-      }
-    } catch (err) {
-      console.error(err);
+    // We'll use the navigationHistory to acquire the current URL including hash
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const navHistory = resourceTreeModel && await resourceTreeModel.navigationHistory();
+    if (!resourceTreeModel || !navHistory) {
+      return inspectedURL;
     }
 
-    return inspectedURL;
+    const {currentIndex, entries} = navHistory;
+    const navigationEntry = entries[currentIndex];
+    return navigationEntry.url;
   }
 
   getFlags(): {internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)} {

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -263,7 +263,8 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     const reportContainer = this.auditResultsElement.createChild('div', 'lh-vars lh-root lh-devtools');
 
-    const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document);
+    // @ts-ignore: Second argument will soon be required.
+    const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document, reportContainer);
     const renderer = new LighthouseReportRenderer(dom) as LighthouseReport.ReportRenderer;
 
     const el = renderer.renderReport(lighthouseResult, reportContainer);

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -221,8 +221,9 @@ export class LighthouseReportUIFeatures extends LighthouseReport.ReportUIFeature
   }
 
   getDocument(): Document {
-    return this._document;
+    return this._dom.document();
   }
+
   resetUIState(): void {
     this._resetUIState();
   }

package/front_end/panels/network/NetworkLogView.ts

@@ -1548,6 +1548,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         footerSection.appendItem(i18nString(UIStrings.copyAllAsCurlCmd), this.copyAllCurlCommand.bind(this, 'win'));
         footerSection.appendItem(i18nString(UIStrings.copyAllAsCurlBash), this.copyAllCurlCommand.bind(this, 'unix'));
       } else {
+        footerSection.appendItem(
+            i18nString(UIStrings.copyAsPowershell), this.copyPowerShellCommand.bind(this, request), disableIfBlob);
         footerSection.appendItem(
             i18nString(UIStrings.copyAsFetch), this.copyFetchCall.bind(this, request, FetchStyle.Browser),
             disableIfBlob);
@@ -1556,6 +1558,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
             disableIfBlob);
         footerSection.appendItem(
             i18nString(UIStrings.copyAsCurl), this.copyCurlCommand.bind(this, request, 'unix'), disableIfBlob);
+        footerSection.appendItem(i18nString(UIStrings.copyAllAsPowershell), this.copyAllPowerShellCommand.bind(this));
         footerSection.appendItem(
             i18nString(UIStrings.copyAllAsFetch), this.copyAllFetchCall.bind(this, FetchStyle.Browser));
         footerSection.appendItem(

package/front_end/panels/network/RequestPayloadView.ts

@@ -491,6 +491,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
   private createToggleButton(title: string): Element {
     const button = document.createElement('span');
     button.classList.add('payload-toggle');
+    button.tabIndex = 0;
+    button.setAttribute('role', 'button');
     button.textContent = title;
     return button;
   }

package/front_end/panels/network/requestPayloadTree.css

@@ -64,6 +64,11 @@
   color: var(--color-text-primary);
 }
 
+.tree-outline li.expanded .payload-toggle:focus-visible {
+  border: 2px solid var(--color-button-outline-focus);
+  border-radius: 5px;
+}
+
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
   cursor: pointer;

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -142,6 +142,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
       this.messages = [];
       this.dataGridIntegrator.update({...this.dataGridIntegrator.data(), rows: []});
+      this.infoWidget.render(null);
     });
     topToolbar.appendToolbarItem(clearButton);
 

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

@@ -8,6 +8,7 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Settings from '../../../ui/components/settings/settings.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
@@ -81,21 +82,31 @@ export class SyncSection extends HTMLElement {
   }
 }
 
+/* x-link doesn't work with custom click/keydown handlers */
+/* eslint-disable rulesdir/ban_a_tags_in_lit_html */
+
 function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
   if (!syncInfo.isSyncActive) {
+    const link = 'chrome://settings/syncSetup';
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <x-link href="chrome://settings/syncSetup" class="link">${
-        i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.syncDisabled)} <a href="${link}" class="link" target="_blank"
+          @click=${(e: Event): void => openSettingsTab(link, e)}
+          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
+    // clang-format on
   }
   if (!syncInfo.arePreferencesSynced) {
+    const link = 'chrome://settings/syncSetup/advanced';
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <x-link href="chrome://settings/syncSetup/advanced" class="link">${
-        i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href="${link}" class="link" target="_blank"
+          @click=${(e: Event): void => openSettingsTab(link, e)}
+          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
     // clang-format on
   }
@@ -109,6 +120,16 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     </div>`;
 }
 
+// Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+// there using CDP.
+function openSettingsTab(url: string, event: Event): void {
+  if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    mainTarget && mainTarget.targetAgent().invoke_createTarget({url});
+    event.consume(true);
+  }
+}
+
 ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
 
 declare global {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -191,13 +191,20 @@ export class DebuggerPausedMessage {
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
       let eventNameForUI = '';
       if (details.auxData) {
-        eventNameForUI =
-            SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle((details.auxData as {
-              directiveText: string,
-              eventName: string,
-              targetName: string,
-              webglErrorName: string,
-            }));
+        const maybeNonDomEventNameForUI =
+            SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpointTitle(
+                (details.auxData as {eventName: string}));
+        if (maybeNonDomEventNameForUI) {
+          eventNameForUI = maybeNonDomEventNameForUI;
+        } else {
+          eventNameForUI = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle(
+              (details.auxData as {
+                directiveText: string,
+                eventName: string,
+                targetName: string,
+                webglErrorName: string,
+              }));
+        }
       }
       messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnEventListener), eventNameForUI);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -424,7 +424,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
   private debuggerPaused(event: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.DebuggerModel>): void {
     const debuggerModel = event.data;
     const details = debuggerModel.debuggerPausedDetails();
-    if (!this.pausedInternal) {
+    if (!this.pausedInternal &&
+        Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
       this.setAsCurrentPanel();
     }
 
@@ -986,6 +987,9 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
   }
 
   private revealDebuggerSidebar(): void {
+    if (!Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
+      return;
+    }
     this.setAsCurrentPanel();
     this.splitWidget.showBoth(true);
   }
@@ -1083,10 +1087,7 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
   }
 
   setAsCurrentPanel(): Promise<void> {
-    if (Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
-      return UI.ViewManager.ViewManager.instance().showView('sources');
-    }
-    return Promise.resolve();
+    return UI.ViewManager.ViewManager.instance().showView('sources');
   }
 
   private extensionSidebarPaneAdded(
@@ -1207,6 +1208,9 @@ export class DebuggerPausedDetailsRevealer implements Common.Revealer.Revealer {
   }
 
   reveal(_object: Object): Promise<void> {
+    if (!Common.Settings.Settings.instance().moduleSetting('autoFocusOnDebuggerPausedEnabled').get()) {
+      return Promise.resolve();
+    }
     return SourcesPanel.instance().setAsCurrentPanel();
   }
 }

package/front_end/third_party/codemirror.next/bundle-tsconfig.json

@@ -16,6 +16,6 @@
     "chunk/php.js",
     "chunk/python.js",
     "chunk/wast.js",
-    "chunk/xml.js",
+    "chunk/xml.js"
   ]
 }

package/front_end/ui/components/buttons/Button.ts

@@ -30,6 +30,7 @@ interface ButtonState {
   variant?: Variant;
   size?: Size;
   disabled: boolean;
+  active: boolean;
 }
 
 export type ButtonData = {
@@ -37,11 +38,13 @@ export type ButtonData = {
   iconUrl: string,
   size?: Size,
   disabled?: boolean,
+  active?: boolean,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
   size?: Size,
   disabled?: boolean,
+  active?: boolean,
 };
 
 export class Button extends HTMLElement {
@@ -52,6 +55,7 @@ export class Button extends HTMLElement {
   private readonly props: ButtonState = {
     size: Size.MEDIUM,
     disabled: false,
+    active: false,
   };
   private isEmpty = true;
 
@@ -69,6 +73,7 @@ export class Button extends HTMLElement {
     this.props.variant = data.variant;
     this.props.iconUrl = data.iconUrl;
     this.props.size = data.size || Size.MEDIUM;
+    this.props.active = Boolean(data.active);
     this.setDisabledProperty(data.disabled || false);
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
@@ -93,6 +98,11 @@ export class Button extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
 
+  set active(active: boolean) {
+    this.props.active = active;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+  }
+
   private setDisabledProperty(disabled: boolean): void {
     this.props.disabled = disabled;
     this.toggleAttribute('disabled', disabled);
@@ -140,6 +150,7 @@ export class Button extends HTMLElement {
       'text-with-icon': Boolean(this.props.iconUrl) && !this.isEmpty,
       'only-icon': Boolean(this.props.iconUrl) && this.isEmpty,
       small: Boolean(this.props.size === Size.SMALL),
+      active: this.props.active,
     };
     // clang-format off
     LitHtml.render(

package/front_end/ui/components/buttons/button.css

@@ -80,6 +80,7 @@ button.primary:hover {
   border: 1px solid var(--color-button-primary-background-hovering);
 }
 
+button.primary.active,
 button.primary:active {
   background: var(--color-button-primary-background-pressed);
   border: 1px solid var(--color-button-primary-background-pressed);
@@ -103,6 +104,7 @@ button.secondary:hover {
   background: var(--color-button-secondary-background-hovering);
 }
 
+button.secondary.active,
 button.secondary:active {
   background: var(--color-button-secondary-background-pressed);
   border: 1px solid var(--color-button-secondary-background-pressed);
@@ -120,6 +122,7 @@ button.secondary:disabled:hover {
   cursor: not-allowed;
 }
 
+button.secondary.active:focus-visible,
 button.secondary:active:focus-visible {
   border: 1px solid var(--color-button-secondary-background-pressed);
 }
@@ -128,6 +131,7 @@ button.toolbar:hover {
   background-color: var(--color-button-secondary-background-hovering);
 }
 
+button.toolbar.active,
 button.toolbar:active {
   background-color: var(--color-button-secondary-background-pressed);
 }

package/front_end/ui/components/docs/button/basic.ts

@@ -32,6 +32,16 @@ primaryButton.innerText = 'Click me';
 primaryButton.onclick = () => alert('clicked');
 appendButton(primaryButton);
 
+// Primary (forced active)
+const forcedActive = new Buttons.Button.Button();
+forcedActive.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  active: true,
+};
+forcedActive.innerText = 'Forced active';
+forcedActive.onclick = () => alert('clicked');
+appendButton(forcedActive);
+
 // Secondary
 const secondaryButton = new Buttons.Button.Button();
 secondaryButton.innerText = 'Click me';

package/front_end/ui/components/docs/panel_feedback/basic.html

@@ -0,0 +1,25 @@
+<!--
+  Copyright 2021 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Panel Feedback</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/basic.ts

@@ -0,0 +1,20 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new PanelFeedback.PanelFeedback.PanelFeedback();
+
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+  quickStartUrl: 'https://www.example.com',
+  quickStartLinkText: 'Quick start: get started with the Recorder',
+};
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -56,4 +56,5 @@ export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'ui/legacy/components/source_frame/jsonView.css',
   'ui/legacy/searchableView.css',
   'ui/legacy/toolbar.css',
+  'ui/legacy/inspectorViewTabbedPane.css',
 ];