chrome-devtools-frontend 1.0.1662289 → 1.0.1662965

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

@@ -4,6 +4,7 @@
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -14,6 +15,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import adsViewStyles from './adsView.css.js';
 
 const {html} = Lit;
+const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -74,6 +76,19 @@ const UIStrings = {
    * @description Accessible name for the ad iframes table.
    */
   adIframes: 'Ad iframes',
+  /**
+   * @description Title for the settings section.
+   */
+  settings: 'Settings',
+  /**
+   * @description The name of a checkbox setting. This setting highlights the
+   * rendering elements for ads that are found on the page.
+   */
+  highlightAds: 'Highlight ads',
+  /**
+   * @description Explanation text for the 'Highlight ads' setting.
+   */
+  highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/AdsView.ts', UIStrings);
@@ -206,6 +221,14 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           </table>
         </devtools-data-grid>
       </div>
+      <div class="settings-title">${i18nString(UIStrings.settings)}</div>
+      <devtools-checkbox class="setting-container"
+          ${bindToSetting(Common.Settings.Settings.instance().moduleSetting('show-ad-highlights'))}>
+        <div class="setting-text-container">
+          <div class="setting-label">${i18nString(UIStrings.highlightAds)}</div>
+          <div class="setting-explanation">${i18nString(UIStrings.highlightsElementsRedDetectedToBe)}</div>
+        </div>
+      </devtools-checkbox>
     </div>
   `, target);
   // clang-format on

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

@@ -36,7 +36,7 @@ const UIStrings = {
   /**
    * @description Text in Shared Storage Events View of the Application panel
    * Scope of shared storage event such as 'window', 'sharedStorageWorklet',
-   * 'protectedAudienceWorklet', or 'header'.
+   * or 'header'.
    */
   eventScope: 'Access Scope',
   /**

package/front_end/panels/application/components/adsView.css

@@ -60,7 +60,8 @@
 }
 
 .metrics-title,
-.ad-frames-title {
+.ad-frames-title,
+.settings-title {
   color: var(--sys-color-on-surface);
   flex: 0 0 auto;
   font-weight: bold;
@@ -83,3 +84,22 @@
   resize: vertical;
   overflow: hidden;
 }
+
+devtools-checkbox.setting-container {
+  /*
+   * Apply negative margins here to offset the default devtools-checkbox style
+   * to align this component with the rest of the Ads panel layout.
+   */
+  margin: 0 0 -6px -6px;
+}
+
+.setting-text-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.setting-explanation {
+  color: var(--sys-color-token-subtle);
+  white-space: break-spaces;
+  margin-top: 0;
+}

package/front_end/panels/application/indexedDBViews.css

@@ -49,7 +49,7 @@
 .indexed-db-key-path {
   color: var(--sys-color-error);
   white-space: pre-wrap;
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
 }
 
 .indexed-db-container {

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -47,6 +47,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import type * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.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 * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon} from '../../ui/kit/kit.js';
@@ -343,6 +344,16 @@ const UIStrings = {
    * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a potentially blocking resource.
    */
   potentiallyBlocking: 'Potentially blocking',
+  /**
+   * @description Text indicating a request originated from the DevTools console. Used as a subtitle in the
+   * Initiator column.
+   */
+  console: 'Console',
+  /**
+   * @description Tooltip for the console icon in the Network panel, indicating a request was initiated
+   * from the Console.
+   */
+  requestOriginatedFromConsole: 'Request originated from Console',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
@@ -1009,6 +1020,29 @@ export class NetworkRequestNode extends NetworkNode {
     return aValue.localeCompare(bValue) || aRequest.identityCompare(bRequest);
   }
 
+  static isConsoleOriginated(request: SDK.NetworkRequest.NetworkRequest): boolean {
+    const resourceType = request.resourceType();
+    if (resourceType !== Common.ResourceType.resourceTypes.Fetch &&
+        resourceType !== Common.ResourceType.resourceTypes.XHR) {
+      return false;
+    }
+    const initiator = request.initiator();
+    if (!initiator || initiator.type !== Protocol.Network.InitiatorType.Script) {
+      return false;
+    }
+    if (initiator.url) {
+      return false;
+    }
+    if (!initiator.stack) {
+      return false;
+    }
+    return StackTrace.StackTrace.isConsoleOriginated(initiator.stack);
+  }
+
+  private isConsoleOriginated(): boolean {
+    return NetworkRequestNode.isConsoleOriginated(this.requestInternal);
+  }
+
   override showingInitiatorChainChanged(): void {
     const showInitiatorChain = this.showingInitiatorChain();
 
@@ -1340,6 +1374,13 @@ export class NetworkRequestNode extends NetworkNode {
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
       render(iconElement, cell);
 
+      // render Console icon if this request originated from Console
+      if (this.isConsoleOriginated()) {
+        const consoleIcon = createIcon('terminal', 'network-console-icon');
+        UI.Tooltip.Tooltip.install(consoleIcon, i18nString(UIStrings.requestOriginatedFromConsole));
+        cell.appendChild(consoleIcon);
+      }
+
       // render Ask AI button
       const aiButtonContainer = this.createAiButtonIfAvailable();
       if (aiButtonContainer) {
@@ -1590,7 +1631,8 @@ export class NetworkRequestNode extends NetworkNode {
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);
-        this.appendSubtitle(cell, i18nString(UIStrings.script));
+        this.appendSubtitle(cell,
+                            this.isConsoleOriginated() ? i18nString(UIStrings.console) : i18nString(UIStrings.script));
         cell.classList.add('network-script-initiated');
         break;
       }

package/front_end/panels/network/RequestInitiatorView.ts

@@ -12,6 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {NetworkRequestNode} from './NetworkDataGridNode.js';
 import requestInitiatorViewStyles from './requestInitiatorView.css.js';
 import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
@@ -30,6 +31,10 @@ const UIStrings = {
    * @description Title of a section in Request Initiator view of the Network Panel
    */
   requestInitiatorChain: 'Request initiator chain',
+  /**
+   * @description Label shown in the initiator chain when a request was initiated from the Console.
+   */
+  console: 'Console',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -51,6 +56,7 @@ export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
   request: SDK.NetworkRequest.NetworkRequest;
+  isConsoleOriginated: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -83,6 +89,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
               stackTrace: input.stackTrace,
             })}
           </li>
+          ${input.isConsoleOriginated ? html`
+            <li role="treeitem" class="console-origin-label">
+              ${i18nString(UIStrings.console)}
+            </li>
+          ` : nothing}
         </ul>
       </li>
     `;
@@ -167,13 +178,21 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         ${i18nString(UIStrings.requestInitiatorChain)}
         ${hasInitiatorChain ? html`
           <ul role="group">
-            ${renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
+            ${input.isConsoleOriginated ? html`
+              <li role="treeitem" aria-expanded="true" open>
+                <span>${i18nString(UIStrings.console)}</span>
+                <ul role="group">
+                  ${renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
+                </ul>
+              </li>` :
+              renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
           </ul>` : nothing}
       </li>`;
     // clang-format on
   };
 
-  const hasInitiatorChain = input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1;
+  const hasInitiatorChain =
+      input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1 || input.isConsoleOriginated;
 
   // clang-format off
   render(html`
@@ -242,10 +261,13 @@ export class RequestInitiatorView extends UI.Widget.VBox {
                        .createStackTraceFromProtocolRuntime(rawStack, target);
     }
 
+    const isConsoleOriginated = NetworkRequestNode.isConsoleOriginated(this.request);
+
     const viewInput: ViewInput = {
       initiatorGraph,
       stackTrace,
       request: this.request,
+      isConsoleOriginated,
     };
 
     this.#view(viewInput, undefined, this.contentElement);

package/front_end/panels/network/networkLogView.css

@@ -262,12 +262,17 @@ td.time-column {
 }
 
 .data-grid-data-grid-node devtools-icon[name="arrow-up-down-circle"],
+.data-grid-data-grid-node devtools-icon.network-console-icon,
 .network-log-grid.data-grid.small .icon {
   width: 16px;
   height: 16px;
   vertical-align: sub;
 }
 
+.data-grid-data-grid-node devtools-icon.network-console-icon {
+  margin-right: 3px;
+}
+
 .image-network-icon-preview {
   inset: 0;
   margin: auto;

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -17,6 +17,11 @@
   padding: 4px;
 }
 
+.console-origin-label {
+  color: var(--sys-color-token-subtle);
+  padding: 2px 4px 2px 20px;
+}
+
 .request-initiator-view-section-title:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
 }