npm - chrome-devtools-frontend - Versions diffs - 1.0.1558690 → 1.0.1561080 - Mend

chrome-devtools-frontend 1.0.1558690 → 1.0.1561080

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/front_end/panels/elements/ElementsTreeOutline.ts CHANGED Viewed

@@ -372,7 +372,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    */
   updateNodeAdorners(node: SDK.DOMModel.DOMNode): void {
     const element = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
-    void element?.updateStyleAdorners();
     void element?.updateAdorners();
   }
@@ -1526,7 +1525,6 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -1542,7 +1540,6 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -1749,10 +1746,6 @@ export class ElementsTreeOutline extends
       treeElement.setCollapsible(false);
     }
-    if (node.hasAssignedSlot()) {
-      treeElement.createSlotLink(node.assignedSlot);
-    }
     treeElement.selectable = Boolean(this.selectEnabled);
     return treeElement;
   }
@@ -2020,27 +2013,11 @@ export class ElementsTreeOutline extends
     }
   }
-  private scrollableFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
-    let {node} = event.data;
-    if (node.nodeName() === '#document') {
-      // We show the scroll badge of the document on the <html> element.
-      if (!node.ownerDocument?.documentElement) {
-        return;
-      }
-      node = node.ownerDocument.documentElement;
-    }
-    const treeElement = this.treeElementByNode.get(node);
-    if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.updateScrollAdorner();
-    }
-  }
   private affectedByStartingStylesFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>):
       void {
     const {node} = event.data;
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.updateStyleAdorners();
       void treeElement.updateAdorners();
     }
   }

