chrome-devtools-frontend 1.0.1613625 → 1.0.1614363

package/front_end/ui/legacy/Treeoutline.ts

@@ -1932,7 +1932,7 @@ export namespace TreeViewElement {
   }
 }
 
-class IfExpandedDirective extends Lit.Directive.Directive {
+export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -1969,8 +1969,7 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     }
     return node.expanded;
   }
-}
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+});
 
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -9,7 +9,6 @@ import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Root from '../../../../core/root/root.js';
 import {createIcon, Icon} from '../../../../ui/kit/kit.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
 import * as UI from '../../legacy.js';
@@ -242,7 +241,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.setVisible(true);
     this.hideNoContrastInfoAvailableMessage();
 
-    const isAPCAEnabled = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
+    const isAPCAEnabled = Common.Settings.Settings.instance().moduleSetting('apca').get();
 
     const fgColor = this.contrastInfo.color();
     const bgColor = this.contrastInfo.bgColor();

package/front_end/ui/legacy/components/color_picker/ContrastOverlay.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../../core/common/common.js';
-import * as Root from '../../../../core/root/root.js';
 import * as UI from '../../legacy.js';
 
 import {type ContrastInfo, Events} from './ContrastInfo.js';
@@ -25,7 +24,7 @@ export class ContrastOverlay {
 
     this.contrastRatioSVG = UI.UIUtils.createSVGChild(colorElement, 'svg', 'spectrum-contrast-container fill');
     this.contrastRatioLines = new Map();
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
+    if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
       this.contrastRatioLines.set(
           'APCA', UI.UIUtils.createSVGChild(this.contrastRatioSVG, 'path', 'spectrum-contrast-line'));
     } else {
@@ -50,7 +49,7 @@ export class ContrastOverlay {
     if (!this.visible || this.contrastInfo.isNull()) {
       return;
     }
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA) &&
+    if (Common.Settings.Settings.instance().moduleSetting('apca').get() &&
         this.contrastInfo.contrastRatioAPCA() === null) {
       return;
     }
@@ -91,7 +90,7 @@ export class ContrastRatioLineBuilder {
   }
 
   drawContrastRatioLine(width: number, height: number, level: string): string|null {
-    const isAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
+    const isAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
     const requiredContrast =
         isAPCA ? this.contrastInfo.contrastRatioAPCAThreshold() : this.contrastInfo.contrastRatioThreshold(level);
     if (!width || !height || requiredContrast === null) {
@@ -140,7 +139,7 @@ export class ContrastRatioLineBuilder {
               Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));
         };
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
+    if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
       candidateLuminance = (candidateHSVA: Common.ColorUtils.Color4D) => {
         return Common.ColorUtils.luminanceAPCA(
             Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -50,7 +50,7 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @attribute striped If true, the data grid will have striped rows.
  * @attribute displayName
  */
-export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
+class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
@@ -609,7 +609,7 @@ const INTERNAL_TOKEN: DataGridInternalToken = {
   token: 'DataGridInternalToken'
 };
 
-class IfExpandedDirective extends Lit.Directive.Directive {
+export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -639,5 +639,4 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     }
     return node.expanded;
   }
-}
-export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+});

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -191,19 +191,24 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   }
 
   // clang-format off
-  render(
-      html`
+  render(html`
     <style>${xmlViewStyles}</style>
     <style>${xmlTreeStyles}</style>
     <devtools-tree
       class="shadow-xml-view source-code"
       .template=${html`
         <ul role="tree">
-          ${input.xml.children().map(node => layOutNode(node))}
+            ${input.xml.children().map(node => layOutNode(node))}
         </ul>`}
-      ></devtools-tree>`,
-      // clang-format on
-      target);
+      ></devtools-tree>`, target, {
+        container: {
+          classes: ['shadow-xml-view', 'source-code'],
+          attributes: {
+            jslog: `${VisualLogging.pane('xml-view')}`,
+          },
+        },
+      });
+  // clang-format on
 };
 
 function* children(xmlNode: Node|ParentNode|undefined): Generator<Node> {
@@ -272,7 +277,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
   #nextJump: SearchResult|undefined;
 
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(target, {jslog: `${VisualLogging.pane('xml-view')}`, classes: ['shadow-xml-view', 'source-code']});
+    super(target);
     this.#view = view;
   }
 

