chrome-devtools-frontend 1.0.1593518 → 1.0.1595090

package/front_end/panels/media/PlayerMessagesView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 
@@ -9,6 +10,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import playerMessagesViewStyles from './playerMessagesView.css.js';
@@ -339,59 +341,70 @@ export class PlayerMessagesView extends UI.Widget.VBox {
     UI.UIUtils.createTextChild(container, message.message);
   }
 
-  private errorToDiv(error: Protocol.Media.PlayerError): Element {
-    const entry = UI.Fragment.Fragment.build`
-    <div class="status-error-box">
-    <div class="status-error-field-labeled">
-      <span class="status-error-field-label" $="status-error-group"></span>
-      <span>${error.errorType}</span>
-    </div>
-    <div class="status-error-field-labeled">
-      <span class="status-error-field-label" $="status-error-code"></span>
-      <span>${error.code}</span>
-    </div>
-    <div class="status-error-field-labeled" $="status-error-data">
-    </div>
-    <div class="status-error-field-labeled" $="status-error-stack">
-    </div>
-    <div class="status-error-field-labeled" $="status-error-cause">
-    </div>
+  private renderError(error: Protocol.Media.PlayerError): LitTemplate {
+    // clang-format off
+    return html`
+      <div class="status-error-box">
+        <div class="status-error-field-labeled">
+          <span class="status-error-field-label"
+            >${i18nString(UIStrings.errorGroupLabel)}</span
+          >
+          <span>${error.errorType}</span>
+        </div>
+        <div class="status-error-field-labeled">
+          <span class="status-error-field-label"
+            >${i18nString(UIStrings.errorCodeLabel)}</span
+          >
+          <span>${error.code}</span>
+        </div>
+        <div class="status-error-field-labeled">
+        ${
+          Object.keys(error.data).length !== 0
+            ? html`<span class="status-error-field-label"
+                  >${i18nString(UIStrings.errorDataLabel)}</span
+                >
+                <div>
+                  ${Object.entries(error.data).map(
+                    ([key, value]) => html`<div>${key}: ${value}</div>`,
+                  )}
+                </div>`
+            : nothing
+        }
+        </div>
+        <div class="status-error-field-labeled">
+          ${
+            error.stack.length !== 0
+              ? html`<span class="status-error-field-label"
+                    >${i18nString(UIStrings.errorStackLabel)}</span
+                  >
+                  <div>
+                    ${error.stack.map(
+                      stackEntry =>
+                        html`<div>${stackEntry.file}:${stackEntry.line}</div>`,
+                    )}
+                  </div>`
+              : nothing
+          }
+        </div>
+        <div class="status-error-field-labeled">
+          ${
+            error.cause.length !== 0
+              ? html`
+                  <span class="status-error-field-label"
+                    >${i18nString(UIStrings.errorCauseLabel)}</span
+                  >
+                  ${this.renderError(error.cause[0])}
+                `
+              : nothing
+          }
+        </div>
+      </div>
     `;
-
-    entry.$('status-error-group').textContent = i18nString(UIStrings.errorGroupLabel);
-    entry.$('status-error-code').textContent = i18nString(UIStrings.errorCodeLabel);
-
-    if (Object.keys(error.data).length !== 0) {
-      const label = entry.$('status-error-data').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorDataLabel));
-      const dataContent = entry.$('status-error-data').createChild('div');
-      for (const [key, value] of Object.entries(error.data)) {
-        const datumContent = dataContent.createChild('div');
-        UI.UIUtils.createTextChild(datumContent, `${key}: ${value}`);
-      }
-    }
-
-    if (error.stack.length !== 0) {
-      const label = entry.$('status-error-stack').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorStackLabel));
-      const stackContent = entry.$('status-error-stack').createChild('div');
-      for (const stackEntry of error.stack) {
-        const frameBox = stackContent.createChild('div');
-        UI.UIUtils.createTextChild(frameBox, `${stackEntry.file}:${stackEntry.line}`);
-      }
-    }
-
-    if (error.cause.length !== 0) {
-      const label = entry.$('status-error-cause').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorCauseLabel));
-      entry.$('status-error-cause').appendChild(this.errorToDiv(error.cause[0]));
-    }
-
-    return entry.element();
+    // clang-format on
   }
 
   addError(error: Protocol.Media.PlayerError): void {
     const container = this.bodyPanel.createChild('div', 'media-messages-message-container media-message-error');
-    container.appendChild(this.errorToDiv(error));
+    render(this.renderError(error), container);
   }
 }

package/front_end/panels/media/media.ts

@@ -16,6 +16,7 @@ import * as MainView from './MainView.js';
 import * as MediaModel from './MediaModel.js';
 import * as PlayerDetailView from './PlayerDetailView.js';
 import * as PlayerListView from './PlayerListView.js';
+import * as PlayerMessagesView from './PlayerMessagesView.js';
 import * as PlayerPropertiesView from './PlayerPropertiesView.js';
 import * as TickingFlameChart from './TickingFlameChart.js';
 import * as TickingFlameChartHelpers from './TickingFlameChartHelpers.js';
@@ -26,6 +27,7 @@ export {
   PlayerDetailView,
   PlayerEventsView,
   PlayerListView,
+  PlayerMessagesView,
   PlayerPropertiesView,
   TickingFlameChart,
   TickingFlameChartHelpers,

package/front_end/panels/media/playerMessagesView.css

@@ -67,7 +67,7 @@
 }
 
 .status-error-box {
-  font-family: monospace;
+  font-family: var(--monospace-font-family);
   border: 1px solid var(--sys-color-error-outline);
   border-radius: 5px;
   padding: 4px;

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -13,6 +14,7 @@ import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapsh
 import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {ChildrenProvider} from './ChildrenProvider.js';
@@ -269,25 +271,32 @@ export class HeapSnapshotGridNode extends
 
   createValueCell(columnId: string): HTMLElement {
     const jslog = VisualLogging.tableCell('numeric-column').track({click: true});
-    const cell = (UI.Fragment.html`<td class="numeric-column" jslog=${jslog} />` as HTMLElement);
+    const cell = document.createElement('td');
+    cell.className = 'numeric-column';
+    cell.setAttribute('jslog', jslog.toString());
     const dataGrid = (this.dataGrid as HeapSnapshotSortableDataGrid);
     if (dataGrid.snapshot && dataGrid.snapshot.totalSize !== 0) {
-      const div = document.createElement('div');
-      const valueSpan = UI.Fragment.html`<span>${this.data[columnId]}</span>`;
-      div.appendChild(valueSpan);
+      const value = this.data[columnId];
       const percentColumn = columnId + '-percent';
-      if (percentColumn in this.data) {
-        const percentSpan = UI.Fragment.html`<span class="percent-column">${this.data[percentColumn]}</span>`;
-        div.appendChild(percentSpan);
-        div.classList.add('profile-multiple-values');
-        UI.ARIAUtils.setHidden(valueSpan, true);
-        UI.ARIAUtils.setHidden(percentSpan, true);
+      const percent = this.data[percentColumn];
+      if (percent) {
+        render(
+            html`
+          <div class="profile-multiple-values">
+            <span aria-hidden="true">${value}</span>
+            <span class="percent-column" aria-hidden="true">${percent}</span>
+          </div>`,
+            cell);
         this.setCellAccessibleName(
-            i18nString(
-                UIStrings.genericStringsTwoPlaceholders, {PH1: this.data[columnId], PH2: this.data[percentColumn]}),
-            cell, columnId);
+            i18nString(UIStrings.genericStringsTwoPlaceholders, {PH1: value, PH2: percent}), cell, columnId);
+      } else {
+        render(
+            html`
+          <div>
+            <span>${value}</span>
+          </div>`,
+            cell);
       }
-      cell.appendChild(div);
     }
     return cell;
   }
@@ -621,14 +630,30 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
 
   createObjectCellWithValue(valueStyle: string, value: string): HTMLElement {
     const jslog = VisualLogging.tableCell('object-column').track({click: true});
-    const fragment = UI.Fragment.Fragment.build`
-  <td class="object-column disclosure" jslog=${jslog}>
-  <div class="source-code event-properties" style="overflow: visible;" $="container">
-  <span class="value object-value-${valueStyle}">${value}</span>
-  <span class="object-value-id">@${this.snapshotNodeId}</span>
-  </div>
-  </td>`;
-    const div = fragment.$('container');
+    const cell = document.createElement('td');
+    cell.className = 'object-column disclosure';
+    cell.setAttribute('jslog', jslog.toString());
+    const output: {div?: Element} = {};
+    // clang-format off
+    render(
+      html`<div
+        class="source-code event-properties"
+        style="overflow: visible;"
+        ${Directives.ref(el => {
+          output.div = el;
+        })}
+      >
+        <span class="value object-value-${valueStyle}">${value}</span>
+        <span class="object-value-id">@${this.snapshotNodeId}</span>
+      </div>`,
+      cell,
+    );
+    // clang-format on
+    const div = output.div;
+    if (!div) {
+      throw new Error('Expected div to exists');
+    }
+
     this.prefixObjectCell(div);
     if (this.reachableFromWindow) {
       const frameIcon = createIcon('frame', 'heap-object-tag');
@@ -641,7 +666,6 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
       div.appendChild(frameIcon);
     }
     void this.appendSourceLocation(div);
-    const cell = (fragment.element() as HTMLElement);
     if (this.depth) {
       cell.style.setProperty(
           'padding-left', (this.depth * (this.dataGrid as HeapSnapshotSortableDataGrid).indentWidth) + 'px');
@@ -653,7 +677,8 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
   }
 
   async appendSourceLocation(div: Element): Promise<void> {
-    const linkContainer = UI.Fragment.html`<span class="heap-object-source-link" />`;
+    const linkContainer = document.createElement('span');
+    linkContainer.className = 'heap-object-source-link';
     div.appendChild(linkContainer);
     const link = await this.dataGridInternal.dataDisplayDelegate().linkifyObject((this.snapshotNodeIndex as number));
     if (link) {

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -41,7 +41,7 @@ const UIStrings = {
   /**
    * @description Text in Framework Ignore List Settings Tab of the Settings
    */
-  enableIgnoreListing: 'Enable ignore listing',
+  ignoreListing: 'Ignore listing',
   /**
    * @description Text in Framework Ignore List Settings Tab of the Settings
    */
@@ -114,7 +114,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     const enabledSetting = Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
     const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
     enableIgnoreListing.appendChild(
-        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting));
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.ignoreListing), enabledSetting));
     UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
 
     const enableIgnoreListingCard = settingsContent.createChild('devtools-card');

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

@@ -355,13 +355,17 @@ const UIStrings = {
    */
   trailing: 'Trailing',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of a setting under the Sources category
+   */
+  variableValuesInlineWhile: 'Variable values inline',
+  /**
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu
    */
   displayVariableValuesInlineWhile: 'Display variable values inline while debugging',
   /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu
    */
-  doNotDisplayVariableValuesInline: 'Do not display variable values inline while debugging',
+  doNotDisplayVariableValuesInline: 'Don\'t show variable values inline',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1703,7 +1707,7 @@ UI.ActionRegistration.registerActionExtension({
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.displayVariableValuesInlineWhile),
+  title: i18nLazyString(UIStrings.variableValuesInlineWhile),
   settingName: 'inline-variable-values',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,

package/front_end/panels/utils/utils.ts

@@ -97,8 +97,11 @@ export class PanelUtils {
 
       // clang-format off
       return html`<devtools-icon
-          class="icon" name=${iconName} title=${title}> role=img
-        </devtools-icon>`;
+          class="icon"
+          name=${iconName}
+          title=${title}
+          role=img
+        ></devtools-icon>`;
       // clang-format on
     }
 
@@ -261,9 +264,12 @@ export class PanelUtils {
         binding ? PanelCommon.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(uiSourceCode) : undefined;
     // clang-format off
     return html`<devtools-file-source-icon
-        name=${iconType} title=${ifDefined(title)} .data=${{
-          contentType: uiSourceCode.contentType().name(), hasDotBadge, isDotPurple, iconType}}>
-      </devtools-file-source-icon>`;
+        class="icon"
+        name=${iconType} 
+        title=${ifDefined(title)} 
+        .data=${{
+          contentType: uiSourceCode.contentType().name(), hasDotBadge, isDotPurple, iconType}
+        }></devtools-file-source-icon>`;
     // clang-format on
   }
 

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: ccc5d606ce500bcd7af0b441cfc69add07349417
+Revision: cf64a516ef49cbc20688475f5ee7ec91c5bbe2da
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE