chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -41,27 +41,27 @@ import type {ProfilesPanel} from './ProfilesPanel.js';
 
 const UIStrings = {
   /**
-   *@description Text in Profile Launcher View of a profiler tool
+   * @description Text in Profile Launcher View of a profiler tool
    */
   selectJavascriptVmInstance: 'Select JavaScript VM instance',
   /**
-   *@description Text to load something
+   * @description Text to load something
    */
   load: 'Load profile',
   /**
-   *@description Control button text content in Profile Launcher View of a profiler tool
+   * @description Control button text content in Profile Launcher View of a profiler tool
    */
   takeSnapshot: 'Take snapshot',
   /**
-   *@description Text of an item that stops the running task
+   * @description Text of an item that stops the running task
    */
   stop: 'Stop',
   /**
-   *@description Control button text content in Profile Launcher View of a profiler tool
+   * @description Control button text content in Profile Launcher View of a profiler tool
    */
   start: 'Start',
   /**
-   *@description Profile type header element text content in Profile Launcher View of a profiler tool
+   * @description Profile type header element text content in Profile Launcher View of a profiler tool
    */
   selectProfilingType: 'Select profiling type',
 } as const;

package/front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -18,7 +18,7 @@ import {
 
 const UIStrings = {
   /**
-   *@description Tooltip for the 3-dots menu in the Memory panel profiles list.
+   * @description Tooltip for the 3-dots menu in the Memory panel profiles list.
    */
   profileOptions: 'Profile options',
 } as const;

package/front_end/panels/profiler/ProfileView.ts

@@ -25,48 +25,48 @@ import {TopDownProfileDataGridTree} from './TopDownProfileDataGrid.js';
 
 const UIStrings = {
   /**
-   *@description Text in Profile View of a profiler tool
+   * @description Text in Profile View of a profiler tool
    */
   profile: 'Profile',
   /**
-   *@description Placeholder text in the search box of the JavaScript profiler tool. Users can search
+   * @description Placeholder text in the search box of the JavaScript profiler tool. Users can search
    *the results by the cost in milliseconds, the name of the function, or the file name.
    */
   findByCostMsNameOrFile: 'Find by cost (>50ms), name or file',
   /**
-   *@description Text for a programming function
+   * @description Text for a programming function
    */
   function: 'Function',
   /**
-   *@description Title of the Profiler tool
+   * @description Title of the Profiler tool
    */
   profiler: 'Profiler',
   /**
-   *@description Aria-label for profiles view combobox in memory tool
+   * @description Aria-label for profiles view combobox in memory tool
    */
   profileViewMode: 'Profile view mode',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon visibility button in the Profile View of a profiler tool
+   * @description Tooltip text that appears when hovering over the largeicon visibility button in the Profile View of a profiler tool
    */
   focusSelectedFunction: 'Focus selected function',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon delete button in the Profile View of a profiler tool
+   * @description Tooltip text that appears when hovering over the largeicon delete button in the Profile View of a profiler tool
    */
   excludeSelectedFunction: 'Exclude selected function',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon refresh button in the Profile View of a profiler tool
+   * @description Tooltip text that appears when hovering over the largeicon refresh button in the Profile View of a profiler tool
    */
   restoreAllFunctions: 'Restore all functions',
   /**
-   *@description Text in Profile View of a profiler tool
+   * @description Text in Profile View of a profiler tool
    */
   chart: 'Chart',
   /**
-   *@description Text in Profile View of a profiler tool
+   * @description Text in Profile View of a profiler tool
    */
   heavyBottomUp: 'Heavy (Bottom Up)',
   /**
-   *@description Text for selecting different profile views in the JS profiler tool. This option is a tree view.
+   * @description Text for selecting different profile views in the JS profiler tool. This option is a tree view.
    */
   treeTopDown: 'Tree (Top Down)',
   /**
@@ -75,26 +75,26 @@ const UIStrings = {
    */
   profileD: 'Profile {PH1}',
   /**
-   *@description Text in Profile View of a profiler tool
-   *@example {4 MB} PH1
+   * @description Text in Profile View of a profiler tool
+   * @example {4 MB} PH1
    */
   loadingD: 'Loading… {PH1}%',
   /**
-   *@description Text in Profile View of a profiler tool
-   *@example {example.file} PH1
-   *@example {cannot open file} PH2
+   * @description Text in Profile View of a profiler tool
+   * @example {example.file} PH1
+   * @example {cannot open file} PH2
    */
   fileSReadErrorS: 'File \'\'{PH1}\'\' read error: {PH2}',
   /**
-   *@description Text when something is loading
+   * @description Text when something is loading
    */
   loading: 'Loading…',
   /**
-   *@description Text in Profile View of a profiler tool
+   * @description Text in Profile View of a profiler tool
    */
   failedToReadFile: 'Failed to read file',
   /**
-   *@description Text in Profile View of a profiler tool
+   * @description Text in Profile View of a profiler tool
    */
   parsing: 'Parsing…',
   /**
@@ -127,7 +127,10 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
   searchableElement?: ProfileDataGridTree|ProfileFlameChart;
   profileDataGridTree?: ProfileDataGridTree;
   constructor() {
-    super(i18nString(UIStrings.profile));
+    super({
+      title: i18nString(UIStrings.profile),
+      viewId: 'profile',
+    });
 
     this.profileInternal = null;
 

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -54,30 +54,30 @@ import profilesSidebarTreeStyles from './profilesSidebarTree.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Profiles Panel of a profiler tool
-   *@example {'.js', '.json'} PH1
+   * @description Text in Profiles Panel of a profiler tool
+   * @example {'.js', '.json'} PH1
    */
   cantLoadFileSupportedFile: 'Can’t load file. Supported file extensions: \'\'{PH1}\'\'.',
   /**
-   *@description Text in Profiles Panel of a profiler tool
+   * @description Text in Profiles Panel of a profiler tool
    */
   cantLoadProfileWhileAnother: 'Can’t load profile while another profile is being recorded.',
   /**
-   *@description Text in Profiles Panel of a profiler tool
+   * @description Text in Profiles Panel of a profiler tool
    */
   profileLoadingFailed: 'Profile loading failed',
   /**
-   *@description Text in Profiles Panel of a profiler tool
-   *@example {cannot open file} PH1
+   * @description Text in Profiles Panel of a profiler tool
+   * @example {cannot open file} PH1
    */
   failReason: 'Reason: {PH1}.',
   /**
-   *@description Text in Profiles Panel of a profiler tool
-   *@example {2} PH1
+   * @description Text in Profiles Panel of a profiler tool
+   * @example {2} PH1
    */
   runD: 'Run {PH1}',
   /**
-   *@description Text in Profiles Panel of a profiler tool
+   * @description Text in Profiles Panel of a profiler tool
    */
   profiles: 'Profiles',
 } as const;

package/front_end/panels/profiler/heapProfiler.css

@@ -36,6 +36,14 @@
 .heap-snapshot-view .data-grid {
   border: none;
   flex: auto;
+
+  .data-container {
+    overflow-x: scroll;
+  }
+
+  .corner {
+    width: 100%;
+  }
 }
 
 .heap-snapshot-view .data-grid tr:empty {

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

@@ -13,51 +13,51 @@ let loadedProfilerModule: (typeof Profiler|undefined);
 
 const UIStrings = {
   /**
-   *@description Title for the profiler tab
+   * @description Title for the profiler tab
    */
   memory: 'Memory',
   /**
-   *@description Title of the 'Live Heap Profile' tool in the bottom drawer
+   * @description Title of the 'Live Heap Profile' tool in the bottom drawer
    */
   liveHeapProfile: 'Live Heap Profile',
   /**
-   *@description Title of an action under the Performance category that can be invoked through the Command Menu
+   * @description Title of an action under the Performance category that can be invoked through the Command Menu
    */
   startRecordingHeapAllocations: 'Start recording heap allocations',
   /**
-   *@description Title of an action under the Performance category that can be invoked through the Command Menu
+   * @description Title of an action under the Performance category that can be invoked through the Command Menu
    */
   stopRecordingHeapAllocations: 'Stop recording heap allocations',
   /**
-   *@description Title of an action in the live heap profile tool to start with reload
+   * @description Title of an action in the live heap profile tool to start with reload
    */
   startRecordingHeapAllocationsAndReload: 'Start recording heap allocations and reload the page',
   /**
-   *@description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
+   * @description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
    */
   startStopRecording: 'Start/stop recording',
   /**
-   *@description Command for shwoing the profiler tab
+   * @description Command for showing the profiler tab
    */
   showMemory: 'Show Memory',
   /**
-   *@description Command for showing the 'Live Heap Profile' tool in the bottom drawer
+   * @description Command for showing the 'Live Heap Profile' tool in the bottom drawer
    */
   showLiveHeapProfile: 'Show Live Heap Profile',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon clear button in the Profiles Panel of a profiler tool
+   * @description Tooltip text that appears when hovering over the largeicon clear button in the Profiles Panel of a profiler tool
    */
   clearAllProfiles: 'Clear all profiles',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon download button
+   * @description Tooltip text that appears when hovering over the largeicon download button
    */
   saveProfile: 'Save profile…',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon load button
+   * @description Tooltip text that appears when hovering over the largeicon load button
    */
   loadProfile: 'Load profile…',
   /**
-   *@description Command for deleting a profile in the Profiler panel
+   * @description Command for deleting a profile in the Profiler panel
    */
   deleteProfile: 'Delete profile',
 } as const;

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -23,19 +23,19 @@ const {live, classMap, repeat} = Directives;
 
 const UIStrings = {
   /**
-   *@description The title of a button that deletes a parameter.
+   * @description The title of a button that deletes a parameter.
    */
   deleteParameter: 'Delete parameter',
   /**
-   *@description The title of a button that adds a parameter.
+   * @description The title of a button that adds a parameter.
    */
   addParameter: 'Add a parameter',
   /**
-   *@description The title of a button that reset the value of a paremeters to its default value.
+   * @description The title of a button that reset the value of a parameters to its default value.
    */
   resetDefaultValue: 'Reset to default value',
   /**
-   *@description The title of a button to add custom key/value pairs to object parameters with no keys defined
+   * @description The title of a button to add custom key/value pairs to object parameters with no keys defined
    */
   addCustomProperty: 'Add custom property',
   /**
@@ -130,11 +130,11 @@ interface ViewInput {
   onParameterValueBlur: (event: Event) => void;
 }
 
-export type View = (input: ViewInput, output: object, targer: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 const splitDescription = (description: string): [string, string] => {
   // If the description is too long we make the UI a bit better by highlighting the first sentence
-  // which contains the most informations.
+  // which contains the most information.
   // The number 150 has been chosen arbitrarily
   if (description.length > 150) {
     const [firstSentence, restOfDescription] = description.split('.');
@@ -178,7 +178,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #view: View;
 
   constructor(element: HTMLElement, view = DEFAULT_VIEW) {
-    super(/* useShadowDom=*/ true, undefined, element);
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(editorWidgetStyles);
   }
@@ -706,8 +706,33 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.command = event.target.value;
     }
     this.populateParametersForCommandWithDefaultValues();
