chrome-devtools-frontend 1.0.1700561 → 1.0.1701636

package/front_end/panels/elements/{ElementsTreeOutline.ts → DOMTreeWidget.ts}

@@ -75,7 +75,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-const {html, nothing, render, Directives: {classMap, repeat, styleMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, ifDefined, repeat, styleMap}} = Lit;
 
 const UIStrings = {
   /**
@@ -101,7 +101,7 @@ const UIStrings = {
    */
   reveal: 'reveal',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMTreeWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, ElementsTreeOutline>();
 
@@ -919,6 +919,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     // clang-format off
     return html`
       <li role="treeitem"
+          data-backend-node-id=${ifDefined(node.backendNodeId())}
+          data-target-id=${ifDefined(node.domModel().target().id())}
           selectable=${input.selectEnabled ? 'true' : 'false'}
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
@@ -997,6 +999,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
+                    data-backend-node-id=${ifDefined(node.backendNodeId())}
+                    data-target-id=${ifDefined(node.domModel().target().id())}
                     selectable=${input.selectEnabled ? 'true' : 'false'}
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
                     class=${classMap({
@@ -1348,7 +1352,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       element?: HTMLElement,
       [changeTracker]:
           UI.Widget.WidgetDependencies<typeof DOMTreeWidget>|[ChangeTracker.ChangeTracker.ChangeTracker?] = [],
-      view: View = DEFAULT_VIEW,
+      view: View = DECLARATIVE_VIEW,
   ) {
     super(element, {
       useShadowDom: false,
@@ -1358,12 +1362,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#changeTracker = changeTracker;
     this.#showHTMLCommentsSetting.addChangeListener(this.#onShowHTMLCommentsChange, this);
     if (Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, this.#highlightNode, this,
-          {scoped: true});
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
-          this.#clearHighlightedNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED,
+                                                                  this.#highlightNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
+                                                                  this.#clearHighlightedNode, this, {scoped: true});
     }
     this.#setupPopovers();
   }
@@ -2245,7 +2249,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -2269,6 +2273,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         this.#wiredDOMModels.delete(domModel);
         this.#unwireDOMModel(domModel);
       }
+      if (this.#rootDOMNode?.domModel() === domModel) {
+        this.#rootDOMNode = null;
+        this.#selectedDOMNode = null;
+        this.#expandedNodes.clear();
+        this.#updateRecords.clear();
+      }
       this.performUpdate();
       return;
     }
@@ -3141,7 +3151,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else if (this.#view === DECLARATIVE_VIEW) {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -3472,8 +3482,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
   }
 
   selectedNodeChanged(focus: boolean): void {
-    this.dispatchEventToListeners(
-        ElementsTreeOutline.Events.SelectedNodeChanged, {node: this.selectedDOMNodeInternal, focus});
+    this.dispatchEventToListeners(ElementsTreeOutline.Events.SelectedNodeChanged,
+                                  {node: this.selectedDOMNodeInternal, focus});
   }
 
   private fireElementsTreeUpdated(nodes: SDK.DOMModel.DOMNode[]): void {
@@ -3787,8 +3797,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.addEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                              this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
   }
 
@@ -3803,8 +3813,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                                 this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
@@ -4026,8 +4036,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     return false;
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
-      UI.TreeOutline.TreeElement {
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                   isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     if (node instanceof Array) {
       return new AdoptedStyleSheetSetTreeElement(node);
     }
@@ -4202,9 +4212,9 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     this.#updateChildren(treeElement);
   }
 
-  insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
-      index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
+  insertChildElement(treeElement: ElementsTreeElement|TopLayerContainer,
+                     child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], index: number,
+                     isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
     return newElement;
@@ -4237,8 +4247,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements = new Map<
-        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                         UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -51,8 +51,8 @@ import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
+import {DOMTreeWidget, type ElementsTreeOutline} from './DOMTreeWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
-import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {LayoutPane} from './LayoutPane.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -67,10 +67,10 @@ import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
 import {cssPath} from './DOMPath.js';
+import {type ElementsTreeOutline, MappedCharToEntity} from './DOMTreeWidget.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
-import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -40,8 +40,8 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualElements from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
+import {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {adornerRef, ElementsTreeElement, handleAdornerKeydown} from './ElementsTreeElement.js';
-import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
 const {html, render} = Lit;
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2044,7 +2044,7 @@ export class AnchorFunctionRenderer extends AnchorFunctionRendererBase {
 
   override render(match: SDK.CSSPropertyParserMatchers.AnchorFunctionMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
-    if (match.node.name === 'VariableName') {
+    if (match.node.name !== 'CallExpression') {
       // Link an anchor double-dashed ident to its matching anchor element.
       void AnchorFunctionRenderer.decorateAnchorForAnchorLink(this.#stylesContainer, content, {identifier: match.text});
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -729,9 +729,6 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   }
 
   setEditingStyle(editing: boolean): void {
-    if (editing) {
-      this.isSuppressingResets = false;
-    }
     if (this.isEditingStyle === editing) {
       return;
     }
@@ -816,12 +813,13 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   #scheduleResetUpdateIfNotEditing(): void {
     this.scheduleResetUpdateIfNotEditingCalledForTest();
 
-    if (this.isSuppressingResets) {
+    // Don't schedule if editing; the edit completion will handle the update.
+    if (this.userOperation || this.isEditingStyle) {
       return;
     }
 
-    // Don't schedule if editing; the edit completion will handle the update.
-    if (this.userOperation || this.isEditingStyle) {
+    if (this.isSuppressingResets) {
+      this.isSuppressingResets = false;
       return;
     }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@ import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ElementsTreeOutline} from './ElementsTreeOutline.js';
+import type {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {

package/front_end/panels/elements/elements.ts

@@ -10,7 +10,7 @@ import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
-import './ElementsTreeOutline.js';
+import './DOMTreeWidget.js';
 import './ImagePreviewPopover.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
@@ -42,11 +42,11 @@ import * as CSSSpecificityBreakdown from './CSSSpecificityBreakdown.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
 import * as DOMPath from './DOMPath.js';
 import * as DOMTreeContextMenu from './DOMTreeContextMenu.js';
+import * as DOMTreeWidget from './DOMTreeWidget.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import * as ElementsTreeElement from './ElementsTreeElement.js';
-import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
@@ -80,11 +80,12 @@ export {
   CSSValueTraceView,
   DOMPath,
   DOMTreeContextMenu,
+  DOMTreeWidget,
+  DOMTreeWidget as ElementsTreeOutline,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,
   ElementsTreeElement,
-  ElementsTreeOutline,
   EventListenersWidget,
   ImagePreviewPopover,
   InspectElementModeController,

package/front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -64,7 +64,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement|
           <tr jslog=${VisualLogging.tableRow('detached-element')}>
             <td>
               <devtools-widget
-                ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+                ${widget(Elements.DOMTreeWidget.DOMTreeWidget, {
                   omitRootDOMNode: false,
                   selectEnabled: true,
                   hideGutter: true,

package/front_end/panels/profiler/HeapProfileView.ts

@@ -1067,12 +1067,14 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.samplingHeapProfilerTimeline), this.#recordTimelineSetting);
-    this.customContentInternal = checkboxSetting;
-    checkboxSetting.setAttribute(
-        'jslog', `${VisualLogging.toggle('record-sampling-heap-profiler-timeline').track({click: true})}`);
-    return checkboxSetting;
+    if (!this.customContentInternal) {
+      const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
+          i18nString(UIStrings.samplingHeapProfilerTimeline), this.#recordTimelineSetting);
+      this.customContentInternal = checkboxSetting;
+      checkboxSetting.setAttribute(
+          'jslog', `${VisualLogging.toggle('record-sampling-heap-profiler-timeline').track({click: true})}`);
+    }
+    return this.customContentInternal;
   }
 
   override setCustomContentEnabled(enable: boolean): void {

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -532,19 +532,26 @@ export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
     const scrollTop = this.scrollContainer.scrollTop;
     const scrollBottom = scrollTop + this.scrollContainer.offsetHeight;
     if (height >= scrollTop && height < scrollBottom) {
+      if (!node.dataGrid) {
+        this.updateVisibleNodes(false);
+      }
       return Promise.resolve(node);
     }
 
     const scrollGap = 40;
     this.scrollContainer.scrollTop = Math.max(0, height - scrollGap);
+    this.updateVisibleNodes(false);
     return new Promise(resolve => {
-      console.assert(!this.scrollToResolveCallback);
+      if (this.scrollToResolveCallback) {
+        this.scrollToResolveCallback();
+      }
       this.scrollToResolveCallback = resolve.bind(null, node);
       // Still resolve the promise if it does not scroll for some reason.
       this.scrollContainer.window().requestAnimationFrame(() => {
         if (!this.scrollToResolveCallback) {
           return;
         }
+        this.updateVisibleNodes(false);
         this.scrollToResolveCallback();
         this.scrollToResolveCallback = null;
       });

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1640,10 +1640,12 @@ export class TrackingHeapSnapshotProfileType extends TrackingHeapSnapshotProfile
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
-    this.customContentInternal = (checkboxSetting);
-    return checkboxSetting;
+    if (!this.customContentInternal) {
+      const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
+          i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
+      this.customContentInternal = checkboxSetting;
+    }
+    return this.customContentInternal;
   }
 
   override setCustomContentEnabled(enable: boolean): void {

package/front_end/panels/security/SecurityPanel.ts

@@ -13,7 +13,7 @@ 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 {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, 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';
@@ -1347,10 +1347,10 @@ interface DetailsTableRow {
   value: string|TemplateResult;
 }
 
-function renderDetailsTable(rows: DetailsTableRow[]): TemplateResult {
+function renderDetailsTable(rows: DetailsTableRow[], additionalClasses: Directives.ClassInfo = {}): TemplateResult {
   // clang-format off
   return html`
-    <table class="details-table">
+    <table class=${Directives.classMap({'details-table': true, ...additionalClasses})}>
       ${rows.map(row => html`
         <tr class="details-table-row">
           <td>${row.key ?? nothing}</td>
@@ -1492,6 +1492,74 @@ function renderCertificateSection(input: CertificateSectionInput): TemplateResul
   // clang-format on
 }
 
+interface CertificateTransparencySectionInput {
+  securityDetails: Protocol.Network.SecurityDetails;
+  isDetailsShown: boolean;
+  onToggleDetails: () => void;
+}
+
+function renderSctSummary(scts: Protocol.Network.SignedCertificateTimestamp[], isShown: boolean): TemplateResult {
+  const rows = scts.map(sct => ({
+                          key: i18nString(UIStrings.sct),
+                          value: `${sct.logDescription} (${sct.origin}, ${sct.status})`,
+                        }));
+  return renderDetailsTable(rows, {'sct-summary': true, hidden: !isShown});
+}
+
+function renderSctDetails(scts: Protocol.Network.SignedCertificateTimestamp[], isShown: boolean): TemplateResult {
+  // clang-format off
+  return html`
+    <div class=${Directives.classMap({'sct-details': true, hidden: !isShown})}>
+      ${scts.map(sct => renderDetailsTable([
+        {key: i18nString(UIStrings.logName), value: sct.logDescription},
+        {key: i18nString(UIStrings.logId), value: sct.logId.replace(/(.{2})/g, '$1 ')},
+        {key: i18nString(UIStrings.validationStatus), value: sct.status},
+        {key: i18nString(UIStrings.source), value: sct.origin},
+        {key: i18nString(UIStrings.issuedAt), value: new Date(sct.timestamp).toUTCString()},
+        {key: i18nString(UIStrings.hashAlgorithm), value: sct.hashAlgorithm},
+        {key: i18nString(UIStrings.signatureAlgorithm), value: sct.signatureAlgorithm},
+        {key: i18nString(UIStrings.signatureData), value: sct.signatureData.replace(/(.{2})/g, '$1 ')},
+      ]))}
+    </div>`;
+  // clang-format on
+}
+
+function renderCertificateTransparencyNote(compliance: Protocol.Network.CertificateTransparencyCompliance):
+    LitTemplate {
+  if (compliance === Protocol.Network.CertificateTransparencyCompliance.Unknown) {
+    return nothing;
+  }
+
+  const note = compliance === Protocol.Network.CertificateTransparencyCompliance.Compliant ?
+      i18nString(UIStrings.thisRequestCompliesWithChromes) :
+      i18nString(UIStrings.thisRequestDoesNotComplyWith);
+
+  return html`<div class="origin-view-section-notes">${note}</div>`;
+}
+
+function renderCertificateTransparencySection(input: CertificateTransparencySectionInput): TemplateResult {
+  const {securityDetails, isDetailsShown, onToggleDetails} = input;
+  const scts = securityDetails.signedCertificateTimestampList;
+  const toggleButtonText =
+      isDetailsShown ? i18nString(UIStrings.hideFullDetails) : i18nString(UIStrings.showFullDetails);
+
+  // clang-format off
+  return html`
+    <div class="origin-view-section-title" role="heading" aria-level="2">${i18nString(UIStrings.certificateTransparency)}</div>
+    ${renderSctSummary(scts, !isDetailsShown)}
+    ${renderSctDetails(scts, isDetailsShown)}
+    ${scts.length ? html`
+      <devtools-button
+          class="details-toggle"
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .accessibleLabel=${toggleButtonText}
+          .accessibleExpanded=${isDetailsShown}
+          .jslogContext=${'security.toggle-scts-details'}
+          @click=${onToggleDetails}>${toggleButtonText}</devtools-button>` : nothing}
+    ${renderCertificateTransparencyNote(securityDetails.certificateTransparencyCompliance)}`;
+  // clang-format on
+}
+
 export class SecurityOriginView extends UI.Widget.VBox {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #titleSection: HTMLElement;
@@ -1516,80 +1584,10 @@ export class SecurityOriginView extends UI.Widget.VBox {
 
       const sctListLength = originState.securityDetails.signedCertificateTimestampList.length;
       const ctCompliance = originState.securityDetails.certificateTransparencyCompliance;
-      let sctSection;
-      if (sctListLength || ctCompliance !== Protocol.Network.CertificateTransparencyCompliance.Unknown) {
-        // Create the Certificate Transparency section outside the callback, so that it appears in the right place.
-        sctSection = this.element.createChild('div', 'origin-view-section');
-        const sctDiv = sctSection.createChild('div', 'origin-view-section-title');
-        sctDiv.textContent = i18nString(UIStrings.certificateTransparency);
-        UI.ARIAUtils.markAsHeading(sctDiv, 2);
-      }
-
-      if (!sctSection) {
+      if (!sctListLength && ctCompliance === Protocol.Network.CertificateTransparencyCompliance.Unknown) {
         return;
       }
-
-      // Show summary of SCT(s) of Certificate Transparency.
-      const sctSummaryTable = new SecurityDetailsTable();
-      sctSummaryTable.element().classList.add('sct-summary');
-      sctSection.appendChild(sctSummaryTable.element());
-      for (let i = 0; i < sctListLength; i++) {
-        const sct = originState.securityDetails.signedCertificateTimestampList[i];
-        sctSummaryTable.addRow(
-            i18nString(UIStrings.sct), sct.logDescription + ' (' + sct.origin + ', ' + sct.status + ')');
-      }
-
-      // Show detailed SCT(s) of Certificate Transparency.
-      const sctTableWrapper = sctSection.createChild('div', 'sct-details');
-      sctTableWrapper.classList.add('hidden');
-      for (let i = 0; i < sctListLength; i++) {
-        const sctTable = new SecurityDetailsTable();
-        sctTableWrapper.appendChild(sctTable.element());
-        const sct = originState.securityDetails.signedCertificateTimestampList[i];
-        sctTable.addRow(i18nString(UIStrings.logName), sct.logDescription);
-        sctTable.addRow(i18nString(UIStrings.logId), sct.logId.replace(/(.{2})/g, '$1 '));
-        sctTable.addRow(i18nString(UIStrings.validationStatus), sct.status);
-        sctTable.addRow(i18nString(UIStrings.source), sct.origin);
-        sctTable.addRow(i18nString(UIStrings.issuedAt), new Date(sct.timestamp).toUTCString());
-        sctTable.addRow(i18nString(UIStrings.hashAlgorithm), sct.hashAlgorithm);
-        sctTable.addRow(i18nString(UIStrings.signatureAlgorithm), sct.signatureAlgorithm);
-        sctTable.addRow(i18nString(UIStrings.signatureData), sct.signatureData.replace(/(.{2})/g, '$1 '));
-      }
-
-      // Add link to toggle between displaying of the summary of the SCT(s) and the detailed SCT(s).
-      if (sctListLength) {
-        function toggleSctDetailsDisplay(): void {
-          let buttonText;
-          const isDetailsShown = !sctTableWrapper.classList.contains('hidden');
-          if (isDetailsShown) {
-            buttonText = i18nString(UIStrings.showFullDetails);
-          } else {
-            buttonText = i18nString(UIStrings.hideFullDetails);
-          }
-          toggleSctsDetailsLink.textContent = buttonText;
-          UI.ARIAUtils.setLabel(toggleSctsDetailsLink, buttonText);
-          UI.ARIAUtils.setExpanded(toggleSctsDetailsLink, !isDetailsShown);
-          sctSummaryTable.element().classList.toggle('hidden');
-          sctTableWrapper.classList.toggle('hidden');
-        }
-        const toggleSctsDetailsLink = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.showFullDetails), toggleSctDetailsDisplay,
-            {className: 'details-toggle', jslogContext: 'security.toggle-scts-details'});
-        sctSection.appendChild(toggleSctsDetailsLink);
-      }
-
-      switch (ctCompliance) {
-        case Protocol.Network.CertificateTransparencyCompliance.Compliant:
-          sctSection.createChild('div', 'origin-view-section-notes').textContent =
-              i18nString(UIStrings.thisRequestCompliesWithChromes);
-          break;
-        case Protocol.Network.CertificateTransparencyCompliance.NotCompliant:
-          sctSection.createChild('div', 'origin-view-section-notes').textContent =
-              i18nString(UIStrings.thisRequestDoesNotComplyWith);
-          break;
-        case Protocol.Network.CertificateTransparencyCompliance.Unknown:
-          break;
-      }
+      this.#createCertificateTransparencySection(originState.securityDetails);
 
       const noteSection = this.element.createChild('div', 'origin-view-section origin-view-notes');
       if (originState.loadedFromCache) {
@@ -1640,6 +1638,20 @@ export class SecurityOriginView extends UI.Widget.VBox {
     updateCertificateSection();
   }
 
+  #createCertificateTransparencySection(securityDetails: Protocol.Network.SecurityDetails): void {
+    const section = this.element.createChild('div', 'origin-view-section certificate-transparency-section');
+    let isDetailsShown = false;
+    const onToggleDetails = (): void => {
+      isDetailsShown = !isDetailsShown;
+      updateSection();
+    };
+    const updateSection = (): void => {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(renderCertificateTransparencySection({securityDetails, isDetailsShown, onToggleDetails}), section);
+    };
+    updateSection();
+  }
+
   #showCertificateViewer = async(event: Event): Promise<void> => {
     event.consume();
     const names = await SDK.NetworkManager.MultitargetNetworkManager.instance().getCertificate(this.#origin);
@@ -1667,30 +1679,6 @@ export class SecurityOriginView extends UI.Widget.VBox {
   };
 }
 
-export class SecurityDetailsTable {
-  readonly #element: HTMLTableElement;
-
-  constructor() {
-    this.#element = document.createElement('table');
-    this.#element.classList.add('details-table');
-  }
-
-  element(): HTMLTableElement {
-    return this.#element;
-  }
-
-  addRow(key: string, value: string|Node): void {
-    const row = this.#element.createChild('tr', 'details-table-row');
-    row.createChild('td').textContent = key;
-
-    const valueCell = row.createChild('td');
-    if (typeof value === 'string') {
-      valueCell.textContent = value;
-    } else {
-      valueCell.appendChild(value);
-    }
-  }
-}
 export interface OriginState {
   securityState: Protocol.Security.SecurityState;
   securityDetails: Protocol.Network.SecurityDetails|null;