chrome-devtools-frontend 1.0.1609381 → 1.0.1611390

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -4,13 +4,18 @@
 
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import '../../../components/settings/settings.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Settings from '../../../components/settings/settings.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../../../ui/lit/lit.js';
+import type * as Settings from '../../../components/settings/settings.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
+const {createRef, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description Note when a setting change will require the user to reload DevTools
@@ -36,90 +41,100 @@ export function createSettingCheckbox(
   return label;
 }
 
-const createSettingSelect = function(
-    name: string, options: Common.Settings.SimpleSettingOption[], requiresReload: boolean|null,
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement {
-  const container = document.createElement('div');
-  const settingSelectElement = container.createChild('p');
-  settingSelectElement.classList.add('settings-select');
-  const label = settingSelectElement.createChild('label');
-  const select = settingSelectElement.createChild('select');
-  label.textContent = name;
-  if (subtitle) {
-    container.classList.add('chrome-select-label');
-    label.createChild('p').textContent = subtitle;
-  }
-  select.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context(setting.name)}`);
-  UI.ARIAUtils.bindLabelToControl(label, select);
-
-  for (const option of options) {
-    if (option.text && typeof option.value === 'string') {
-      select.add(
-          UI.UIUtils.createOption(option.text, option.value, Platform.StringUtilities.toKebabCase(option.value)));
-    }
-  }
-
-  let reloadWarning: HTMLElement|(Element | null) = (null as Element | null);
-  if (requiresReload) {
-    reloadWarning = container.createChild('p', 'reload-warning hidden');
-    reloadWarning.textContent = i18nString(UIStrings.srequiresReload);
-    UI.ARIAUtils.markAsAlert(reloadWarning);
-  }
-
+export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult {
+  const name = setting.title();
+  const options = setting.options();
+  const requiresReload = setting.reloadRequired();
   const {deprecation} = setting;
-  if (deprecation) {
-    const warning = new Settings.SettingDeprecationWarning.SettingDeprecationWarning();
-    warning.data = deprecation;
-    label.appendChild(warning);
-  }
-
-  setting.addChangeListener(settingChanged);
-  settingChanged();
-  select.addEventListener('change', selectChanged, false);
-  return container;
-
-  function settingChanged(): void {
-    const newValue = setting.get();
-    for (let i = 0; i < options.length; i++) {
-      if (options[i].value === newValue) {
-        select.selectedIndex = i;
-      }
-    }
-    select.disabled = setting.disabled();
-  }
+  const controlId = UI.ARIAUtils.nextId('labelledControl');
+  const reloadWarningRef = createRef<HTMLParagraphElement>();
 
-  function selectChanged(): void {
-    // Don't use event.target.value to avoid conversion of the value to string.
+  const onSelectChange = (e: Event): void => {
+    const select = e.target as HTMLSelectElement;
     setting.set(options[select.selectedIndex].value);
-    if (reloadWarning) {
-      reloadWarning.classList.remove('hidden');
+    if (requiresReload) {
       UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
           i18nString(UIStrings.settingsChangedReloadDevTools));
+      if (reloadWarningRef.value) {
+        reloadWarningRef.value.classList.remove('hidden');
+      }
     }
-  }
-};
+  };
 
-export const createControlForSetting = function(
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
-  const uiTitle = setting.title();
+  // clang-format off
+  return html`
+    <div class=${Directives.classMap({'chrome-select-label': Boolean(subtitle)})}>
+      <p class="settings-select">
+        <label for=${controlId}>
+          ${name}
+          ${subtitle ? html`<p>${subtitle}</p>` : nothing}
+          ${deprecation ? html`<devtools-setting-deprecation-warning .data=${
+              deprecation as Common.Settings.Deprecation}></devtools-setting-deprecation-warning>` :
+                          nothing}
+        </label>
+        <select
+          id=${controlId}
+          aria-label=${name}
+          .disabled=${setting.disabled()}
+          @change=${onSelectChange}
+          jslog=${VisualLogging.dropDown().track({change: true}).context(setting.name)}
+        >
+          ${options.map(option => {
+            if (option.text && typeof option.value === 'string') {
+              return html`
+                <option
+                  value=${option.value}
+                  ?selected=${setting.get() === option.value}
+                  jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(option.value)).track({click: true})}
+                >
+                  ${option.text}
+                </option>
+              `;
+            }
+            return nothing;
+          })}
+        </select>
+      </p>
+      ${requiresReload ? html`
+        <p ${ref(reloadWarningRef)} class="reload-warning hidden" role="alert" aria-live="polite">
+          ${i18nString(UIStrings.srequiresReload)}
+        </p>` : nothing}
+    </div>
+  `;
+  // clang-format on
+}
+
+export const renderControlForSetting = function(
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): TemplateResult|null {
   switch (setting.type()) {
     case Common.Settings.SettingType.BOOLEAN: {
-      const component = new Settings.SettingCheckbox.SettingCheckbox();
-      component.data = {
-        setting: setting as Common.Settings.Setting<boolean>,
-      };
-      component.onchange = () => {
+      const onchange = (): void => {
         if (setting.reloadRequired()) {
           UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
               i18nString(UIStrings.settingsChangedReloadDevTools));
         }
       };
-      return component;
+      return html`<setting-checkbox .data=${{
+        setting: setting as Common.Settings.Setting<boolean>
+      } as Settings.SettingCheckbox.SettingCheckboxData} @change=${onchange}></setting-checkbox>`;
+    }
+    case Common.Settings.SettingType.ENUM: {
+      return renderSettingSelect(setting, subtitle);
     }
-    case Common.Settings.SettingType.ENUM:
-      return createSettingSelect(uiTitle, setting.options(), setting.reloadRequired(), setting, subtitle);
     default:
       console.error('Invalid setting type: ' + setting.type());
       return null;
   }
 };
+
+export const createControlForSetting = function(
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
+  const template = renderControlForSetting(setting, subtitle);
+  if (template === null) {
+    return null;
+  }
+  const fragment = document.createDocumentFragment();
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(template, fragment);
+  return fragment.firstElementChild as HTMLElement;
+};

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1850,6 +1850,7 @@ export const knownContextValues = new Set([
   'gu',
   'gutter',
   'gzip',
+  'hanging-punctuation',
   'hardware-concurrency',
   'hardware-concurrency-reset',
   'hardware-concurrency-selector',
@@ -2293,6 +2294,7 @@ export const knownContextValues = new Set([
   'lighthouse.audit.aria-treeitem-name',
   'lighthouse.audit.aria-valid-attr',
   'lighthouse.audit.aria-valid-attr-value',
+  'lighthouse.audit.baseline',
   'lighthouse.audit.bf-cache',
   'lighthouse.audit.bootup-time',
   'lighthouse.audit.button-name',

package/front_end/ui/visual_logging/LoggingDriver.ts

@@ -76,7 +76,7 @@ export async function startLogging(options?: {
 export async function addDocument(document: Document): Promise<void> {
   documents.push(document);
   if (['interactive', 'complete'].includes(document.readyState)) {
-    await RenderCoordinator.read('processForLogging', process);
+    await process();
   }
   document.addEventListener('visibilitychange', scheduleProcessing);
   document.addEventListener('scroll', scheduleProcessing);
@@ -84,8 +84,8 @@ export async function addDocument(document: Document): Promise<void> {
 }
 
 export async function stopLogging(): Promise<void> {
-  logging = false;
   await keyboardLogThrottler.schedule(async () => {}, Common.Throttler.Scheduling.AS_SOON_AS_POSSIBLE);
+  logging = false;
   unregisterAllLoggables();
   for (const document of documents) {
     document.removeEventListener('visibilitychange', scheduleProcessing);
@@ -139,7 +139,7 @@ const viewportRectFor = (element: Element): DOMRect => {
 };
 
 export async function process(): Promise<void> {
-  if (!logging || document.hidden) {
+  if (document.hidden) {
     return;
   }
   const startTime = performance.now();

package/mcp/mcp.ts

@@ -28,6 +28,7 @@ export {Target} from '../front_end/core/sdk/Target.js';
 export {TargetManager} from '../front_end/core/sdk/TargetManager.js';
 export * as Foundation from '../front_end/foundation/foundation.js';
 export * as Protocol from '../front_end/generated/protocol.js';
+export {NetworkRequestFormatter} from '../front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.js';
 export {
   PerformanceInsightFormatter
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js';
@@ -54,6 +55,7 @@ export {
 export * as MarkdownIssueDescription from '../front_end/models/issues_manager/MarkdownIssueDescription.js';
 export * as StackTrace from '../front_end/models/stack_trace/stack_trace.js';
 export * as TraceEngine from '../front_end/models/trace/trace.js';
+export {IgnoreListManager} from '../front_end/models/workspace/IgnoreListManager.js';
 export * as Marked from '../front_end/third_party/marked/marked.js';
 
 installInspectorFrontendHost(new McpHostBindings());

package/package.json

@@ -49,8 +49,8 @@
     "@types/webidl2": "24.4.3",
     "@types/yargs": "17.0.35",
     "@types/yargs-unparser": "2.0.3",
-    "@typescript-eslint/rule-tester": "8.47.0",
-    "@typescript-eslint/utils": "8.47.0",
+    "@typescript-eslint/rule-tester": "8.58.0",
+    "@typescript-eslint/utils": "8.58.0",
     "@web/rollup-plugin-import-meta-assets": "2.3.0",
     "chai": "4.3.4",
     "cssnano": "7.1.2",
@@ -90,14 +90,13 @@
     "terser": "5.44.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
+    "typescript-eslint": "8.58.0",
     "uuid": "13.0.0",
     "webidl2": "24.5.0",
     "yargs": "17.7.2",
     "js-rouge": "3.2.0"
   },
   "overrides": {
-    "@typescript-eslint/types": "8.47.0",
     "baseline-browser-mapping": "2.8.25",
     "electron-to-chromium": "1.5.248",
     "caniuse-lite": "1.0.30001754",
@@ -105,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1609381"
+  "version": "1.0.1611390"
 }