chrome-devtools-frontend 1.0.1029692 → 1.0.1030457

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -6,9 +6,12 @@ import * as Common from '../../../core/common/common.js';
 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 Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import * as Persistence from '../../../models/persistence/persistence.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -16,6 +19,7 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Sources from '../../sources/sources.js';
 
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
@@ -69,6 +73,11 @@ const UIStrings = {
   */
   general: 'General',
   /**
+  *@description Label for a link from the network panel's headers view to the file in which
+  * header overrides are defined in the sources panel.
+  */
+  headerOverrides: 'Header overrides',
+  /**
   *@description Text that is usually a hyperlink to more documentation
   */
   learnMore: 'Learn more',
@@ -173,12 +182,16 @@ export class RequestHeadersView extends UI.Widget.VBox {
   wasShown(): void {
     this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
     this.#refreshHeadersView();
   }
 
   willHide(): void {
     this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
     this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
   }
 
   #refreshHeadersView(): void {
@@ -200,6 +213,7 @@ export class RequestHeadersComponent extends HTMLElement {
   #showRequestHeadersText = false;
   #showResponseHeadersTextFull = false;
   #showRequestHeadersTextFull = false;
+  readonly #workspace = Workspace.Workspace.WorkspaceImpl.instance();
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -208,6 +222,23 @@ export class RequestHeadersComponent extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.addEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  disconnectedCallback(): void {
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeAdded, this.#uiSourceCodeAddedOrRemoved, this);
+    this.#workspace.removeEventListener(
+        Workspace.Workspace.Events.UISourceCodeRemoved, this.#uiSourceCodeAddedOrRemoved, this);
+  }
+
+  #uiSourceCodeAddedOrRemoved(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    if (this.#getHeaderOverridesFileUrl() === event.data.url()) {
+      this.#render();
+    }
   }
 
   #render(): void {
@@ -290,6 +321,7 @@ export class RequestHeadersComponent extends HTMLElement {
           title: i18nString(UIStrings.responseHeaders),
           headerCount: this.#request.sortedResponseHeaders.length,
           checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
+          additionalContent: this.#renderHeaderOverridesLink(),
         } as CategoryData}
         aria-label=${i18nString(UIStrings.responseHeaders)}
       >
