chrome-devtools-frontend 1.0.1578729 → 1.0.1579812

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -582,27 +582,25 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <devtools-report>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.keySite), key.site, 'dbsc-site')}
-          ${renderKeyValue(i18nString(UIStrings.keyId), key.id, 'dbsc-id')}
-          ${renderKeyValue(i18nString(UIStrings.refreshUrl), sessionAndEvents.session.refreshUrl, 'dbsc-refresh-url')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.expiryDate), new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString(),
-            'dbsc-expiry-date')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.cachedChallenge), sessionAndEvents.session.cachedChallenge || '',
-            'dbsc-cached-challenge')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.allowedRefreshInitiators),
-            sessionAndEvents.session.allowedRefreshInitiators.join(', '), 'dbsc-allowed-refresh-initiators')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${key.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
+          <devtools-report-value>${key.id}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.refreshUrl)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.refreshUrl}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.expiryDate)}</devtools-report-key>
+          <devtools-report-value>${
+        new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString()}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.cachedChallenge)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.scope)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.origin), inclusionRules.origin, 'dbsc-origin')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.includeSite), boolToString(inclusionRules.includeSite), 'dbsc-include-site')}
+          <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
+          <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
+          <devtools-report-value>${boolToString(inclusionRules.includeSite)}</devtools-report-value>
         </devtools-report>
         ${
         inclusionRules.urlRules.length > 0 ? html`
@@ -710,78 +708,62 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   const creationEventDetails =
       selectedEvent?.creationEventDetails &&
       html`
-            ${
-          renderKeyValue(
-              i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.creationEventDetails.fetchResult),
-              'dbsc-creation-fetch-result')}
-            ${
-          selectedEvent.creationEventDetails.newSession &&
-          html`
-             ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-creation-updated-session-config')}
+          <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+          <devtools-report-value>${
+          fetchResultToString(selectedEvent.creationEventDetails.fetchResult)}</devtools-report-value>
+            ${selectedEvent.creationEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const refreshEventDetails =
       selectedEvent?.refreshEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.refreshResult),
-              refreshResultToString(selectedEvent.refreshEventDetails.refreshResult), 'dbsc-refresh-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.causedAnyRequestDeferrals),
-              boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh),
-              'dbsc-refresh-was-fully-proactive-refresh')}
+          <devtools-report-key>${i18nString(UIStrings.refreshResult)}</devtools-report-key>
+          <devtools-report-value>${
+          refreshResultToString(selectedEvent.refreshEventDetails.refreshResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.causedAnyRequestDeferrals)}</devtools-report-key>
+          <devtools-report-value>${
+          boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh)}</devtools-report-value>
             ${
           selectedEvent.refreshEventDetails.fetchResult &&
           html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.refreshEventDetails.fetchResult),
-                  'dbsc-refresh-fetch-result')}
+              <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+              <devtools-report-value>${
+              fetchResultToString(selectedEvent.refreshEventDetails.fetchResult)}</devtools-report-value>
             `}
-            ${
-          selectedEvent.refreshEventDetails.newSession &&
-          html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-refresh-updated-session-config')}
+            ${selectedEvent.refreshEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const challengeEventDetails =
       selectedEvent?.challengeEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challengeResult),
-              challengeResultToString(selectedEvent.challengeEventDetails.challengeResult), 'dbsc-challenge-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challenge), selectedEvent.challengeEventDetails.challenge, 'dbsc-challenge')}
+          <devtools-report-key>${i18nString(UIStrings.challengeResult)}</devtools-report-key>
+          <devtools-report-value>${
+          challengeResultToString(selectedEvent.challengeEventDetails.challengeResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.challenge)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.challengeEventDetails.challenge}</devtools-report-value>
           `;
   const terminationEventDetails =
       selectedEvent?.terminationEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.deletionReason),
-              deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason), 'dbsc-termination-reason')}
+          <devtools-report-key>${i18nString(UIStrings.deletionReason)}</devtools-report-key>
+          <devtools-report-value>${
+          deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason)}</devtools-report-value>
           `;
   const eventDetailsContentHtml = selectedEvent ?
       html`
         <devtools-report>
-          ${renderKeyValue(i18nString(UIStrings.keySite), selectedEvent.site, 'dbsc-event-site')}
-          ${
-          selectedEvent.sessionId &&
-          renderKeyValue(i18nString(UIStrings.sessionId), selectedEvent.sessionId, 'dbsc-event-session-id')}
-          ${renderKeyValue(i18nString(UIStrings.type), getEventTypeString(selectedEvent), 'dbsc-event-type')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.eventResult), succeededToString(selectedEvent.succeeded), 'dbsc-event-result')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.sessionId)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.sessionId}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.type)}</devtools-report-key>
+          <devtools-report-value>${getEventTypeString(selectedEvent)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.eventResult)}</devtools-report-key>
+          <devtools-report-value>${succeededToString(selectedEvent.succeeded)}</devtools-report-value>
           ${creationEventDetails}
           ${refreshEventDetails}
           ${challengeEventDetails}
@@ -888,13 +870,6 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   }
 }
 
-function renderKeyValue(key: string, value: string, id: string): TemplateResult {
-  return html`
-    <devtools-report-key id=${id}>${key}</devtools-report-key>
-    <devtools-report-value role="text" aria-describedby=${id}>${value}</devtools-report-value>
-  `;
-}
-
 function ruleTypeToString(ruleType: Protocol.Network.DeviceBoundSessionUrlRuleRuleType): string {
   switch (ruleType) {
     case Protocol.Network.DeviceBoundSessionUrlRuleRuleType.Exclude:

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,6 +180,7 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
+                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

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

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem()}>${url}</div>`));
+    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,7 +361,9 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem().track({
+    resize: true
+  })}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,6 +238,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
+                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -18,11 +18,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for teaser to generate code.
    */