package/front_end/ui/lit/lit.ts

@@ -14,7 +14,6 @@ export {
   noChange,
   nothing,
   type PropertyValues,
-  render,
   StaticHtml,
   svg,
   type TemplateResult,
@@ -22,6 +21,10 @@ export {
 export {
   i18nTemplate,
 } from './i18n-template.js';
+export {
+  render,
+  type RenderOptions,
+} from './render.js';
 export {
   html,
 } from './strip-whitespace.js';

package/front_end/ui/lit/render.ts

@@ -0,0 +1,81 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
+
+import * as Lit from '../../third_party/lit/lit.js';
+
+export interface RenderOptions extends Lit.RenderOptions {
+  container?: {
+    attributes?: Record<string, string|null|boolean|undefined|{toString(): string}>,
+    classes?: string[],
+    listeners?: Record<string, EventListenerOrEventListenerObject>,
+  };
+}
+
+const renderOptions = new WeakMap<HTMLElement|DocumentFragment, RenderOptions|undefined>();
+
+export function render(template: unknown, container: HTMLElement|DocumentFragment, options?: RenderOptions):
+    ReturnType<typeof Lit.render> {
+  if (container instanceof HTMLElement) {
+    const oldAttributes = renderOptions.get(container)?.container?.attributes;
+    const newAttributes = options?.container?.attributes;
+    if (newAttributes) {
+      for (const [name, value] of Object.entries(newAttributes)) {
+        if (oldAttributes?.[name] === value) {
+          continue;
+        }
+        if (value === null || value === undefined) {
+          container.removeAttribute(name);
+        } else if (typeof value === 'boolean') {
+          container.toggleAttribute(name, value);
+        } else {
+          container.setAttribute(name, value.toString());
+        }
+      }
+    }
+    if (oldAttributes) {
+      for (const name of Object.keys(oldAttributes)) {
+        if (!newAttributes || !(name in newAttributes)) {
+          container.removeAttribute(name);
+        }
+      }
+    }
+
+    const oldClasses = renderOptions.get(container)?.container?.classes;
+    const newClasses = options?.container?.classes;
+    if (oldClasses) {
+      for (const cls of oldClasses) {
+        if (!newClasses?.includes(cls)) {
+          container.classList.remove(cls);
+        }
+      }
+    }
+    if (newClasses) {
+      for (const cls of newClasses) {
+        if (!oldClasses?.includes(cls)) {
+          container.classList.add(cls);
+        }
+      }
+    }
+  }
+
+  const oldListeners = renderOptions.get(container)?.container?.listeners;
+  const newListeners = options?.container?.listeners;
+  if (oldListeners) {
+    for (const [name, listener] of Object.entries(oldListeners)) {
+      if (newListeners?.[name] !== listener) {
+        container.removeEventListener(name, listener);
+      }
+    }
+  }
+  if (newListeners) {
+    for (const [name, listener] of Object.entries(newListeners)) {
+      if (oldListeners?.[name] !== listener) {
+        container.addEventListener(name, listener);
+      }
+    }
+  }
+  renderOptions.set(container, options);
+  return Lit.render(template, container, options);
+}

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -4349,12 +4349,12 @@ export const knownContextValues = new Set([
   'webgl-warning-fired',
   'webmcp.call-inputs',
   'webmcp.call-outputs',
+  'webmcp.completed',
   'webmcp.declarative',
   'webmcp.error',
   'webmcp.imperative',
   'webmcp.pending',
   'webmcp.status-types',
-  'webmcp.success',
   'webmcp.tool-details',
   'webp-format-disabled',
   'webp-format-disabled-true',

package/package.json

@@ -89,7 +89,7 @@
     "svgo": "3.3.2",
     "terser": "5.44.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "6.0.2",
+    "typescript": "5.9.3",
     "typescript-eslint": "8.58.0",
     "uuid": "13.0.0",
     "webidl2": "24.5.0",
@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1613625"
+  "version": "1.0.1614363"
 }