chrome-devtools-frontend 1.0.1578486 → 1.0.1579812

package/front_end/panels/elements/elementsTreeOutline.css

@@ -217,14 +217,25 @@ select {
 }
 
 .elements-gutter-decoration {
-  position: absolute;
-  top: 3px;
-  left: 2px;
   height: 9px;
   width: 9px;
   border-radius: 5px;
-  border: 1px solid var(--sys-color-orange-bright);
-  background-color: var(--sys-color-orange-bright);
+  border: 1px solid var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
+  background-color: var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+.elements-gutter-decoration-container {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 1px;
+  width: 15px;
+  height: 15px;
+  align-items: center;
+}
+
+.elements-gutter-decoration + .elements-gutter-decoration {
+  margin-left: -6px;
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -182,7 +182,7 @@ export class StartView extends UI.Widget.Widget {
 <form class="lighthouse-start-view">
   <header class="hbox">
     <div class="lighthouse-logo"></div>
-    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <h1 class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</h1>
     <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
   </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -26,6 +26,12 @@
   margin-bottom: 16px;
 }
 
+.lighthouse-start-view .lighthouse-title {
+  margin: 0;
+  font-size: inherit;
+  font-weight: normal;
+}
+
 .lighthouse-logo {
   width: 75px;
   height: 75px;

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -5,6 +5,7 @@
 import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
@@ -61,7 +62,8 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
   render(
     html`
       <style>${playerListViewStyles}</style>
-      <div class="player-entry-header">${i18nString(UIStrings.players)}</div>
+      <div class="player-entry-header" id="players-header">${i18nString(UIStrings.players)}</div>
+      <div role="listbox" aria-labelledby="players-header">
       ${input.players.map(player => {
         const isSelected = player.playerID === input.selectedPlayerID;
         return html`
@@ -71,9 +73,18 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
             selected: isSelected,
             'force-white-icons': isSelected,
           })}
+               tabindex="0"
                @click=${() => input.onPlayerClick(player.playerID)}
+               @keydown=${(e: KeyboardEvent) => {
+                 if (Platform.KeyboardUtilities.isEnterOrSpaceKey(e)) {
+                   e.preventDefault();
+                   input.onPlayerClick(player.playerID);
+                 }
+               }}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
-               jslog=${VisualLogging.item('player').track({click: true})}>
+               role="option"
+               aria-selected=${isSelected}
+               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>
@@ -84,6 +95,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           </div>
         `;
       })}
+      </div>
     `,
     target
   );

package/front_end/panels/media/playerListView.css

@@ -34,6 +34,11 @@ li.storage-group-list-item::before {
     background: var(--sys-color-state-hover-on-subtle);
   }
 
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: calc(var(--sys-size-2) * -1);
+  }
+
   &.selected {
     background: var(--sys-color-tonal-container);
     color: var(--sys-color-on-tonal-container);

package/front_end/panels/network/NetworkItemView.ts

@@ -345,7 +345,8 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       return;
     }
     if (this.#request.queryParameters || await this.#request.requestFormData()) {
-      this.#payloadView = new RequestPayloadView(this.#request);
+      this.#payloadView = new RequestPayloadView();
+      this.#payloadView.request = this.#request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.PAYLOAD, i18nString(UIStrings.payload), this.#payloadView,
           i18nString(UIStrings.payload), /* userGesture=*/ void 0,

package/front_end/panels/network/NetworkLogView.ts

@@ -1451,17 +1451,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private removeNodeAndMaybeAncestors(node: NetworkRequestNode): void {
-    let parent: NetworkNode|
-        (DataGrid.DataGrid.DataGridNode<DataGrid.ViewportDataGrid.ViewportDataGridNode<
-             DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode>>>|
-         null) = node.parent;
+    let parent = node.parent;
     if (!parent) {
       return;
     }
     parent.removeChild(node);
     while (parent && !parent.hasChildren() && parent.dataGrid && parent.dataGrid.rootNode() !== parent) {
       const grandparent = (parent.parent as NetworkNode);
-      grandparent.removeChild(parent);
+      grandparent.removeChild(parent as NetworkNode);
       parent = grandparent;
     }
   }

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -409,7 +410,8 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
+    this.waterfallHeaderElement.setAttribute(
+        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);
@@ -880,20 +882,30 @@ export class NetworkLogViewColumns {
     if (!request) {
       return null;
     }
+    let descriptor: Common.EventTarget.EventDescriptor|undefined = undefined;
     return {
       box: anchor.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        this.popupLinkifier.addEventListener(Components.Linkifier.Events.LIVE_LOCATION_UPDATED, () => {
-          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-        });
-        const content = RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
+        const content = await RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
         if (!content) {
           return false;
         }
-        content.show(popover.contentElement);
+        descriptor = content.stackTrace?.addEventListener(StackTrace.StackTrace.Events.UPDATED, async () => {
+          await content.preview.updateComplete;
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
+        content.preview.show(popover.contentElement);
+        await content.preview.updateComplete.then(() => {
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
         return true;
       },
-      hide: this.popupLinkifier.reset.bind(this.popupLinkifier),
+      hide: () => {
+        this.popupLinkifier.reset();
+        if (descriptor) {
+          Common.EventTarget.removeEventListeners([descriptor]);
+        }
+      },
     };
   }
 

package/front_end/panels/network/RequestInitiatorView.ts

@@ -5,7 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -172,17 +174,31 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     this.#view = view;
   }
 
-  static createStackTracePreview(
+  static async createStackTracePreview(
       request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier,
-      focusableLink?: boolean): Components.JSPresentationUtils.StackTracePreviewContent|null {
+      focusableLink?: boolean): Promise<{
+    preview: Components.JSPresentationUtils.StackTracePreviewContent,
+    stackTrace: StackTrace.StackTrace.StackTrace|null,
+  }|null> {
     const initiator = request.initiator();
     if (!initiator?.stack) {
       return null;
     }
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager ? networkManager.target() : undefined;
-    return new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
+    if (target) {
+      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
+      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {tabStops: focusableLink});
+      preview.stackTrace = stackTrace;
+      return {preview, stackTrace};
+    }
+    return {
+      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
+      stackTrace: null
+    };
   }
 
   override performUpdate(): void {