chrome-devtools-frontend 1.0.939473 → 1.0.941208

package/front_end/panels/application/BackForwardCacheView.ts

@@ -17,67 +17,67 @@ import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
 const UIStrings = {
   /**
-   * @description Title text in Back-forward Cache view of the Application panel
+   * @description Title text in Back-Forward Cache view of the Application panel
    */
   mainFrame: 'Main Frame',
   /**
-   * @description Title text in Back-forward Cache view of the Application panel
+   * @description Title text in Back-Forward Cache view of the Application panel
    */
-  backForwardCacheTitle: 'Back-forward Cache',
+  backForwardCacheTitle: 'Back-Forward Cache',
   /**
    * @description Status text for the status of the main frame
    */
   unavailable: 'unavailable',
   /**
-   * @description Entry name text in the Back-forward Cache view of the Application panel
+   * @description Entry name text in the Back-Forward Cache view of the Application panel
    */
   url: 'URL',
   /**
-   * @description Entry name text in the Back-forward Cache view of the Application panel
+   * @description Entry name text in the Back-Forward Cache view of the Application panel
    */
-  bfcacheStatus: 'Back-forward Cache Status',
+  bfcacheStatus: 'Back-Forward Cache Status',
   /**
-   * @description Status text for the status of the back-forward cache status
+   * @description Status text for the status of the Back-Forward Cache status
    */
   unknown: 'unknown',
   /**
-   * @description Status text for the status of the back-forward cache status indicating that
-   * the back-forward cache was not used and a normal navigation occured instead.
+   * @description Status text for the status of the Back-Forward Cache status indicating that
+   * the Back-Forward Cache was not used and a normal navigation occured instead.
    */
-  normalNavigation: 'Normal navigation (Not restored from back-forward cache)',
+  normalNavigation: 'Normal navigation (Not restored from Back-Forward Cache)',
   /**
-   * @description Status text for the status of the back-forward cache status indicating that
-   * the back-forward cache was used to restore the page instead of reloading it.
+   * @description Status text for the status of the Back-Forward Cache status indicating that
+   * the Back-Forward Cache was used to restore the page instead of reloading it.
    */
-  restoredFromBFCache: 'Restored from back-forward cache',
+  restoredFromBFCache: 'Restored from Back-Forward Cache',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * back-forward cache. These reasons are actionable i.e. they can be cleaned up to make the
-   * page eligible for back-forward cache.
+   * Back-Forward Cache. These reasons are actionable i.e. they can be cleaned up to make the
+   * page eligible for Back-Forward Cache.
    */
   pageSupportNeeded: 'Actionable',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   pageSupportNeededExplanation:
-      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for back-forward cache.',
+      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for Back-Forward Cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * back-forward cache. These reasons are circumstantial / not actionable i.e. they cannot be
-   * cleaned up by developers to make the page eligible for back-forward cache.
+   * Back-Forward Cache. These reasons are circumstantial / not actionable i.e. they cannot be
+   * cleaned up by developers to make the page eligible for Back-Forward Cache.
    */
   circumstantial: 'Not Actionable',
   /**
    * @description Explanation for circumstantial/non-actionable items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   circumstantialExplanation:
       'These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
-   * back-forward cache. These reasons are pending support by chrome i.e. in a future version
-   * of chrome they will not prevent back-forward cache usage anymore.
+   * Back-Forward Cache. These reasons are pending support by chrome i.e. in a future version
+   * of chrome they will not prevent Back-Forward Cache usage anymore.
    */
   supportPending: 'Pending Support',
   /**
@@ -86,10 +86,10 @@ const UIStrings = {
   runTest: 'Run Test',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
-   * for back-forward cache.
+   * for Back-Forward Cache.
    */
   supportPendingExplanation:
-      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back-forward cache in a future version of Chrome.',
+      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for Back-Forward Cache in a future version of Chrome.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/module.json

@@ -1,7 +1,6 @@
 {
   "dependencies": [
     "ui/legacy",
-    "ui/legacy/components/perf_ui",
     "panels/network"
   ]
 }

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/layer_viewer/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
+    "ui/legacy"
   ]
 }

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/media/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
+    "ui/legacy"
   ]
 }

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/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy/components/perf_ui",
     "ui/legacy"
   ]
 }

package/front_end/panels/profiler/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
+    "ui/legacy"
   ]
 }

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/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/panels/timeline/module.json

@@ -2,7 +2,6 @@
   "dependencies": [
     "ui/legacy",
     "panels/layer_viewer",
-    "ui/legacy/components/perf_ui",
     "panels/profiler"
   ]
 }

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);