@@ -302,6 +334,57 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
+  #renderHeaderOverridesLink(): LitHtml.LitTemplate {
+    const overrideable = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES);
+    if (!overrideable || !this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl())) {
+      return LitHtml.nothing;
+    }
+
+    const overridesSetting: Common.Settings.Setting<boolean> =
+        Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled');
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    const fileIcon = overridesSetting.get() ? html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon purple-dot" .data=${{
+          iconName: 'file-sync_icon',
+          width: '11px',
+          height: '13px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>` : html`
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          iconName: 'file_icon',
+          color: 'var(--color-text-primary)',
+          width: '12px',
+          height: '12px',
+        } as IconButton.Icon.IconData}>
+      </${IconButton.Icon.Icon.litTagName}>`;
+    // clang-format on
+
+    const revealHeadersFile = (event: Event): void => {
+      event.preventDefault();
+      const uiSourceCode = this.#workspace.uiSourceCodeForURL(this.#getHeaderOverridesFileUrl());
+      if (uiSourceCode) {
+        Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(uiSourceCode);
+      }
+    };
+
+    return html`
+      <x-link @click=${revealHeadersFile} class="link devtools-link">
+        ${fileIcon}${i18nString(UIStrings.headerOverrides)}
+      </x-link>
+    `;
+  }
+
+  #getHeaderOverridesFileUrl(): Platform.DevToolsPath.UrlString {
+    if (!this.#request) {
+      return Platform.DevToolsPath.EmptyUrlString;
+    }
+    const fileUrl = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(
+        this.#request.url(), /* ignoreInactive */ true);
+    return fileUrl.substring(0, fileUrl.lastIndexOf('/')) + '/' +
+        Persistence.NetworkPersistenceManager.HEADERS_FILENAME as Platform.DevToolsPath.UrlString;
+  }
+
   #renderRequestHeaders(): LitHtml.LitTemplate {
     if (!this.#request) {
       return LitHtml.nothing;
@@ -385,7 +468,10 @@ export class RequestHeadersComponent extends HTMLElement {
             LitHtml.nothing
           }${header.name}:
         </div>
-        <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">
+        <div
+          class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}"
+          @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+        >
           ${header.value?.toString() || ''}
           ${this.#maybeRenderHeaderValueSuffix(header)}
         </div>
@@ -582,28 +668,43 @@ export class RequestHeadersComponent extends HTMLElement {
       >
         <div class="row">
           <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
-          <div class="header-value">${this.#request.url()}</div>
+          <div
+            class="header-value"
+            @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+          >${this.#request.url()}</div>
         </div>
         ${this.#request.statusCode? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.requestMethod)}:</div>
-            <div class="header-value">${this.#request.requestMethod}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.requestMethod}</div>
           </div>
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.statusCode)}:</div>
-            <div class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}">${statusText}</div>
+            <div
+              class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${statusText}</div>
           </div>
         ` : ''}
         ${this.#request.remoteAddress()? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.remoteAddress)}:</div>
-            <div class="header-value">${this.#request.remoteAddress()}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.remoteAddress()}</div>
           </div>
         ` : ''}
         ${this.#request.referrerPolicy()? html`
           <div class="row">
             <div class="header-name">${i18nString(UIStrings.referrerPolicy)}:</div>
-            <div class="header-value">${this.#request.referrerPolicy()}</div>
+            <div
+              class="header-value"
+              @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+            >${this.#request.referrerPolicy()}</div>
           </div>
         ` : ''}
       </${Category.litTagName}>
@@ -625,6 +726,7 @@ export interface CategoryData {
   title: Common.UIString.LocalizedString;
   headerCount?: number;
   checked?: boolean;
+  additionalContent?: LitHtml.LitTemplate;
 }
 
 export class Category extends HTMLElement {
@@ -634,6 +736,7 @@ export class Category extends HTMLElement {
   #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   #headerCount?: number = undefined;
   #checked: boolean|undefined = undefined;
+  #additionalContent: LitHtml.LitTemplate|undefined = undefined;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles, Input.checkboxStyles];
@@ -645,6 +748,7 @@ export class Category extends HTMLElement {
         Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
     this.#headerCount = data.headerCount;
     this.#checked = data.checked;
+    this.#additionalContent = data.additionalContent;
     this.#render();
   }
 
@@ -659,18 +763,19 @@ export class Category extends HTMLElement {
     render(html`
       <details ?open=${isOpen} @toggle=${this.#onToggle}>
         <summary class="header" @keydown=${this.#onSummaryKeyDown}>
-          ${this.#title}${this.#headerCount ?
-            html`<span class="header-count"> (${this.#headerCount})</span>` :
-            LitHtml.nothing
-          }
-          ${this.#checked !== undefined ? html`
-            <span class="raw-checkbox-container">
-              <label>
-                <input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />
-                ${i18nString(UIStrings.raw)}
-              </label>
-            </span>
-          ` : LitHtml.nothing}
+          <div class="header-grid-container">
+            <div>
+              ${this.#title}${this.#headerCount ?
+                html`<span class="header-count"> (${this.#headerCount})</span>` :
+                LitHtml.nothing
+              }
+            </div>
+            <div class="hide-when-closed">
+              ${this.#checked !== undefined ? html`
+                <label><input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />${i18nString(UIStrings.raw)}</label>
+              ` : LitHtml.nothing}
+            </div>
+            <div class="hide-when-closed">${this.#additionalContent}</div>
         </summary>
         <slot></slot>
       </details>

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -125,6 +125,8 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
   private messages: LogMessage[] = [];
   private isRecording: boolean = false;
 
+  #historyAutocompleteDataProvider = new HistoryAutocompleteDataProvider();
+
   constructor() {
     super(true);
     this.started = false;
@@ -162,6 +164,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     this.infoWidget = new InfoWidget();
 
     const dataGridInitialData: DataGrid.DataGridController.DataGridControllerData = {
+      paddingRowsCount: 100,
       columns: [
         {
           id: 'type',
@@ -303,21 +306,24 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     const shrinkFactor = 0.2;
     const tooltip = i18nString(UIStrings.sendRawCDPCommandExplanation);
     const input = new UI.Toolbar.ToolbarInput(
-        placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip, undefined, false);
+        placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip,
+        this.#historyAutocompleteDataProvider.buildTextPromptCompletions, false);
     input.addEventListener(UI.Toolbar.ToolbarInput.Event.EnterPressed, () => this.#onCommandSend(input));
     return input;
   }
 
   #onCommandSend(input: UI.Toolbar.ToolbarInput): void {
-    const {command, parameters} = parseCommandInput(input.value());
+    const value = input.value();
+    const {command, parameters} = parseCommandInput(value);
     const test = ProtocolClient.InspectorBackend.test;
     // TODO: TS thinks that properties are read-only because
     // in TS test is defined as a namespace.
     // @ts-ignore
     test.sendRawMessage(command, parameters, () => {});
+    this.#historyAutocompleteDataProvider.addEntry(value);
   }
 
-  static instance(opts = {forceNew: null}): ProtocolMonitorImpl {
+  static instance(opts: {forceNew: null|boolean} = {forceNew: null}): ProtocolMonitorImpl {
     const {forceNew} = opts;
     if (!protocolMonitorImplInstance || forceNew) {
       protocolMonitorImplInstance = new ProtocolMonitorImpl();
@@ -487,6 +493,39 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
   }
 }
 
+export class HistoryAutocompleteDataProvider {
+  #maxHistorySize = 200;
+  #commandHistory = new Set<string>();
+
+  constructor(maxHistorySize?: number) {
+    if (maxHistorySize !== undefined) {
+      this.#maxHistorySize = maxHistorySize;
+    }
+  }
+
+  buildTextPromptCompletions =
+      async(expression: string, prefix: string, force?: boolean): Promise<UI.SuggestBox.Suggestions> => {
+    if (!prefix && !force && expression) {
+      return [];
+    }
+    const newestToOldest = [...this.#commandHistory].reverse();
+    return newestToOldest.filter(cmd => cmd.startsWith(prefix)).map(text => ({
+                                                                      text,
+                                                                    }));
+  };
+
+  addEntry(value: string): void {
+    if (this.#commandHistory.has(value)) {
+      this.#commandHistory.delete(value);
+    }
+    this.#commandHistory.add(value);
+    if (this.#commandHistory.size > this.#maxHistorySize) {
+      const earliestEntry = this.#commandHistory.values().next().value;
+      this.#commandHistory.delete(earliestEntry);
+    }
+  }
+}
+
 export class InfoWidget extends UI.Widget.VBox {
   private readonly tabbedPane: UI.TabbedPane.TabbedPane;
   constructor() {

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -58,6 +58,7 @@ export interface DataGridData {
   activeSort: SortState|null;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 const enum UserScrollState {
@@ -69,7 +70,6 @@ const enum UserScrollState {
 const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 
 const ROW_HEIGHT_PIXELS = 18;
-const PADDING_ROWS_COUNT = 10;
 
 export class DataGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-data-grid`;
@@ -82,6 +82,7 @@ export class DataGrid extends HTMLElement {
   #userScrollState: UserScrollState = UserScrollState.NOT_SCROLLED;
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
   #label?: string = undefined;
+  #paddingRowsCount = 10;
   #currentResize: {
     rightCellCol: HTMLTableColElement,
     leftCellCol: HTMLTableColElement,
@@ -139,6 +140,7 @@ export class DataGrid extends HTMLElement {
       activeSort: this.#sortState,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -171,6 +173,10 @@ export class DataGrid extends HTMLElement {
       this.#cellToFocusIfUserTabsIn = calculateFirstFocusableCell({columns: this.#columns, rows: this.#rows});
     }
 
+    if (data.paddingRowsCount !== undefined) {
+      this.#paddingRowsCount = data.paddingRowsCount;
+    }
+
     if (this.#hasRenderedAtLeastOnce && this.#userHasCellFocused()) {
       const [selectedColIndex, selectedRowIndex] = this.#tabbableCell();
       const columnOutOfBounds = selectedColIndex > this.#columns.length;
@@ -220,15 +226,14 @@ export class DataGrid extends HTMLElement {
       return;
     }
 
-    void coordinator.read(() => {
-      const wrapper = this.#shadow.querySelector('.wrapping-container');
-      if (!wrapper) {
-        return;
-      }
+    const wrapper = this.#shadow.querySelector('.wrapping-container');
+    if (!wrapper) {
+      return;
+    }
+
+    void coordinator.scroll(() => {
       const scrollHeight = wrapper.scrollHeight;
-      void coordinator.scroll(() => {
-        wrapper.scrollTo(0, scrollHeight);
-      });
+      wrapper.scrollTo(0, scrollHeight);
     });
   }
 
@@ -643,7 +648,7 @@ export class DataGrid extends HTMLElement {
         scrollTop = wrapper.scrollTop;
         clientHeight = wrapper.clientHeight;
       }
-      const padding = ROW_HEIGHT_PIXELS * PADDING_ROWS_COUNT;
+      const padding = ROW_HEIGHT_PIXELS * this.#paddingRowsCount;
       let topVisibleRow = Math.floor((scrollTop - padding) / ROW_HEIGHT_PIXELS);
       let bottomVisibleRow = Math.ceil((scrollTop + clientHeight + padding) / ROW_HEIGHT_PIXELS);
 

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -31,6 +31,7 @@ export interface DataGridControllerData {
   initialSort?: SortState;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 export class DataGridController extends HTMLElement {
@@ -55,6 +56,8 @@ export class DataGridController extends HTMLElement {
   #sortState: Readonly<SortState>|null = null;
   #filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
 
+  #paddingRowsCount?: number;
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [dataGridControllerStyles];
   }
@@ -66,6 +69,7 @@ export class DataGridController extends HTMLElement {
       filters: this.#filters,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -88,6 +92,8 @@ export class DataGridController extends HTMLElement {
       this.#sortRows(this.#sortState);
     }
 
+    this.#paddingRowsCount = data.paddingRowsCount;
+
     this.#render();
   }
 
@@ -222,6 +228,7 @@ export class DataGridController extends HTMLElement {
           activeSort: this.#sortState,
           contextMenus: this.#contextMenus,
           label: this.#label,
+          paddingRowsCount: this.#paddingRowsCount,
         } as DataGridData}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}

package/front_end/ui/legacy/TextPrompt.ts

@@ -89,7 +89,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   initialize(
-      completions: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>,
+      completions: (this: null, expression: string, filter: string, force?: boolean|undefined) => Promise<Suggestion[]>,
       stopCharacters?: string, usesSuggestionBuilder?: boolean): void {
     this.loadCompletions = completions;
     this.completionStopCharacters = stopCharacters || ' =:[({;,!+-*/&|^<>.';

package/package.json

@@ -19,12 +19,13 @@
     "url": "git+https://github.com/ChromeDevTools/devtools-frontend.git"
   },
   "scripts": {
-    "auto-debug-e2etest": "autoninja -C out/Default && npm run debug-e2etest --",
-    "auto-debug-interactionstest": "autoninja -C out/Default && npm run debug-interactionstest --",
+    "auto-debug-e2etest": "npm run build && npm run debug-e2etest --",
+    "auto-debug-interactionstest": "npm run build && npm run debug-interactionstest --",
     "auto-debug-unittest": "DEBUG_TEST=1 npm run auto-unittest --",
-    "auto-e2etest": "autoninja -C out/Default && npm run e2etest --",
-    "auto-interactionstest": "autoninja -C out/Default && npm run interactionstest --",
+    "auto-e2etest": "npm run build && npm run e2etest --",
+    "auto-interactionstest": "npm run build && npm run interactionstest --",
     "auto-unittest": "scripts/test/run_auto_unittests.py --no-text-coverage",
+    "prebuild": "gn gen out/Default",
     "build": "autoninja -C out/Default",
     "build-release": "autoninja -C out/Release",
     "check": "npm run check-lint && npm run check-loc",
@@ -55,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1029692"
+  "version": "1.0.1030457"
 }