chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/profiler/TopDownProfileDataGrid.ts

@@ -30,9 +30,9 @@
 import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
 import type * as UI from '../../ui/legacy/legacy.js';
 
-import {type Formatter, ProfileDataGridNode, ProfileDataGridTree} from './ProfileDataGrid.js';
+import {type Formatter, ProfileDataGridTree, ProfileEntry} from './ProfileDataGrid.js';
 
-export class TopDownProfileDataGridNode extends ProfileDataGridNode {
+export class TopDownProfileEntry extends ProfileEntry {
   remainingChildren: CPUProfile.ProfileTreeModel.ProfileNode[];
   constructor(profileNode: CPUProfile.ProfileTreeModel.ProfileNode, owningTree: TopDownProfileDataGridTree) {
     const hasChildren = Boolean(profileNode.children?.length);
@@ -42,21 +42,20 @@ export class TopDownProfileDataGridNode extends ProfileDataGridNode {
     this.remainingChildren = profileNode.children;
   }
 
-  static sharedPopulate(container: TopDownProfileDataGridTree|TopDownProfileDataGridNode): void {
+  static sharedPopulate(container: TopDownProfileDataGridTree|TopDownProfileEntry): void {
     const children = container.remainingChildren;
     const childrenLength = children.length;
 
     for (let i = 0; i < childrenLength; ++i) {
-      container.appendChild(
-          new TopDownProfileDataGridNode(children[i], (container.tree as TopDownProfileDataGridTree)));
+      container.appendChild(new TopDownProfileEntry(children[i], (container.tree as TopDownProfileDataGridTree)));
     }
 
     container.remainingChildren = [];
   }
 
-  static excludeRecursively(container: TopDownProfileDataGridTree|TopDownProfileDataGridNode, aCallUID: string): void {
+  static excludeRecursively(container: TopDownProfileDataGridTree|TopDownProfileEntry, aCallUID: string): void {
     if (container.remainingChildren.length > 0) {
-      (container as TopDownProfileDataGridNode).populate();
+      (container as TopDownProfileEntry).populate();
     }
 
     container.save();
@@ -65,18 +64,18 @@ export class TopDownProfileDataGridNode extends ProfileDataGridNode {
     let index = container.children.length;
 
     while (index--) {
-      TopDownProfileDataGridNode.excludeRecursively((children[index] as TopDownProfileDataGridNode), aCallUID);
+      TopDownProfileEntry.excludeRecursively((children[index] as TopDownProfileEntry), aCallUID);
     }
 
     const child = container.childrenByCallUID.get(aCallUID);
 
     if (child) {
-      ProfileDataGridNode.merge(container, child, true);
+      ProfileEntry.merge(container, child, true);
     }
   }
 
   override populateChildren(): void {
-    TopDownProfileDataGridNode.sharedPopulate(this);
+    TopDownProfileEntry.sharedPopulate(this);
   }
 }
 
@@ -88,10 +87,10 @@ export class TopDownProfileDataGridTree extends ProfileDataGridTree {
       rootProfileNode: CPUProfile.ProfileTreeModel.ProfileNode, total: number) {
     super(formatter, searchableView, total);
     this.remainingChildren = rootProfileNode.children;
-    ProfileDataGridNode.populate(this);
+    ProfileEntry.populate(this);
   }
 
-  override focus(profileDataGridNode: ProfileDataGridNode): void {
+  override focus(profileDataGridNode: ProfileEntry): void {
     if (!profileDataGridNode) {
       return;
     }
@@ -99,22 +98,19 @@ export class TopDownProfileDataGridTree extends ProfileDataGridTree {
     this.save();
     profileDataGridNode.savePosition();
 
-    this.children = [profileDataGridNode];
+    this.removeChildren();
+    this.appendChild(profileDataGridNode);
     this.total = profileDataGridNode.total;
   }
 
-  override exclude(profileDataGridNode: ProfileDataGridNode): void {
+  override exclude(profileDataGridNode: ProfileEntry): void {
     if (!profileDataGridNode) {
       return;
     }
 
     this.save();
 
-    TopDownProfileDataGridNode.excludeRecursively(this, profileDataGridNode.callUID);
-
-    if (this.lastComparator) {
-      this.sort(this.lastComparator, true);
-    }
+    TopDownProfileEntry.excludeRecursively(this, profileDataGridNode.callUID);
   }
 
   override restore(): void {
@@ -122,12 +118,12 @@ export class TopDownProfileDataGridTree extends ProfileDataGridTree {
       return;
     }
 
-    this.children[0].restorePosition();
+    this.children[0]?.restorePosition();
 
     super.restore();
   }
 
   override populateChildren(): void {
-    TopDownProfileDataGridNode.sharedPopulate(this);
+    TopDownProfileEntry.sharedPopulate(this);
   }
 }

package/front_end/panels/profiler/profilesPanel.css

@@ -33,33 +33,29 @@
   position: relative;
 }
 
-.profile-view .data-grid table.data {
+.data-grid table.data {
   background: var(--sys-color-cdt-base-container);
 }
 
-.profile-view .data-grid tr:not(.selected) .highlight {
-  background-color: var(--sys-color-tonal-container);
-}
-
-.profile-view .data-grid tr:hover td:not(.bottom-filler-td) {
+.data-grid tr:hover td:not(.bottom-filler-td) {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
 
-.profile-view .data-grid td.numeric-column {
+.data-grid td.numeric-column {
   text-align: right;
 }
 
-.profile-view .data-grid div.profile-multiple-values {
+.data-grid div.profile-multiple-values {
   float: right;
 }
 
-.profile-view .data-grid span.percent-column {
+.data-grid span.percent-column {
   color: var(--sys-color-token-subtle);
   width: 9ex;
   display: inline-block;
 }
 
-.profile-view .data-grid tr.selected span {
+.data-grid tr.selected span {
   color: inherit;
 }
 
@@ -83,13 +79,13 @@
   overflow: hidden;
 }
 
-.profile-view .data-grid {
+.data-grid {
   border: none;
   flex: auto;
 }
 
-.profile-view .data-grid th.self-column,
-.profile-view .data-grid th.total-column {
+.data-grid th.self-column,
+.data-grid th.total-column {
   text-align: center;
 }
 

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -351,7 +351,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               ${widgetRef(JSONEditor, e => {output.editorWidget = e;})}>
           </devtools-widget>
         </devtools-split-view>`,
-        target
+        target,
     );
   // clang-format on
 };
@@ -476,7 +476,7 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel implements SDK.TargetMan
     const viewOutput = {
       set editorWidget(value: JSONEditor) {
         that.#editorWidget = value;
-      }
+      },
     };
     this.#view(viewInput, viewOutput, this.contentElement);
   }

package/front_end/panels/recorder/CreateRecordingView.ts

@@ -137,7 +137,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     onUpdate,
     onRecordingStarted,
     onRecordingCancelled,
-    onErrorReset
+    onErrorReset,
   } = input;
 
   const nameInputRef = createRef<HTMLInputElement>();
@@ -207,7 +207,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           id="user-flow-name"
           ${ref(nameInputRef)}
           @input=${(e:Event) => onUpdate({
-            name: (e.target as HTMLInputElement).value.trim()
+            name: (e.target as HTMLInputElement).value.trim(),
           })}
         />
         <label class="row-label" for="selector-attribute">
@@ -228,7 +228,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           class="devtools-text-input"
           id="selector-attribute"
           @input=${(e:Event) => onUpdate({
-            selectorAttribute: (e.target as HTMLInputElement).value.trim()
+            selectorAttribute: (e.target as HTMLInputElement).value.trim(),
           })}
         />
         <label class="row-label">
@@ -253,7 +253,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                   type="checkbox"
                   @change=${(e:Event) => onUpdate({
                     selectorType: item.selectorType,
-                    checked: (e.target as HTMLInputElement).checked
+                    checked: (e.target as HTMLInputElement).checked,
                   })}
                 />
                 ${selectorTypeToLabel.get(item.selectorType) || item.selectorType}

package/front_end/panels/recorder/RecorderPanel.ts

@@ -34,7 +34,7 @@ import {
   type PlayRecordingEvent as ViewPlayRecordingEvent,
   RecordingView,
   type ReplayState,
-  TargetPanel
+  TargetPanel,
 } from './RecordingView.js';
 import {
   AddStepPosition,
@@ -146,7 +146,7 @@ const UIStrings = {
    * @example {allow importing} PH1
    */
   doNotImport:
-      'Don’t import recordings you don’t understand or haven’t reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Type “{PH1}” below to allow importing.',
+      'Don’t import recordings you don’t understand or haven’t reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Type "{PH1}" below to allow importing.',
   /**
    * @description Text a user needs to type in order to confirm that they
    * are aware of the danger of importing code into the Recorder panel.
@@ -156,7 +156,7 @@ const UIStrings = {
    * @description Input box placeholder which instructs the user to type 'allow importing' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow importing} PH1
    */
-  typeAllowImporting: 'Type “{PH1}”',
+  typeAllowImporting: 'Type "{PH1}"',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/recorder/RecorderPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1016,7 +1016,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
                   {
                     ...step,
                     title: preset.i18nTitleKey || '',
-                    key: `step_${i}_recorder_key` as SDK.NetworkManager.UserDefinedThrottlingConditionKey
+                    key: `step_${i}_recorder_key` as SDK.NetworkManager.UserDefinedThrottlingConditionKey,
                   })) {
             settings.networkConditionsSettings.title = preset.title instanceof Function ? preset.title() : preset.title;
             settings.networkConditionsSettings.i18nTitleKey = preset.i18nTitleKey;
@@ -1805,7 +1805,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
       },
       {
         title: i18nString(UIStrings.copyShortcut),
-        rows: Host.Platform.isMac() ? [[{key: '⌘'}, {key: 'C'}]] : [[{key: 'Ctrl'}, {key: 'C'}]]
+        rows: Host.Platform.isMac() ? [[{key: '⌘'}, {key: 'C'}]] : [[{key: 'Ctrl'}, {key: 'C'}]],
       },
       {
         title: i18nString(UIStrings.toggleCode),
@@ -1843,7 +1843,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
       },
       set createRecordingView(widget: CreateRecordingView) {
         that.#createRecordingView = widget;
-      }
+      },
     };
     this.#view({
       recordings,

package/front_end/panels/recorder/RecordingView.ts

@@ -195,7 +195,7 @@ function renderSettings({
   isRecording,
   replayState,
   onReplaySettingsKeydown,
-  onToggleReplaySettings
+  onToggleReplaySettings,
 }: ViewInput): Lit.LitTemplate {
   if (!settings) {
     return Lit.nothing;

package/front_end/panels/recorder/ReplaySection.ts

@@ -274,7 +274,7 @@ export class ReplaySection extends UI.Widget.Widget {
           buttonLabel: () => i18nString(UIStrings.ReplayExtremelySlowButtonLabel),
           label: () => i18nString(UIStrings.ReplayExtremelySlowItemLabel),
         },
-      ]
+      ],
     }];
     if (this.#replayExtensions.length) {
       groups.push({

package/front_end/panels/recorder/StepView.ts

@@ -416,7 +416,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
       </devtools-widget>
     </div>
   `,
-    target, {container: {classes: ['step-view-widget']}}
+    target, {container: {classes: ['step-view-widget']}},
   );
   // clang-format on
 };

package/front_end/panels/recorder/injected/rollup.config.mjs

@@ -16,5 +16,5 @@ function isEnvVarTrue(envVar) {
 export default {
   treeshake: false,
   output: [{format: 'iife'}],
-  plugins: !isEnvVarTrue(process.env.DEBUG_INJECTED) ? [terser()] : []
+  plugins: !isEnvVarTrue(process.env.DEBUG_INJECTED) ? [terser()] : [],
 };

package/front_end/panels/search/SearchView.ts

@@ -350,7 +350,7 @@ export class SearchView extends UI.Widget.VBox<ShadowRoot> {
       },
       set collapseAllResults(value: () => void) {
         that.#collapseAllResults = value;
-      }
+      },
     };
     this.#view(input, output, this.contentElement);
   }

package/front_end/panels/security/SecurityPanel.ts

@@ -10,9 +10,10 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import lockIconStyles from './lockIcon.css.js';
@@ -235,7 +236,7 @@ const UIStrings = {
   /**
    * @description Description of the security explanation when the page includes a form with a non-secure action attribute.
    */
-  thisPageIncludesAFormWithA: 'This page includes a form with a non-secure “action” attribute.',
+  thisPageIncludesAFormWithA: 'This page includes a form with a non-secure `action` attribute.',
   /**
    * @description Summary phrase in the Security panel when active content with certificate errors was run on the site.
    */
@@ -1311,6 +1312,39 @@ export class SecurityMainView extends UI.Widget.VBox {
   }
 }
 
+const SAN_NUM_SHOWN_WHEN_TRUNCATED = 2;
+
+function renderSan(sanList: string[], isSanListTruncatable: boolean, isSanListTruncated: boolean,
+                   onToggleTruncation: () => void): TemplateResult {
+  if (sanList.length === 0) {
+    return html`<div class="san empty-san">${i18nString(UIStrings.na)}</div>`;
+  }
+
+  const toggleButtonText =
+      isSanListTruncated ? i18nString(UIStrings.showMoreSTotal, {PH1: sanList.length}) : i18nString(UIStrings.showLess);
+
+  // clang-format off
+  return html`
+    <div class=${Directives.classMap({ san: true, 'truncated-san': isSanListTruncated })}>
+      ${sanList.map((san, index) => {
+        return html`
+          <span class=${Directives.classMap({
+            'san-entry': true,
+            'truncated-entry': isSanListTruncatable && index >= SAN_NUM_SHOWN_WHEN_TRUNCATED,
+          })}>${san}</span>`;
+      })}
+      ${isSanListTruncatable ? html`
+        <devtools-button
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .accessibleLabel=${toggleButtonText}
+          .accessibleExpanded=${!isSanListTruncated}
+          .jslogContext=${'security.toggle-san-truncation'}
+          @click=${onToggleTruncation}>${toggleButtonText}
+        </devtools-button>` : nothing}
+    </div>`;
+  // clang-format on
+}
+
 export class SecurityOriginView extends UI.Widget.VBox {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #originDisplay: HTMLElement;
@@ -1415,7 +1449,7 @@ export class SecurityOriginView extends UI.Widget.VBox {
         UI.ARIAUtils.markAsHeading(sctDiv, 2);
       }
 
-      const sanDiv = this.createSanDiv(originState.securityDetails.sanList);
+      const sanDiv = this.#createSanDiv(originState.securityDetails.sanList);
       const validFromString = new Date(1000 * originState.securityDetails.validFrom).toUTCString();
       const validUntilString = new Date(1000 * originState.securityDetails.validTo).toUTCString();
 
@@ -1527,44 +1561,23 @@ export class SecurityOriginView extends UI.Widget.VBox {
     }
   }
 
-  private createSanDiv(sanList: string[]): Element {
-    const sanDiv = document.createElement('div');
-    if (sanList.length === 0) {
-      sanDiv.textContent = i18nString(UIStrings.na);
-      sanDiv.classList.add('empty-san');
-    } else {
-      const truncatedNumToShow = 2;
-      const listIsTruncated = sanList.length > truncatedNumToShow + 1;
-      for (let i = 0; i < sanList.length; i++) {
-        const span = sanDiv.createChild('span', 'san-entry');
-        span.textContent = sanList[i];
-        if (listIsTruncated && i >= truncatedNumToShow) {
-          span.classList.add('truncated-entry');
-        }
-      }
-      if (listIsTruncated) {
-        function toggleSANTruncation(): void {
-          const isTruncated = sanDiv.classList.contains('truncated-san');
-          let buttonText;
-          if (isTruncated) {
-            sanDiv.classList.remove('truncated-san');
-            buttonText = i18nString(UIStrings.showLess);
-          } else {
-            sanDiv.classList.add('truncated-san');
-            buttonText = i18nString(UIStrings.showMoreSTotal, {PH1: sanList.length});
-          }
-          truncatedSANToggle.textContent = buttonText;
-          UI.ARIAUtils.setLabel(truncatedSANToggle, buttonText);
-          UI.ARIAUtils.setExpanded(truncatedSANToggle, isTruncated);
-        }
-        const truncatedSANToggle = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.showMoreSTotal, {PH1: sanList.length}), toggleSANTruncation,
-            {jslogContext: 'security.toggle-san-truncation'});
-        sanDiv.appendChild(truncatedSANToggle);
-        toggleSANTruncation();
-      }
-    }
-    return sanDiv;
+  #createSanDiv(sanList: string[]): Element {
+    const container = document.createElement('div');
+    const isSanListTruncatable = sanList.length > SAN_NUM_SHOWN_WHEN_TRUNCATED + 1;
+    let isSanListTruncated = isSanListTruncatable;
+
+    const onToggleTruncation = (): void => {
+      isSanListTruncated = !isSanListTruncated;
+      updateSan();
+    };
+
+    const updateSan = (): void => {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(renderSan(sanList, isSanListTruncatable, isSanListTruncated, onToggleTruncation), container);
+    };
+
+    updateSan();
+    return container;
   }
 
   setSecurityState(newSecurityState: Protocol.Security.SecurityState): void {