+    const target = event.target as HTMLElement;
+    await this.updateComplete;
+    this.#focusNextElement(target);
   };
 
+  /**
+   * When devtools-suggestion-input closes, it blurs itself resulting in
+   * the focus shifting to the overall DevTools window.
+   *
+   * This method focuses on the next focusable element (button or input)
+   * so that the focus remains in the Editor and Ctrl + Shift works.
+   */
+  #focusNextElement(target: HTMLElement): void {
+    // FIXME: can we do this via view output?
+    const elements =
+        this.contentElement.querySelectorAll('devtools-suggestion-input,.add-button') as NodeListOf<HTMLElement>;
+    const element = [...elements].findIndex(value => value === target.shadowRoot?.host);
+    if (element >= 0 && element + 1 < elements.length) {
+      elements[element + 1].focus();
+    } else {
+      (this.contentElement.querySelector('devtools-button[jslogcontext="protocol-monitor.send-command"]') as
+           HTMLElement |
+       undefined)
+          ?.focus();
+    }
+  }
+
   #createNestedParameter(type: Parameter, name: string): Parameter {
     if (type.type === ParameterType.OBJECT) {
       let typeRef = type.typeRef;
@@ -996,15 +1021,7 @@ function renderInlineButton(opts: {
 }
 
 function renderWarningIcon(): Lit.TemplateResult|undefined {
-  return html`<devtools-icon
-    .data=${{
-    iconName: 'warning-filled', color: 'var(--icon-warning)', width: '14px', height: '14px',
-  }
-  }
-    class=${classMap({
-    'warning-icon': true,
-  })}
-  >
+  return html`<devtools-icon name='warning-filled' class='warning-icon small'>
   </devtools-icon>`;
 }
 
@@ -1210,8 +1227,8 @@ function renderParameters(
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <div class="wrapper" jslog=${VisualLogging.pane('command-editor').track({resize: true})}>
-      <div class="editor-wrapper" @keydown=${input.onKeydown}>
+    <div class="wrapper" @keydown=${input.onKeydown} jslog=${VisualLogging.pane('command-editor').track({resize: true})}>
+      <div class="editor-wrapper">
         ${renderTargetSelectorRow(input)}
         <div class="row attribute padded">
           <div class="command">command<span class="separator">:</span></div>
@@ -1245,6 +1262,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                         .variant=${Buttons.Button.Variant.PRIMARY_TOOLBAR}
                         @click=${input.onCommandSend}></devtools-button>
       </devtools-toolbar>
-    </div>`, target, {host: input});
+    </div>`, target);
   // clang-format on
 };

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -26,7 +26,7 @@ const {styleMap} = Directives;
 const {widgetConfig, widgetRef} = UI.Widget;
 const UIStrings = {
   /**
-   *@description Text for one or a group of functions
+   * @description Text for one or a group of functions
    */
   method: 'Method',
   /**
@@ -40,65 +40,65 @@ const UIStrings = {
    */
   request: 'Request',
   /**
-   *@description Title of a cell content in protocol monitor. A Network response refers to the act of acknowledging a
-  network request. Should not be confused with answer.
+   * @description Title of a cell content in protocol monitor. A Network response refers to the act of acknowledging a
+   * network request. Should not be confused with answer.
    */
   response: 'Response',
   /**
-   *@description Text for timestamps of items
+   * @description Text for timestamps of items
    */
   timestamp: 'Timestamp',
   /**
-   *@description Title of a cell content in protocol monitor. It describes the time between sending a request and receiving a response.
+   * @description Title of a cell content in protocol monitor. It describes the time between sending a request and receiving a response.
    */
   elapsedTime: 'Elapsed time',
   /**
-   *@description Text in Protocol Monitor of the Protocol Monitor tab
+   * @description Text in Protocol Monitor of the Protocol Monitor tab
    */
   target: 'Target',
   /**
-   *@description Text to record a series of actions for analysis
+   * @description Text to record a series of actions for analysis
    */
   record: 'Record',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAll: 'Clear all',
   /**
-   *@description Text to filter result items
+   * @description Text to filter result items
    */
   filter: 'Filter',
   /**
-   *@description Text for the documentation of something
+   * @description Text for the documentation of something
    */
   documentation: 'Documentation',
   /**
-   *@description Text to open the CDP editor with the selected command
+   * @description Text to open the CDP editor with the selected command
    */
   editAndResend: 'Edit and resend',
   /**
-   *@description Cell text content in Protocol Monitor of the Protocol Monitor tab
-   *@example {30} PH1
+   * @description Cell text content in Protocol Monitor of the Protocol Monitor tab
+   * @example {30} PH1
    */
   sMs: '{PH1} ms',
   /**
-   *@description Text in Protocol Monitor of the Protocol Monitor tab
+   * @description Text in Protocol Monitor of the Protocol Monitor tab
    */
   noMessageSelected: 'No message selected',
   /**
-   *@description Text in Protocol Monitor of the Protocol Monitor tab if no message is selected
+   * @description Text in Protocol Monitor of the Protocol Monitor tab if no message is selected
    */
   selectAMessageToView: 'Select a message to see its details',
   /**
-   *@description Text in Protocol Monitor for the save button
+   * @description Text in Protocol Monitor for the save button
    */
   save: 'Save',
   /**
-   *@description Text in Protocol Monitor to describe the sessions column
+   * @description Text in Protocol Monitor to describe the sessions column
    */
   session: 'Session',
   /**
-   *@description A placeholder for an input in Protocol Monitor. The input accepts commands that are sent to the backend on Enter. CDP stands for Chrome DevTools Protocol.
+   * @description A placeholder for an input in Protocol Monitor. The input accepts commands that are sent to the backend on Enter. CDP stands for Chrome DevTools Protocol.
    */
   sendRawCDPCommand: 'Send a raw `CDP` command',
   /**
@@ -204,7 +204,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                              sidebar-initial-size="400"
                              sidebar-visibility=${input.sidebarVisible ? 'visible' : 'hidden'}
                              @change=${input.onSplitChange}>
-          <div slot="main" class="vbox">
+          <div slot="main" class="vbox protocol-monitor-main">
             <devtools-toolbar class="protocol-monitor-toolbar"
                                jslog=${VisualLogging.toolbar('top')}>
                <devtools-button title=${i18nString(UIStrings.record)}
@@ -279,11 +279,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           style="--override-data-grid-row-background-color: var(--sys-color-surface3)">
                         ${'id' in message ? html`
                           <td title="sent">
-                            <devtools-icon name="arrow-up-down" style="color: var(--icon-request-response); width: 16px; height: 16px;">
+                            <devtools-icon name="arrow-up-down" class="medium" style="color: var(--icon-request-response);">
                             </devtools-icon>
                           </td>` : html`
                           <td title="received">
-                            <devtools-icon name="arrow-down" style="color: var(--icon-request); width: 16px; height: 16px;">
+                            <devtools-icon name="arrow-down" class="medium" style="color: var(--icon-request);">
                             </devtools-icon>
                           </td>`}
                         <td>${message.method}</td>
@@ -291,7 +291,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         <td>
                           ${message.result    ? html`<code>${JSON.stringify(message.result)}</code>` :
                                 message.error ? html`<code>${JSON.stringify(message.error)}</code>` :
-                                                '(pending)'}
+                              'id' in message ? '(pending)' : ''}
                         </td>
                         <td data-value=${message.elapsedTime || 0}>
                           ${!('id' in message)  ? '' :
@@ -354,8 +354,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               ${widgetRef(JSONEditor, e => {output.editorWidget = e;})}>
           </devtools-widget>
         </devtools-split-view>`,
-        target,
-        {host: input}
+        target
     );
   // clang-format on
 };
