chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -22,7 +22,6 @@ import {Directives, html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
-import {capitalizedAction, ruleSetTagOrLocationShort} from './components/PreloadingString.js';
 import * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
@@ -404,7 +403,11 @@ export function applyFilterText(filterText: string, rows: PreloadingComponents.P
   return rows.filter(row => {
     const attempt = row.pipeline.getOriginallyTriggered();
     const url = attempt.key.url.toLowerCase();
-    const action = capitalizedAction(attempt.action).toLowerCase();
+    const action = PreloadingComponents.PreloadingString
+                       .capitalizedAction(
+                           attempt.action,
+                           )
+                       .toLowerCase();
     const status = PreloadingUIUtils.status(attempt.status).toLowerCase();
 
     // Each term must match (AND logic between terms)
@@ -845,7 +848,10 @@ class PreloadingRuleSetSelector implements
       return i18n.i18n.lockedString('Internal error');
     }
 
-    return ruleSetTagOrLocationShort(ruleSet, pageURL());
+    return PreloadingComponents.PreloadingString.ruleSetTagOrLocationShort(
+        ruleSet,
+        pageURL(),
+    );
   }
 
   subtitleFor(id: Protocol.Preload.RuleSetId|typeof AllRuleSetRootId): string {

package/front_end/panels/application/preloading/components/components.ts

@@ -6,6 +6,7 @@ import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
 import * as PreloadingDetailsReportView from './PreloadingDetailsReportView.js';
 import * as PreloadingDisabledInfobar from './PreloadingDisabledInfobar.js';
 import * as PreloadingGrid from './PreloadingGrid.js';
+import * as PreloadingString from './PreloadingString.js';
 import * as RuleSetDetailsView from './RuleSetDetailsView.js';
 import * as RuleSetGrid from './RuleSetGrid.js';
 import * as UsedPreloadingView from './UsedPreloadingView.js';
@@ -15,6 +16,7 @@ export {
   PreloadingDetailsReportView,
   PreloadingDisabledInfobar,
   PreloadingGrid,
+  PreloadingString,
   RuleSetDetailsView,
   RuleSetGrid,
   UsedPreloadingView,

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -43,17 +43,16 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (executionContext) {
       this.#lastRequestedContext = executionContext;
-      const result = await executionContext.evaluate(
-          {
-            expression: 'self',
-            objectGroup: objectGroupName,
-            includeCommandLineAPI: false,
-            silent: true,
-            returnByValue: false,
-            generatePreview: false,
-          },
-          /* userGesture */ false,
-          /* awaitPromise */ false);
+      const result = await executionContext.evaluateWithSelectedFrameFallback({
+        expression: 'self',
+        objectGroup: objectGroupName,
+        includeCommandLineAPI: false,
+        silent: true,
+        returnByValue: false,
+        generatePreview: false,
+      },
+                                                                              /* userGesture */ false,
+                                                                              /* awaitPromise */ false);
       if (!('error' in result) && !result.exceptionDetails) {
         windowObjects.push(result.object);
       }

package/front_end/panels/changes/CombinedDiffView.ts

@@ -71,7 +71,7 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
 
   // clang-format off
   return html`
-    <details open class=${classes}>
+    <details open class=${classes} jslog=${VisualLogging.section('diff-view')}>
       <summary>
         <div class="summary-left">
           <devtools-icon class="drop-down-icon" name="arrow-drop-down"></devtools-icon>

package/front_end/panels/common/ExtensionServer.ts

@@ -1795,16 +1795,15 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     void context
-        .evaluate(
-            {
-              expression,
-              objectGroup: 'extension',
-              includeCommandLineAPI: exposeCommandLineAPI,
-              silent: true,
-              returnByValue,
-              generatePreview: false,
-            },
-            /* userGesture */ false, /* awaitPromise */ false)
+        .evaluate({
+          expression,
+          objectGroup: 'extension',
+          includeCommandLineAPI: exposeCommandLineAPI,
+          silent: true,
+          returnByValue,
+          generatePreview: false,
+        },
+                  /* userGesture */ false, /* awaitPromise */ false)
         .then(onEvaluate);
 
     function onEvaluate(result: SDK.RuntimeModel.EvaluationResult): void {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -299,26 +299,31 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             <!-- Dupe the styles into the main container because of the shadow root will prevent outer styles. -->
             <style>${cssOverviewCompletedViewStyles}</style>
             <div class="results-section horizontally-padded summary"
+                  jslog=${VisualLogging.section('summary')}
                   ${ref(e => { output.revealSection.set('summary', revealSection.bind(null, e));})}>
               <h1>${i18nString(UIStrings.overviewSummary)}</h1>
               ${renderSummary(input.elementCount, input.globalStyleStats, input.mediaQueries)}
             </div>
             <div class="results-section horizontally-padded colors"
+                jslog=${VisualLogging.section('colors')}
                 ${ref(e => { output.revealSection.set('colors', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.colors)}</h1>
                 ${renderColors(input.backgroundColors, input.textColors, input.textColorContrastIssues, input.fillColors, input.borderColors)}
               </div>
               <div class="results-section font-info"
+                    jslog=${VisualLogging.section('font-info')}
                     ${ref(e => { output.revealSection.set('font-info', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.fontInfo)}</h1>
                 ${renderFontInfo(input.fontInfo)}
               </div>
               <div class="results-section unused-declarations"
+                    jslog=${VisualLogging.section('unused-declarations')}
                     ${ref(e => { output.revealSection.set('unused-declarations', revealSection.bind(null, e));})}>
                 <h1>${i18nString(UIStrings.unusedDeclarations)}</h1>
                 ${renderUnusedDeclarations(input.unusedDeclarations)}
               </div>
               <div class="results-section media-queries"
+                    jslog=${VisualLogging.section('media-queries')}
                     ${ref(e => { output.revealSection.set('media-queries', revealSection.bind(null, e));})}>
               <h1>${i18nString(UIStrings.mediaQueries)}</h1>
               ${renderMediaQueries(input.mediaQueries)}
@@ -355,7 +360,7 @@ function renderSummary(
     elementCount: number, globalStyleStats: GlobalStyleStats,
     mediaQueries: Array<{title: string, nodes: Protocol.CSS.CSSMedia[]}>): TemplateResult {
   const renderSummaryItem = (label: string, value: number): TemplateResult => html`
-    <li>
+    <li jslog=${VisualLogging.item('summary-item')}>
       <div class="label">${label}</div>
       <div class="value">${formatter.format(value)}</div>
     </li>`;
@@ -440,7 +445,7 @@ function renderGroup(
           const width = 100 * nodes.length / total;
           const itemLabel = i18nString(UIStrings.nOccurrences, {n: nodes.length});
 
-          return html`<li>
+          return html`<li jslog=${VisualLogging.item('css-overview.group-item')}>
             <div class="title">${title}</div>
             <button data-type=${type} data-path=${path} data-label=${title}
             jslog=${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}
@@ -492,7 +497,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const border = getBorderString(minContrastIssue.backgroundColor.asLegacyColor());
 
   // clang-format off
-  return html`<li>
+  return html`<li jslog=${VisualLogging.item('contrast-issue')}>
     <button
       title=${title} aria-label=${title}
       data-type="contrast" data-key=${key} data-section="contrast" class="block"
@@ -525,7 +530,7 @@ function renderColor(section: string, color: string): LitTemplate {
     return nothing;
   }
   // clang-format off
-  return html`<li>
+  return html`<li jslog=${VisualLogging.item('color-item')}>
     <button title=${color} data-type="color" data-color=${color}
       data-section=${section} class="block"
       style=${styleMap({backgroundColor: color, border: getBorderString(borderColor)})}

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -427,6 +427,9 @@ export class ButtonProvider implements UI.Toolbar.Provider {
   private clicked(): void {
     ElementsPanel.instance().showToolbarPane(!this.view.isShowing() ? this.view : null, this.button);
   }
+  showPane(): void {
+    ElementsPanel.instance().showToolbarPane(this.view, this.button);
+  }
   item(): UI.Toolbar.ToolbarToggle {
     return this.button;
   }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -68,6 +68,7 @@ import * as ElementsComponents from './components/components.js';
 import {cssPath, jsPath, xPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
+import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
@@ -334,7 +335,7 @@ export interface ViewOutput {
   editorRef?: TextEditor.TextEditor.TextEditor;
 }
 
-export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective> {
+export function adornerRef(): DirectiveResult {
   let adorner: Adorners.Adorner.Adorner|undefined;
   return ref(el => {
     if (adorner) {
@@ -1264,6 +1265,11 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     function setPseudoStateCallback(pseudoState: string, enabled: boolean): void {
       node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
+      // Show the element state pane after the user sets an element state from
+      // the context menu. We assume it should help the users to discover the
+      // element state pane and prevent overhead of using the context menu
+      // (http://crbug.com/519254907).
+      ElementStatePaneWidget.ButtonProvider.instance().showPane();
     }
   }
 

package/front_end/panels/elements/EventListenersWidget.ts

@@ -240,17 +240,16 @@ export class EventListenersWidget extends UI.Widget.VBox {
     }
 
     return context
-        .evaluate(
-            {
-              expression: 'self',
-              objectGroup: objectGroupName,
-              includeCommandLineAPI: false,
-              silent: true,
-              returnByValue: false,
-              generatePreview: false,
-            },
-            /* userGesture */ false,
-            /* awaitPromise */ false)
+        .evaluateWithSelectedFrameFallback({
+          expression: 'self',
+          objectGroup: objectGroupName,
+          includeCommandLineAPI: false,
+          silent: true,
+          returnByValue: false,
+          generatePreview: false,
+        },
+                                           /* userGesture */ false,
+                                           /* awaitPromise */ false)
         .then(result => {
           if ('object' in result) {
             return result.object;

package/front_end/panels/issues/IssueView.ts

@@ -8,7 +8,6 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
-import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -36,7 +35,6 @@ import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBu
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
 import * as Components from './components/components.js';
-import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
 import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
 
@@ -220,7 +218,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
 }
 
 export class IssueView extends UI.TreeOutline.TreeElement {
-  #issue: AggregatedIssue;
+  #issue: IssuesManager.IssueAggregator.AggregatedIssue;
   #description: IssuesManager.MarkdownIssueDescription.IssueDescription;
   override toggleOnClick: boolean;
   affectedResources: UI.TreeOutline.TreeElement;
@@ -233,7 +231,8 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #hiddenIssuesMenu?: Components.HideIssuesMenu.HideIssuesMenu;
   #contentCreated = false;
 
-  constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
+  constructor(issue: IssuesManager.IssueAggregator.AggregatedIssue,
+              description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
     super(undefined, undefined, Platform.StringUtilities.toKebabCase(issue.getCategory()));
     this.#issue = issue;
     this.#description = description;
@@ -277,7 +276,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
    * this IssueView was initialized with fits the new issue as well, i.e.
    * title and issue description will not be updated.
    */
-  setIssue(issue: AggregatedIssue): void {
+  setIssue(issue: IssuesManager.IssueAggregator.AggregatedIssue): void {
     if (this.#issue !== issue) {
       this.#needsUpdateOnExpand = true;
     }
@@ -397,7 +396,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     }
     this.listItemElement.classList.toggle('hidden-issue', this.#issue.isHidden());
     if (this.#hiddenIssuesMenu) {
-      const data: HiddenIssuesMenuData = {
+      const data: Components.HideIssuesMenu.HiddenIssuesMenuData = {
         menuItemLabel: this.#issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
                                                 i18nString(UIStrings.hideIssuesLikeThis),
         menuItemAction: () => {

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

@@ -227,7 +227,7 @@ export class LinearMemoryViewer extends HTMLElement {
       selected: Math.floor((this.#address - this.#memoryOffset) / this.#numBytesInRow) === row,
     };
     return html`
-    <div class="row">
+    <div class="row" jslog=${VisualLogging.tableRow('linear-memory-row')}>
       <span class=${Lit.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
       ${this.#renderByteValues(startIndex, endIndex)}