chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -442,6 +442,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     valueElement.textContent = lengthText;
     cssLength.data = {
       lengthText,
+      overloaded: this.overloadedInternal,
     };
     cssLength.append(valueElement);
 
@@ -761,6 +762,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateAuthoringHint(): void {
+    this.listItemElement.classList.remove('inactive-property');
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS)) {
       return;
     }
@@ -776,14 +778,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    const localName = this.node()?.localName();
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
-      const hint =
-          validator.getHint(propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined);
+      const hint = validator.getHint(
+          propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined,
+          localName?.toLowerCase());
       if (hint) {
         Host.userMetrics.cssHintShown(validator.getMetricType());
         const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
         activeHints.set(hintIcon, hint);
         this.listItemElement.append(hintIcon);
+        this.listItemElement.classList.add('inactive-property');
         break;
       }
     }
@@ -1174,7 +1179,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const keyboardEvent = (event as KeyboardEvent);
     const target = (keyboardEvent.target as HTMLElement);
     let result;
-    if (keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey) {
+    if ((keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey) ||
+        (context.isEditingName && keyboardEvent.key === ' ')) {
       result = 'forward';
     } else if (
         keyboardEvent.keyCode === UI.KeyboardShortcut.Keys.Esc.code ||

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -76,6 +76,10 @@ const UIStrings = {
   */
   noMatchingSelectorOrStyle: 'No matching selector or style',
   /**
+  *@description Label text to show the number of rules hidden by the filter in the Styles Sidebar Pane of the Elements panel
+  */
+  hiddenStyleCount: '{n, plural, =1 {1 hidden rule} other {# hidden rules}}',
+  /**
   *@description Text in Styles Sidebar Pane of the Elements panel
   */
   invalidPropertyValue: 'Invalid property value',
@@ -195,6 +199,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private pendingWidgetToggle: UI.Toolbar.ToolbarToggle|null;
   private toolbar: UI.Toolbar.Toolbar|null;
   private toolbarPaneElement: HTMLElement;
+  private filterInput: Element|null;
+  private hiddenRulesElement: HTMLElement|null;
   private noMatchesElement: HTMLElement;
   private sectionsContainer: HTMLElement;
   sectionByElement: WeakMap<Node, StylePropertiesSection>;
@@ -239,11 +245,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.pendingWidget = null;
     this.pendingWidgetToggle = null;
     this.toolbar = null;
+    this.hiddenRulesElement = null;
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.computedStyleModelInternal = new ComputedStyleModel();
+    this.filterInput = null;
 
-    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
+    this.noMatchesElement = this.contentElement.createChild('label', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
+    this.noMatchesElement.setAttribute('for', 'filter-input-field');
 
     this.sectionsContainer = this.contentElement.createChild('div');
     UI.ARIAUtils.markAsList(this.sectionsContainer);
@@ -392,6 +401,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     input.type = 'search';
     input.classList.add('custom-search-input');
     input.placeholder = placeholder;
+    input.id = 'filter-input-field';
 
     function searchHandler(): void {
       const regex = input.value ? new RegExp(Platform.StringUtilities.escapeForRegExp(input.value), 'i') : null;
@@ -933,11 +943,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers: boolean = false;
 
-    const layersExperimentEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_LAYERS);
     const addLayerSeparator = (style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): void => {
-      if (!layersExperimentEnabled) {
-        return;
-      }
       const parentRule = style.parentRule;
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
@@ -1065,16 +1071,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       blocks.push(block);
     }
 
-    if (layersExperimentEnabled) {
-      // If we have seen a layer in matched styles we enable
-      // the layer widget button.
-      if (sawLayers) {
-        LayersWidget.ButtonProvider.instance().item().setVisible(true);
-      } else if (LayersWidget.LayersWidget.instance().isShowing()) {
-        // Since the button for toggling the layers view is now hidden
-        // we ensure that the layers view is not currently toggled.
-        ElementsPanel.instance().showToolbarPane(null, LayersWidget.ButtonProvider.instance().item());
-      }
+    // If we have seen a layer in matched styles we enable
+    // the layer widget button.
+    if (sawLayers) {
+      LayersWidget.ButtonProvider.instance().item().setVisible(true);
+    } else if (LayersWidget.LayersWidget.instance().isShowing()) {
+      // Since the button for toggling the layers view is now hidden
+      // we ensure that the layers view is not currently toggled.
+      ElementsPanel.instance().showToolbarPane(null, LayersWidget.ButtonProvider.instance().item());
     }
 
     await this.idleCallbackManager.awaitDone();
@@ -1154,11 +1158,23 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private updateFilter(): void {
+    let hiddenBlockCount = 0;
     let hasAnyVisibleBlock = false;
     for (const block of this.sectionBlocks) {
-      hasAnyVisibleBlock = block.updateFilter() || hasAnyVisibleBlock;
+      const visible = block.updateFilter();
+      hasAnyVisibleBlock = visible || hasAnyVisibleBlock;
+      if (!visible) {
+        hiddenBlockCount++;
+      }
     }
+
+    // If aria-label is present, other labels won't be read by screen readers
+    this.filterInput?.removeAttribute('aria-label');
     this.noMatchesElement.classList.toggle('hidden', Boolean(hasAnyVisibleBlock));
+
+    if (this.hiddenRulesElement !== null) {
+      this.hiddenRulesElement.textContent = i18nString(UIStrings.hiddenStyleCount, {n: hiddenBlockCount});
+    }
   }
 
   willHide(): void {
@@ -1293,10 +1309,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const container = this.contentElement.createChild('div', 'styles-sidebar-pane-toolbar-container');
     const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     const filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
-    const filterInput = StylesSidebarPane.createPropertyFilterElement(
+    this.filterInput = StylesSidebarPane.createPropertyFilterElement(
         i18nString(UIStrings.filter), hbox, this.onFilterChanged.bind(this));
-    UI.ARIAUtils.setAccessibleName(filterInput, i18nString(UIStrings.filterStyles));
-    filterContainerElement.appendChild(filterInput);
+    UI.ARIAUtils.setAccessibleName(this.filterInput, i18nString(UIStrings.filterStyles));
+    filterContainerElement.appendChild(this.filterInput);
     const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
     toolbar.makeToggledGray();
     void toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');
@@ -1304,6 +1320,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
     const toolbarPaneContent = (toolbarPaneContainer.createChild('div', 'styles-sidebar-toolbar-pane') as HTMLElement);
 
+    this.hiddenRulesElement = filterContainerElement.createChild('label', 'filter-results-matches');
+    this.hiddenRulesElement.setAttribute('for', 'filter-input-field');
+
     return toolbarPaneContent;
   }
 
@@ -1698,6 +1717,14 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         this.tabKeyPressed();
         keyboardEvent.preventDefault();
         return;
+      case ' ':
+        if (this.isEditingName) {
+          // Since property names cannot contain a space
+          // we accept available autocompletions for property name when the user presses space.
+          this.tabKeyPressed();
+          keyboardEvent.preventDefault();
+          return;
+        }
     }
 
     super.onKeyDown(keyboardEvent);

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -20,7 +20,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, Directives} = LitHtml;
 
 interface Hint {
-  getPrefix(): string;
   getMessage(): string;
   getPossibleFixMessage(): string|null;
   getLearnMoreLink(): string|undefined;
@@ -44,7 +43,7 @@ export class CSSHintDetailsView extends HTMLElement {
       render(html`
         <div class="hint-popup-wrapper">
           <div class="hint-popup-reason">
-              <strong>${this.#authoringHint.getPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
+            ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
           </div>
           ${this.#authoringHint.getPossibleFixMessage() ? html`
               <div class="hint-popup-possible-fix">

package/front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -298,9 +298,8 @@ const flexContainerIcons = new Map([
   ['align-content: space-evenly', flexAlignContentIcon('align-content-space-evenly-icon')],
   ['align-content: flex-end', flexAlignContentIcon('align-content-end-icon')],
   ['align-content: flex-start', flexAlignContentIcon('align-content-start-icon')],
-  // TODO(crbug.com/1139945): Start & end should be enabled once Chromium supports them for flexbox.
-  // ['align-content: start', flexAlignContentIcon('align-content-start-icon')],
-  // ['align-content: end', flexAlignContentIcon('align-content-end-icon')],
+  ['align-content: start', flexAlignContentIcon('align-content-start-icon')],
+  ['align-content: end', flexAlignContentIcon('align-content-end-icon')],
   ['align-content: normal', flexAlignContentIcon('align-content-stretch-icon')],
   ['align-content: revert', flexAlignContentIcon('align-content-stretch-icon')],
   ['align-content: unset', flexAlignContentIcon('align-content-stretch-icon')],

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -20,6 +20,14 @@ const UIStrings = {
   * @description Accessible name for DOM tree breadcrumb navigation.
   */
   breadcrumbs: 'DOM tree breadcrumbs',
+  /**
+  * @description A label/tooltip for a button that scrolls the breadcrumbs bar to the left to show more entries.
+  */
+  scrollLeft: 'Scroll left',
+  /**
+  * @description A label/tooltip for a button that scrolls the breadcrumbs bar to the right to show more entries.
+  */
+  scrollRight: 'Scroll right',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/ElementsBreadcrumbs.ts', UIStrings);
@@ -252,12 +260,15 @@ export class ElementsBreadcrumbs extends HTMLElement {
       hidden: this.#overflowing === false,
     });
 
+    const tooltipString = direction === 'left' ? i18nString(UIStrings.scrollLeft) : i18nString(UIStrings.scrollRight);
+
     return LitHtml.html`
       <button
         class=${buttonStyles}
         @click=${this.#onOverflowClick(direction)}
         ?disabled=${disabled}
-        aria-label="Scroll ${direction}"
+        aria-label=${tooltipString}
+        title=${tooltipString}
       >&hellip;</button>
       `;
   }
@@ -331,7 +342,13 @@ export class ElementsBreadcrumbs extends HTMLElement {
     if (activeCrumb) {
       await coordinator.scroll(() => {
         activeCrumb.scrollIntoView({
-          behavior: 'smooth',
+          // We only want to scroll smoothly when the user is clicking the
+          // buttons manually. If we are automatically scrolling, we could be
+          // scrolling a long distance, so just jump there right away. This
+          // most commonly occurs when the user first opens DevTools on a
+          // deeply nested element, and the slow scrolling of the breadcrumbs
+          // is just a distraction and not useful.
+          behavior: 'auto',
         });
       });
     }

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -93,16 +93,16 @@
     opacity: 100%;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-property:hover {
+  .computed-style-property:hover {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-property:hover * {
+  .computed-style-property:hover * {
     color: HighlightText;
   }
 
-  :host-context(.monospace.computed-properties) .goto {
+  .goto {
     background-color: HighlightText;
   }
 }

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -73,16 +73,20 @@
 }
 /* high-contrast styles */
 @media (forced-colors: active) {
-  :host-context(.monospace.computed-properties) .computed-style-trace:hover {
+  .computed-style-trace:hover {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .goto {
-    background-color: HighlightText;
+  .goto {
+    background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-trace:hover * {
+  .computed-style-trace:hover * {
     color: HighlightText;
   }
+
+  .computed-style-trace:hover .trace-selector {
+    --override-trace-selector-color: HighlightText;
+  }
 }

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -15,14 +15,8 @@
 }
 
 code {
-  background-color: var(--color-background-elevation-1);
-  padding: 0 2px;
-  font-size: var(--source-code-font-size);
-  font-family: var(--source-code-font-family);
-}
-
-.property {
-  color: var(--color-syntax-1);
+  font-weight: bold;
+  font-family: inherit;
 }
 
 .hint-popup-possible-fix {

package/front_end/panels/elements/elements-meta.ts

@@ -132,6 +132,14 @@ const UIStrings = {
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
   showUserAgentShadowDOM: 'Show user agent shadow `DOM`',
+  /**
+  * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
+  */
+  showComputedStyles: 'Show Computed Styles',
+  /**
+  * @description Command for showing the 'Styles' tool. Displays CSS styles in Elements sidebar.
+  */
+  showStyles: 'Show Styles',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -164,6 +172,26 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'elements.show-styles',
+  category: UI.ActionRegistration.ActionCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.showStyles),
+  async loadActionDelegate() {
+    const Elements = await loadElementsModule();
+    return Elements.ElementsPanel.ElementsActionDelegate.instance();
+  },
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'elements.show-computed',
+  category: UI.ActionRegistration.ActionCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.showComputedStyles),
+  async loadActionDelegate() {
+    const Elements = await loadElementsModule();
+    return Elements.ElementsPanel.ElementsActionDelegate.instance();
+  },
+});
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.ELEMENTS_SIDEBAR,
   id: 'elements.eventListeners',

package/front_end/panels/elements/stylesSectionTree.css

@@ -122,7 +122,8 @@ ol.expanded {
 }
 
 .implicit,
-.inherited {
+.inherited,
+.inactive-property {
   opacity: 50%;
 }
 

package/front_end/panels/elements/stylesSidebarPane.css

@@ -152,6 +152,13 @@
   z-index: 2;
 }
 
+.styles-sidebar-pane-toolbar .filter-results-matches {
+  margin: auto;
+  padding: 4px;
+  flex: auto;
+  display: flex;
+}
+
 .styles-sidebar-pane-toolbar {
   border-bottom: 1px solid var(--color-details-hairline);
   flex-shrink: 0;

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -74,6 +74,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
+      case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyNotDelegated:
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
@@ -119,6 +120,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
+      case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyNotDelegated:
         await this.#appendElementOrEmptyCell(element, issue);
         this.#appendRequestOrEmptyCell(element, details.request);
         break;

package/front_end/panels/issues/IssueView.ts

@@ -14,7 +14,6 @@ import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.j
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as Root from '../../core/root/root.js';
 import * as Components from './components/components.js';
 
 import {AffectedDirectivesView} from './AffectedDirectivesView.js';
@@ -254,9 +253,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AttributionReportingIssueDetailsView(this, this.#issue),
       new AffectedRawCookieLinesView(this, this.#issue),
     ];
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
-      this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
-    }
+    this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
     this.#aggregatedIssuesCount = null;
     this.#hasBeenExpandedBefore = false;
   }
@@ -449,6 +446,10 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     void this.#throttle.schedule(async () => this.#doUpdate());
   }
 
+  clear(): void {
+    this.#affectedResourceViews.forEach(view => view.clear());
+  }
+
   getIssueKind(): IssuesManager.Issue.IssueKind {
     return this.#issue.getKind();
   }

package/front_end/panels/js_profiler/js_profiler-meta.ts

@@ -6,6 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Profiler from '../profiler/profiler.js';
+import type * as Timeline from '../timeline/timeline.js';
 
 const UIStrings = {
   /**
@@ -17,13 +18,38 @@ const UIStrings = {
   */
   showProfiler: 'Show Profiler',
   /**
+  *@description Text for the performance of something
+  */
+  performance: 'Performance',
+  /**
+  *@description Command for showing the 'Performance' tool
+  */
+  showPerformance: 'Show Performance',
+  /**
   *@description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
   */
   startStopRecording: 'Start/stop recording',
+  /**
+  *@description Title of an action in the timeline tool to show history
+  */
+  showRecentTimelineSessions: 'Show recent timeline sessions',
+  /**
+  *@description Text to record a series of actions for analysis
+  */
+  record: 'Record',
+  /**
+  *@description Text of an item that stops the running task
+  */
+  stop: 'Stop',
+  /**
+  *@description Title of an action in the timeline tool to record reload
+  */
+  startProfilingAndReloadPage: 'Start profiling and reload page',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/js_profiler/js_profiler-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
+let loadedTimelineModule: (typeof Timeline|undefined);
 let loadedProfilerModule: (typeof Profiler|undefined);
 
 async function loadProfilerModule(): Promise<typeof Profiler> {
@@ -33,6 +59,13 @@ async function loadProfilerModule(): Promise<typeof Profiler> {
   return loadedProfilerModule;
 }
 
+async function loadTimelineModule(): Promise<typeof Timeline> {
+  if (!loadedTimelineModule) {
+    loadedTimelineModule = await import('../timeline/timeline.js');
+  }
+  return loadedTimelineModule;
+}
+
 function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (profilerModule: typeof Profiler) => T[]): T[] {
   if (loadedProfilerModule === undefined) {
     return [];
@@ -40,6 +73,14 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (profilerModul
   return getClassCallBack(loadedProfilerModule);
 }
 
+function maybeRetrieveTimelineContextTypes<T = unknown>(getClassCallBack: (timelineModule: typeof Timeline) => T[]):
+    T[] {
+  if (loadedTimelineModule === undefined) {
+    return [];
+  }
+  return getClassCallBack(loadedTimelineModule);
+}
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'js_profiler',
@@ -52,6 +93,21 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'timeline',
+  title: i18nLazyString(UIStrings.performance),
+  commandPrompt: i18nLazyString(UIStrings.showPerformance),
+  order: 66,
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
+  hasToolbar: false,
+  isPreviewFeature: true,
+  async loadView() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null, isNode: true});
+  },
+});
+
 UI.ActionRegistration.registerActionExtension({
   actionId: 'profiler.js-toggle-recording',
   category: UI.ActionRegistration.ActionCategory.JAVASCRIPT_PROFILER,
@@ -78,3 +134,86 @@ UI.ActionRegistration.registerActionExtension({
     },
   ],
 });
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.show-history',
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  title: i18nLazyString(UIStrings.showRecentTimelineSessions),
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+H',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Y',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.toggle-recording',
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  iconClass: UI.ActionRegistration.IconClass.LARGEICON_START_RECORDING,
+  toggleable: true,
+  toggledIconClass: UI.ActionRegistration.IconClass.LARGEICON_STOP_RECORDING,
+  toggleWithRedColor: true,
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.record),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.stop),
+    },
+  ],
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+E',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+E',
+    },
+  ],
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'timeline.record-reload',
+  iconClass: UI.ActionRegistration.IconClass.LARGEICON_REFRESH,
+  contextTypes() {
+    return maybeRetrieveTimelineContextTypes(Timeline => [Timeline.TimelinePanel.TimelinePanel]);
+  },
+  category: UI.ActionRegistration.ActionCategory.PERFORMANCE,
+  title: i18nLazyString(UIStrings.startProfilingAndReloadPage),
+  async loadActionDelegate() {
+    const Timeline = await loadTimelineModule();
+    return Timeline.TimelinePanel.ActionDelegate.instance();
+  },
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WindowsLinux,
+      shortcut: 'Ctrl+Shift+E',
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.Mac,
+      shortcut: 'Meta+Shift+E',
+    },
+  ],
+});

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -346,21 +346,16 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   getFlags(): {
-    internalDisableDeviceScreenEmulation: boolean,
-    emulatedFormFactor: (string|undefined),
+    formFactor: (string|undefined),
     legacyNavigation: boolean,
     mode: string,
   } {
-    const flags = {
-      // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
-      internalDisableDeviceScreenEmulation: true,
-    };
+    const flags = {};
     for (const runtimeSetting of RuntimeSettings) {
       runtimeSetting.setFlags(flags, runtimeSetting.setting.get());
     }
     return flags as {
-      internalDisableDeviceScreenEmulation: boolean,
-      emulatedFormFactor: (string | undefined),
+      formFactor: (string | undefined),
       legacyNavigation: boolean,
       mode: string,
     };
@@ -487,7 +482,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
     description: i18nLazyString(UIStrings.applyMobileEmulationDuring),
     setFlags: (flags: Flags, value: string|boolean): void => {
       // See Audits.AuditsPanel._setupEmulationAndProtocolConnection()
-      flags.emulatedFormFactor = value;
+      flags.formFactor = value;
     },
     options: [
       {label: i18nLazyString(UIStrings.mobile), value: 'mobile'},