@@ -668,7 +667,7 @@ export class InfoWidget extends UI.Widget.VBox {
   type: 'sent'|'received'|undefined;
   selectedTab: 'request'|'response'|undefined;
   constructor(element: HTMLElement) {
-    super(undefined, undefined, element);
+    super(element);
     this.tabbedPane = new UI.TabbedPane.TabbedPane();
     this.tabbedPane.appendTab('request', i18nString(UIStrings.request), new UI.Widget.Widget());
     this.tabbedPane.appendTab('response', i18nString(UIStrings.response), new UI.Widget.Widget());

package/front_end/panels/protocol_monitor/protocolMonitor.css

@@ -3,15 +3,21 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+@scope to (devtools-widget > *) {
+  .protocol-monitor-toolbar {
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
 
-.protocol-monitor-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
-}
+  .protocol-monitor-bottom-toolbar {
+    border-top: 1px solid var(--sys-color-divider);
+  }
 
-.protocol-monitor-bottom-toolbar {
-  border-top: 1px solid var(--sys-color-divider);
-}
+  .target-selector {
+    max-width: 120px;
+  }
 
-.target-selector {
-  max-width: 120px;
-}
+  .protocol-monitor-main {
+    /* allows the main area to grow automatically */
+    flex-grow: 1;
+  }
+}

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

@@ -17,7 +17,7 @@ const UIStrings = {
    */
   protocolMonitor: 'Protocol monitor',
   /**
-   *@description Command for showing the 'Protocol monitor' tool in the bottom drawer
+   * @description Command for showing the 'Protocol monitor' tool in the bottom drawer
    */
   showProtocolMonitor: 'Show Protocol monitor',
 } as const;