package/front_end/panels/elements/ShortcutTreeElement.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 // Copyright 2021 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-imperative-dom-api */
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
@@ -36,15 +35,16 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+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 {ElementsPanel} from './ElementsPanel.js';
-import {ElementsTreeElement} from './ElementsTreeElement.js';
+import {adornerRef, ElementsTreeElement} from './ElementsTreeElement.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
+const {html, render} = Lit;
 const UIStrings = {
   /**
    * @description Link text content in Elements Tree Outline of the Elements panel
@@ -54,56 +54,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ShortcutTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+interface ViewInput {
+  title: string;
+  onRevealAdornerClick: (e: Event) => void;
+}
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <div class="selection fill"></div>
+    <span class="elements-tree-shortcut-title">\u21AA ${input.title}</span>
+    <devtools-adorner
+      .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
+      class="adorner-reveal"
+      jslog=${VisualElements.adorner('reveal')}
+      aria-label=${i18nString(UIStrings.reveal)}
+      @click=${input.onRevealAdornerClick}
+      @mousedown=${(e: Event) => e.consume()}
+      ${adornerRef()}>
+      <span class="adorner-with-icon">
+        <devtools-icon name="select-element"></devtools-icon>
+        <span>${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}</span>
+      </span>
+    </devtools-adorner>
+  `, target);
+  // clang-format on
+};
 export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
   private readonly nodeShortcut: SDK.DOMModel.DOMNodeShortcut;
   #hovered?: boolean;
-  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut) {
+  #view: typeof DEFAULT_VIEW;
+  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut, view = DEFAULT_VIEW) {
     super('');
-    this.listItemElement.createChild('div', 'selection fill');
-    const title = this.listItemElement.createChild('span', 'elements-tree-shortcut-title');
-    let text = nodeShortcut.nodeName.toLowerCase();
-    if (nodeShortcut.nodeType === Node.ELEMENT_NODE) {
-      text = '<' + text + '>';
-    }
-    title.textContent = '\u21AA ' + text;
     this.nodeShortcut = nodeShortcut;
-    this.addRevealAdorner();
-  }
-  addRevealAdorner(): void {
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.classList.add('adorner-reveal');
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
-    const name = config.name;
-    const adornerContent = document.createElement('span');
-    const linkIcon = createIcon('select-element');
-    const slotText = document.createElement('span');
-    slotText.textContent = name;
-    adornerContent.append(linkIcon);
-    adornerContent.append(slotText);
-    adornerContent.classList.add('adorner-with-icon');
-    adorner.data = {
-      name,
-      content: adornerContent,
-      jslogContext: 'reveal',
-    };
-    this.listItemElement.appendChild(adorner);
-    const onClick = ((() => {
-                       this.nodeShortcut.deferredNode.resolve(
-                           node => {
-                             void Common.Revealer.reveal(node);
-                           },
-                       );
-                     }) as EventListener);
-    adorner.addInteraction(onClick, {
-      isToggle: false,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.reveal),
-      ariaLabelActive: i18nString(UIStrings.reveal),
-    });
-    adorner.addEventListener('mousedown', e => e.consume(), false);
-    ElementsPanel.instance().registerAdorner(adorner);
+    this.#view = view;
+    this.performUpdate();
   }
   get hovered(): boolean {
@@ -154,4 +141,24 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
     }
     return true;
   }
+  private onRevealAdornerClick(event: Event): void {
+    event.stopPropagation();
+    this.nodeShortcut.deferredNode.resolve(node => {
+      void Common.Revealer.reveal(node);
+    });
+  }
+  private performUpdate(): void {
+    let text = this.nodeShortcut.nodeName.toLowerCase();
+    if (this.nodeShortcut.nodeType === Node.ELEMENT_NODE) {
+      text = '<' + text + '>';
+    }
+    this.#view(
+        {
+          title: text,
+          onRevealAdornerClick: this.onRevealAdornerClick.bind(this),
+        },
+        undefined, this.listItemElement);
+  }
 }

package/front_end/panels/elements/StylePropertiesSection.ts CHANGED Viewed

@@ -810,9 +810,7 @@ export class StylePropertiesSection {
           ancestorRuleElement = this.createNestingElement(rule.nestingSelectors?.[nestingIndex++]);
           break;
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
-          if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
-            ancestorRuleElement = this.createStartingStyleElement();
-          }
+          ancestorRuleElement = this.createStartingStyleElement();
           break;
       }
       if (ancestorRuleElement) {

package/front_end/panels/elements/StylesSidebarPane.ts CHANGED Viewed

@@ -482,6 +482,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
+    this.setFilter(regex);
+  }
+  setFilter(regex: RegExp|null): void {
     this.lastFilterChange = Date.now();
     this.#filterRegex = regex;
     this.updateFilter();
@@ -1036,6 +1040,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
+    let lastLayerParent: SectionBlock|undefined;
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers = false;
@@ -1046,6 +1051,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         if ((layers.length || lastLayers) && lastLayers !== layers) {
           const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
+          lastLayerParent?.childBlocks.push(block);
           sawLayers = true;
           lastLayers = layers;
         }
@@ -1055,12 +1061,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // We disable the layer widget initially. If we see a layer in
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
         const block = await SectionBlock.createInheritedNodeBlock(lastParentNode);
+        lastLayerParent = block;
         blocks.push(block);
       }
@@ -1078,6 +1084,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         });
       }
     }
+    lastLayerParent = undefined;
     const customHighlightPseudoRulesets: Array<{
       highlightName: string | null,
@@ -1130,9 +1137,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           if (parentNode) {
             const block =
                 await SectionBlock.createInheritedPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName, parentNode);
+            lastLayerParent = block;
             blocks.push(block);
           } else {
             const block = SectionBlock.createPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName);
+            lastLayerParent = block;
             blocks.push(block);
           }
         }
@@ -1503,6 +1512,7 @@ const MAX_LINK_LENGTH = 23;
 export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
+  childBlocks: SectionBlock[] = [];
   #expanded = false;
   #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
@@ -1634,14 +1644,15 @@ export class SectionBlock {
   }
   updateFilter(): number {
-    let hasAnyVisibleSection = false;
     let numVisibleSections = 0;
+    for (const childBlock of this.childBlocks) {
+      numVisibleSections += childBlock.updateFilter();
+    }
     for (const section of this.sections) {
       numVisibleSections += section.updateFilter() ? 1 : 0;
-      hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
     }
     if (this.#titleElement) {
-      this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
+      this.#titleElement.classList.toggle('hidden', numVisibleSections === 0);
     }
     return numVisibleSections;
   }

package/front_end/panels/elements/components/AdornerManager.ts CHANGED Viewed

@@ -2,24 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-export const enum AdornerCategories {
-  SECURITY = 'Security',
-  LAYOUT = 'Layout',
-  DEFAULT = 'Default',
-}
-export interface AdornerSetting {
+interface AdornerSetting {
   adorner: string;
   isEnabled: boolean;
 }
-export type AdornerSettingsMap = Map<string, boolean>;
-export interface RegisteredAdorner {
-  readonly name: string;
-  readonly category: AdornerCategories;
-  readonly enabledByDefault: boolean;
-}
+type AdornerSettingsMap = Map<string, boolean>;
 export enum RegisteredAdorners {
   AD = 'ad',
@@ -39,125 +27,6 @@ export enum RegisteredAdorners {
   TOP_LAYER = 'top-layer',
 }
-/**
- * This enum-like const object serves as the authoritative registry for all the
- * adorners available.
- **/
-export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorner {
-  switch (which) {
-    case RegisteredAdorners.GRID:
-      return {
-        name: 'grid',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SUBGRID:
-      return {
-        name: 'subgrid',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.GRID_LANES:
-      return {
-        name: 'grid-lanes',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.FLEX:
-      return {
-        name: 'flex',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.AD:
-      return {
-        name: 'ad',
-        category: AdornerCategories.SECURITY,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SCROLL_SNAP:
-      return {
-        name: 'scroll-snap',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.STARTING_STYLE:
-      return {
-        name: 'starting-style',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.CONTAINER:
-      return {
-        name: 'container',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SLOT:
-      return {
-        name: 'slot',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.TOP_LAYER:
-      return {
-        name: 'top-layer',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.REVEAL:
-      return {
-        name: 'reveal',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.MEDIA:
-      return {
-        name: 'media',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: false,
-      };
-    case RegisteredAdorners.SCROLL:
-      return {
-        name: 'scroll',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.POPOVER: {
-      return {
-        name: 'popover',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    }
-    case RegisteredAdorners.VIEW_SOURCE: {
-      return {
-        name: 'view-source',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: true,
-      };
-    }
-  }
-}
-let adornerNameToCategoryMap: Map<string, AdornerCategories>|undefined = undefined;
-function getCategoryFromAdornerName(name: string): AdornerCategories {
-  if (!adornerNameToCategoryMap) {
-    adornerNameToCategoryMap = new Map();
-    for (const {name, category} of Object.values(RegisteredAdorners).map(getRegisteredAdorner)) {
-      adornerNameToCategoryMap.set(name, category);
-    }
-  }
-  return adornerNameToCategoryMap.get(name) || AdornerCategories.DEFAULT;
-}
-export const DefaultAdornerSettings: AdornerSetting[] =
-    Object.values(RegisteredAdorners).map(getRegisteredAdorner).map(({name, enabledByDefault}) => ({
-                                                                      adorner: name,
-                                                                      isEnabled: enabledByDefault,
-                                                                    }));
 interface SettingStore<Setting> {
   get(): Setting;
   set(setting: Setting): void;
@@ -205,9 +74,11 @@ export class AdornerManager {
     // Prune outdated adorners and add new ones to the persistence.
     const outdatedAdorners = new Set(this.#adornerSettings.keys());
-    for (const {adorner, isEnabled} of DefaultAdornerSettings) {
+    for (const adorner of Object.values(RegisteredAdorners)) {
       outdatedAdorners.delete(adorner);
       if (!this.#adornerSettings.has(adorner)) {
+        // Only the MEDIA adorner is disabled by default.
+        const isEnabled = adorner !== RegisteredAdorners.MEDIA;
         this.#adornerSettings.set(adorner, isEnabled);
       }
     }
@@ -218,18 +89,3 @@ export class AdornerManager {
     this.#persistCurrentSettings();
   }
 }
-const OrderedAdornerCategories = [
-  AdornerCategories.SECURITY,
-  AdornerCategories.LAYOUT,
-  AdornerCategories.DEFAULT,
-];
-/** Use idx + 1 for the order to avoid JavaScript's 0 == false issue **/
-export const AdornerCategoryOrder = new Map(OrderedAdornerCategories.map((category, idx) => [category, idx + 1]));
-export function compareAdornerNamesByCategory(nameA: string, nameB: string): number {
-  const orderA = AdornerCategoryOrder.get(getCategoryFromAdornerName(nameA)) || Number.POSITIVE_INFINITY;
-  const orderB = AdornerCategoryOrder.get(getCategoryFromAdornerName(nameB)) || Number.POSITIVE_INFINITY;
-  return orderA - orderB;
-}

package/front_end/panels/issues/HiddenIssuesRow.ts CHANGED Viewed

@@ -49,8 +49,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
   // clang-format off
   render(html`
   <div class="header">
-    <devtools-adorner class="aggregated-issues-count"
-                      .data=${{name: 'countWrapper'}}>
+    <devtools-adorner class="aggregated-issues-count" .name=${'countWrapper'}>
       <span>${input.count}</span>
     </devtools-adorner>
     <div class="title">${i18nString(UIStrings.hiddenIssues)}</div>

package/front_end/panels/issues/IssueKindView.ts CHANGED Viewed

@@ -98,10 +98,8 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#issueCount,
-    };
+    countAdorner.name = 'countWrapper';
+    countAdorner.append(this.#issueCount);
     countAdorner.classList.add('aggregated-issues-count');
     this.#issueCount.textContent = '0';

package/front_end/panels/issues/IssueView.ts CHANGED Viewed

@@ -342,10 +342,8 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#aggregatedIssuesCount,
-    };
+    countAdorner.name = 'countWrapper';
+    countAdorner.append(this.#aggregatedIssuesCount);
     countAdorner.classList.add('aggregated-issues-count');
     header.appendChild(this.#issueKindIcon);
     header.appendChild(countAdorner);

package/front_end/panels/network/NetworkDataGridNode.ts CHANGED Viewed

@@ -323,8 +323,26 @@ const UIStrings = {
    */
   initialPriorityToolTip: '{PH1}, Initial priority: {PH2}',
   /**
-   * @description Tooltip to explain why the request has an IPP icon
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a render blocking resource.
    */
+  blocking: 'Blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a resource that blocks the parser from starting to parse the document.
+   */
+  inBodyParserBlocking: 'In-body parser blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a non-blocking resource.
+   */
+  nonBlocking: 'Non-blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a non-blocking resource.
+   */
+  nonBlockingDynamic: 'Non-blocking dynamic',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a potentially blocking resource.
+   */
+  potentiallyBlocking: 'Potentially blocking',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -775,6 +793,25 @@ export class NetworkRequestNode extends NetworkNode {
     return aRequest.identityCompare(bRequest);
   }
+  static RenderBlockingComparator(a: NetworkNode, b: NetworkNode): number {
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? -1 : 1;
+    }
+    const order = [
+      Protocol.Network.RenderBlockingBehavior.InBodyParserBlocking,
+      Protocol.Network.RenderBlockingBehavior.Blocking,
+      Protocol.Network.RenderBlockingBehavior.PotentiallyBlocking,
+      Protocol.Network.RenderBlockingBehavior.NonBlocking,
+      Protocol.Network.RenderBlockingBehavior.NonBlockingDynamic,
+      undefined,
+    ];
+    const aOrder = order.indexOf(aRequest.renderBlockingBehavior());
+    const bOrder = order.indexOf(bRequest.renderBlockingBehavior());
+    return aOrder - bOrder;
+  }
   static RequestPropertyComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1051,6 +1088,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.setTextAndTitle(cell, this.requestInternal.isAdRelated().toLocaleString());
         break;
       }
+      case 'render-blocking': {
+        this.renderRenderBlockingCell(cell);
+        break;
+      }
       case 'cookies': {
         this.setTextAndTitle(cell, this.arrayLength(this.requestInternal.includedRequestCookies()));
         break;
@@ -1360,6 +1401,29 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
+  private renderRenderBlockingCell(cell: HTMLElement): void {
+    switch (this.requestInternal.renderBlockingBehavior()) {
+      case Protocol.Network.RenderBlockingBehavior.Blocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.blocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.InBodyParserBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.inBodyParserBlocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.NonBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.nonBlocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.NonBlockingDynamic:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.nonBlockingDynamic));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.PotentiallyBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.potentiallyBlocking));
+        break;
+      default:
+        UI.UIUtils.createTextChild(cell, '');
+        break;
+    }
+  }
   #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
     if (this.requestInternal.resourceType().isStyleSheet()) {
       return Host.UserMetrics.Action.StyleSheetInitiatorLinkClicked;

package/front_end/panels/network/NetworkLogView.ts CHANGED Viewed

@@ -2754,11 +2754,9 @@ export class MoreFiltersDropDownUI extends Common.ObjectWrapper.ObjectWrapper<UI
     this.filterElement.setAttribute('jslog', `${VisualLogging.dropDown('more-filters').track({click: true})}`);
     this.activeFiltersCountAdorner = new Adorners.Adorner.Adorner();
+    this.activeFiltersCountAdorner.name = 'countWrapper';
     this.activeFiltersCount = document.createElement('span');
-    this.activeFiltersCountAdorner.data = {
-      name: 'countWrapper',
-      content: this.activeFiltersCount,
-    };
+    this.activeFiltersCountAdorner.append(this.activeFiltersCount);
     this.activeFiltersCountAdorner.classList.add('active-filters-count');
     this.updateActiveFiltersCount();

package/front_end/panels/network/NetworkLogViewColumns.ts CHANGED Viewed

@@ -152,6 +152,10 @@ const UIStrings = {
    * @description Text to show whether a request is ad-related
    */
   isAdRelated: 'Is Ad-Related',
+  /**
+   * @description Text in Network Log View Columns of the Network panel
+   */
+  renderBlocking: 'Render Blocking',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogViewColumns.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1192,6 +1196,11 @@ const DEFAULT_COLUMNS = [
     title: i18nLazyString(UIStrings.isAdRelated),
     sortingFunction: NetworkRequestNode.IsAdRelatedComparator,
   },
+  {
+    id: 'render-blocking',
+    title: i18nLazyString(UIStrings.renderBlocking),
+    sortingFunction: NetworkRequestNode.RenderBlockingComparator,
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',

package/front_end/panels/screencast/ScreencastApp.ts CHANGED Viewed

@@ -46,6 +46,7 @@ export class ScreencastApp implements Common.App.App,
   presentUI(document: Document): void {
     this.rootView = new UI.RootView.RootView();
+    this.rootView.registerRequiredCSS(UI.inspectorCommonStyles);
     this.rootSplitWidget =
         new UI.SplitWidget.SplitWidget(false, true, 'inspector-view.screencast-split-view-state', 300, 300);