-  ctrlItoGenerateCode: 'Ctrl+I to generate code',
+  ctrlItoGenerateCode: 'ctrl+i to generate code',
   /**
    * @description Text for teaser to generate code in Mac.
    */
-  cmdItoGenerateCode: 'Cmd+I to generate code',
+  cmdItoGenerateCode: 'cmd+i to generate code',
   /**
    * @description Aria label for teaser to generate code.
    */

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -22,16 +22,16 @@ const UIStringsNotTranslate = {
    * @description First item in the description.
    */
   describeCodeInComment:
-      'Pressing Ctrl+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing ctrl+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description First item in the description.
    */
   describeCodeInCommentForMacOs:
-      'Pressing Cmd+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing cmd+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description Second item in the description.
    */
-  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster.',
+  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster',
   /**
    * @description Third item in the description.
    */
@@ -97,7 +97,7 @@ export class AiCodeGenerationUpgradeDialog {
           <div class="right-buttons">
             <devtools-button
               @click=${() => {
-                  result.resolve(true);
+                  result.resolve(false);
                   void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.manage-in-settings"

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1425,6 +1425,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
+                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -11,6 +11,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
+import type {EditorHandles} from './ElementsTreeElement.js';
+
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
@@ -58,6 +60,8 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {
+  private editing: EditorHandles|null = null;
+
   constructor(private readonly styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
     super('');
   }
@@ -69,6 +73,9 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
   }
 
   override onunbind(): void {
+    if (this.editing) {
+      this.editing.cancel();
+    }
     this.styleSheetHeader.cssModel().removeEventListener(
         SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
   }
@@ -91,4 +98,75 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
       void this.onpopulate();
     }
   }
+
+  override ondblclick(event: Event): boolean {
+    if (this.editing) {
+      return false;
+    }
+    void this.startEditing(event.target as Element);
+    return false;
+  }
+
+  override onenter(): boolean {
+    if (this.editing) {
+      return false;
+    }
+    const target = this.listItemElement.querySelector('.webkit-html-text-node');
+    if (target) {
+      void this.startEditing(target);
+      return true;
+    }
+    return false;
+  }
+
+  private async startEditing(target: Element): Promise<void> {
+    if (this.editing || UI.UIUtils.isBeingEdited(target)) {
+      return;
+    }
+
+    const textNode = target.enclosingNodeOrSelfWithClass('webkit-html-text-node');
+    if (!textNode) {
+      return;
+    }
+
+    const data = await this.styleSheetHeader.requestContentData();
+    textNode.textContent = (TextUtils.ContentData.ContentData.isError(data) || !data.isTextContent) ? '' : data.text;
+
+    const config =
+        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), () => this.editingCancelled(), undefined);
+
+    const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(textNode, config);
+    if (!editorHandles) {
+      return;
+    }
+
+    this.editing = {
+      commit: editorHandles.commit,
+      cancel: editorHandles.cancel,
+      editor: undefined,
+      resize: () => {},
+    };
+
+    const componentSelection = this.listItemElement.getComponentSelection();
+    componentSelection?.selectAllChildren(textNode);
+  }
+
+  private async editingCommitted(element: Element, newText: string, oldText: string|null): Promise<void> {
+    this.editing = null;
+
+    if (newText !== oldText) {
+      await this.styleSheetHeader.cssModel().setStyleSheetText(this.styleSheetHeader.id, newText, false);
+    }
+
+    this.editingCancelled();
+  }
+
+  private editingCancelled(): void {
+    this.editing = null;
+    void this.onpopulate();
+  }
+
+  isEditing(): boolean {
+    return this.editing !== null;
+  }
 }