chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,17 +6,17 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type ComputedStyleChangedEvent, ComputedStyleModel, Events} from './ComputedStyleModel.js';
+import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
   private readonly updateThrottler: Common.Throttler.Throttler;
   private updateWhenVisible: boolean;
-  constructor(delegatesFocus?: boolean) {
+  constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
     super(true, delegatesFocus);
     this.element.classList.add('flex-none');
-    this.computedStyleModelInternal = new ComputedStyleModel();
-    this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onCSSModelChanged, this);
+    this.computedStyleModelInternal = computedStyleModel;
+    this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
 
     this.updateThrottler = new Common.Throttler.Throttler(100);
     this.updateWhenVisible = false;
@@ -57,6 +57,6 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent|null>): void {
+  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -522,7 +522,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       const selectedElementCommand = '$0';
       UI.Tooltip.Tooltip.install(
           this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
-      UI.ARIAUtils.markAsHidden(this.hintElement);
+      UI.ARIAUtils.setHidden(this.hintElement, true);
     }
   }
 
@@ -1629,7 +1629,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const hasText = (forceValue || value.length > 0);
-    const attrSpanElement = (parentElement.createChild('span', 'webkit-html-attribute') as HTMLElement);
+    const attrSpanElement = parentElement.createChild('span', 'webkit-html-attribute');
     attrSpanElement.setAttribute(
         'jslog', `${VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
           change: true,

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -71,10 +71,6 @@ const UIStrings = {
    *@description Link text content in Elements Tree Outline of the Elements panel
    */
   reveal: 'reveal',
-  /**
-   * @description A context menu item to open the badge settings pane
-   */
-  adornerSettings: 'Badge settings\u2026',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -130,8 +126,7 @@ export class ElementsTreeOutline extends
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
     this.shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        shadowContainer,
-        {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default], delegatesFocus: undefined});
+        shadowContainer, {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default]});
     const outlineDisclosureElement = this.shadowRoot.createChild('div', 'elements-disclosure');
 
     this.elementInternal = this.element;
@@ -940,9 +935,7 @@ export class ElementsTreeOutline extends
       treeElement.populatePseudoElementContextMenu(contextMenu);
     }
 
-    contextMenu.viewSection().appendItem(i18nString(UIStrings.adornerSettings), () => {
-      ElementsPanel.instance().showAdornerSettingsPane();
-    }, {jslogContext: 'show-adorner-settings'});
+    ElementsPanel.instance().populateAdornerSettingsContextMenu(contextMenu);
 
     contextMenu.appendApplicableItems(treeElement.node());
     void contextMenu.show();

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -36,6 +36,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
@@ -51,8 +52,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   }[];
   private isEditingMetrics?: boolean;
 
-  constructor() {
-    super();
+  constructor(computedStyleModel: ComputedStyleModel) {
+    super(computedStyleModel);
 
     this.originalPropertyData = null;
     this.previousPropertyDataCandidate = null;

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -80,6 +80,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
     super(true);
 
     this.sharedModel = sharedModel;
+    this.sharedModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
     this.sharedModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
 
     this.sectionTitle = document.createElement('div');

package/front_end/panels/elements/PropertyMatchers.test.ts

@@ -153,7 +153,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.ColorMixMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(match.space.map(n => ast.text(n)), ['in', 'srgb', 'var(--interpolation)', 'hue']);
+      assert.deepEqual(match.space.map(n => ast.text(n)), ['in', 'srgb', 'var(--interpolation)', 'hue']);
       assert.strictEqual(match.color1.map(n => ast.text(n)).join(), 'red,var(--percentage)');
       assert.strictEqual(match.color2.map(n => ast.text(n)).join(), 'rgb(var(--rgb))');
     }
@@ -189,7 +189,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       assert.exists(ast, text);
       assert.exists(match, text);
 
-      assert.deepStrictEqual(match.space.map(n => ast.text(n)).join(' '), space, text);
+      assert.deepEqual(match.space.map(n => ast.text(n)).join(' '), space, text);
       assert.strictEqual(match.color1.map(n => ast.text(n)).join(' '), color1, text);
       assert.strictEqual(match.color2.map(n => ast.text(n)).join(' '), color2, text);
     }
@@ -252,41 +252,40 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       return matches.map(m => matchedResult.getMatch(m)?.text);
     }
 
-    assert.deepStrictEqual(match('animation-name', 'first, second, -moz-third'), ['first', 'second', '-moz-third']);
-    assert.deepStrictEqual(match('animation-name', 'first'), ['first']);
-    assert.deepStrictEqual(match('font-palette', 'first'), ['first']);
+    assert.deepEqual(match('animation-name', 'first, second, -moz-third'), ['first', 'second', '-moz-third']);
+    assert.deepEqual(match('animation-name', 'first'), ['first']);
+    assert.deepEqual(match('font-palette', 'first'), ['first']);
     {
-      assert.deepStrictEqual(match('position-try-fallbacks', 'flip-block'), []);
-      assert.deepStrictEqual(match('position-try-fallbacks', '--one'), ['--one']);
-      assert.deepStrictEqual(match('position-try-fallbacks', '--one, --two'), ['--one', '--two']);
+      assert.deepEqual(match('position-try-fallbacks', 'flip-block'), []);
+      assert.deepEqual(match('position-try-fallbacks', '--one'), ['--one']);
+      assert.deepEqual(match('position-try-fallbacks', '--one, --two'), ['--one', '--two']);
     }
     {
-      assert.deepStrictEqual(match('position-try', 'flip-block'), []);
-      assert.deepStrictEqual(match('position-try', '--one'), ['--one']);
-      assert.deepStrictEqual(match('position-try', '--one, --two'), ['--one', '--two']);
+      assert.deepEqual(match('position-try', 'flip-block'), []);
+      assert.deepEqual(match('position-try', '--one'), ['--one']);
+      assert.deepEqual(match('position-try', '--one, --two'), ['--one', '--two']);
     }
     {
       injectVariableSubstitutions({
         '--duration-and-easing': '1s linear',
       });
-      assert.deepStrictEqual(match('animation', '1s linear --animation-name'), ['--animation-name']);
-      assert.deepStrictEqual(match('animation', '1s linear linear'), ['linear']);
-      assert.deepStrictEqual(
+      assert.deepEqual(match('animation', '1s linear --animation-name'), ['--animation-name']);
+      assert.deepEqual(match('animation', '1s linear linear'), ['linear']);
+      assert.deepEqual(
           match('animation', '1s linear --first-name, 1s ease-in --second-name'), ['--first-name', '--second-name']);
-      assert.deepStrictEqual(match('animation', '1s linear'), []);
+      assert.deepEqual(match('animation', '1s linear'), []);
       // Matching to variable names inside `var()` functions are fine as it is handled by variable renderer in usage.
-      assert.deepStrictEqual(
-          match('animation', 'var(--duration-and-easing) linear'), ['--duration-and-easing', 'linear']);
-      assert.deepStrictEqual(
+      assert.deepEqual(match('animation', 'var(--duration-and-easing) linear'), ['--duration-and-easing', 'linear']);
+      assert.deepEqual(
           match('animation', '1s linear var(--non-existent, --animation-name)'),
           ['--non-existent', '--animation-name']);
-      assert.deepStrictEqual(match('animation', '1s step-start 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s step-end 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s steps(1, jump-start) 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s steps(1, jump-end) 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s steps(1, jump-none) 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s steps(1, start) 0s kf'), ['kf']);
-      assert.deepStrictEqual(match('animation', '1s steps(1, end) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s step-start 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s step-end 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-start) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-end) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, jump-none) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, start) 0s kf'), ['kf']);
+      assert.deepEqual(match('animation', '1s steps(1, end) 0s kf'), ['kf']);
     }
   });
 
@@ -348,7 +347,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
 
       const matches = SDK.CSSPropertyParser.TreeSearch.findAll(
           ast, node => matchedResult.getMatch(node) instanceof Elements.PropertyMatchers.FontMatch);
-      assert.deepStrictEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans"', 'sans-serif']);
+      assert.deepEqual(matches.map(m => matchedResult.getMatch(m)?.text), ['"Gill Sans"', 'sans-serif']);
     }
   });
 
@@ -371,7 +370,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid-template-areas', '"a a a" "b b b" "c c c"', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a a"', '"b b b"', '"c c c"']);
     }
     {
@@ -379,7 +378,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid-template', '"a a a" var(--row) / auto 1fr auto', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a a"', 'var(--row) / auto 1fr auto']);
     }
     {
@@ -389,7 +388,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[header-top] "a a" var(--row-with-names)', '[main-top] "b b b" 1fr [main-bottom] / auto 1fr auto']);
     }
@@ -400,7 +399,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[header-top] "a a"', '"b b b" var(--line-name)', '"c c" / auto 1fr auto']);
     }
@@ -411,7 +410,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')),
           ['[line1] "a a" [line2]', 'var(--double-row)', '"b b" / auto 1fr auto']);
     }
@@ -420,7 +419,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
           'grid', '"a a" var(--unresolved) / auto 1fr auto;', new Elements.PropertyMatchers.GridTemplateMatcher());
       assert.exists(ast, text);
       assert.exists(match, text);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           match.lines.map(line => line.map(n => ast.text(n)).join(' ')), ['"a a" var(--unresolved) / auto 1fr auto']);
     }
   });
@@ -527,7 +526,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
             'position-try', 'flip-block, --top, --bottom', new Elements.PropertyMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, 'flip-block, --top, --bottom');
-        assert.strictEqual(match.preamble.length, 0);
+        assert.lengthOf(match.preamble, 0);
       } {
         const {ast, match, text} = matchSingleValue(
             'position-try', '/* comment */ most-height --top, --bottom',
@@ -544,7 +543,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
             new Elements.PropertyMatchers.PositionTryMatcher());
         assert.exists(match, text);
         assert.strictEqual(match.text, '/* comment */ flip-block, --top, /* comment */ --bottom');
-        assert.strictEqual(match.preamble.length, 0);
+        assert.lengthOf(match.preamble, 0);
       } {
         const {match} = matchSingleValue('position-try', 'revert', new Elements.PropertyMatchers.PositionTryMatcher());
         assert.isNull(match);

package/front_end/panels/elements/PropertyRenderer.test.ts

@@ -18,17 +18,17 @@ describeWithEnvironment('PropertyRenderer', () => {
     it('parses text', () => {
       // Prevent normaliztaion to get an accurate representation of the parser result.
       sinon.stub(Element.prototype, 'normalize');
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(
               Array.from(Elements.PropertyRenderer.Renderer.renderValueElement('--p', 'var(--v)', []).childNodes)),
           ['var', '(', '--v', ')']);
 
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Array.from(
               Elements.PropertyRenderer.Renderer.renderValueElement('--p', '/* comments are text */ 1px solid 4', [])
                   .childNodes)),
           ['/* comments are text */', ' ', '1px', ' ', 'solid', ' ', '4']);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Array.from(
               Elements.PropertyRenderer.Renderer
                   .renderValueElement('--p', '2px var(--double, var(--fallback, black)) #32a1ce rgb(124 125 21 0)', [])
@@ -47,7 +47,7 @@ describeWithEnvironment('PropertyRenderer', () => {
       const ast = new SDK.CSSPropertyParser.SyntaxTree(property, rule, tree);
       const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, []);
       const context = new Elements.PropertyRenderer.RenderingContext(ast, new Map(), matchedResult);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Elements.PropertyRenderer.Renderer.render(tree, context).nodes).join(''), rule,
           Printer.walk(ast).get());
     });
@@ -60,7 +60,7 @@ describeWithEnvironment('PropertyRenderer', () => {
       const ast = new SDK.CSSPropertyParser.SyntaxTree(property, rule, tree);
       const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, []);
       const context = new Elements.PropertyRenderer.RenderingContext(ast, new Map(), matchedResult);
-      assert.deepStrictEqual(
+      assert.deepEqual(
           textFragments(Elements.PropertyRenderer.Renderer.render(tree, context).nodes).join(''), property,
           Printer.walk(ast).get());
     });

package/front_end/panels/elements/StylePropertiesSection.test.ts

@@ -82,6 +82,11 @@ function setUpStyles(
 }
 
 describeWithMockConnection('StylesPropertySection', () => {
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
+  beforeEach(() => {
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+  });
+
   it('displays the proper sourceURL origin for constructed stylesheets', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
@@ -161,7 +166,7 @@ describeWithMockConnection('StylesPropertySection', () => {
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').set('  ');
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -214,7 +219,7 @@ describeWithMockConnection('StylesPropertySection', () => {
   it('updates property rule property names', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -274,7 +279,7 @@ describeWithMockConnection('StylesPropertySection', () => {
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').set('  ');
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};
@@ -302,7 +307,7 @@ describeWithMockConnection('StylesPropertySection', () => {
   it('renders active and inactive position-try rule sections correctly', async () => {
     const cssModel = createTarget().model(SDK.CSSModel.CSSModel);
     assert.exists(cssModel);
-    const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -247,7 +247,7 @@ export class StylePropertiesSection {
             new UI.Toolbar.Toolbar('sidebar-pane-section-toolbar new-rule-toolbar', this.element);
       }
       this.newStyleRuleToolbar.appendToolbarItem(newRuleButton);
-      UI.ARIAUtils.markAsHidden(this.newStyleRuleToolbar.element);
+      UI.ARIAUtils.setHidden(this.newStyleRuleToolbar.element, true);
     }
 
     if (Root.Runtime.experiments.isEnabled('font-editor') && this.editable) {

package/front_end/panels/elements/StylePropertyHighlighter.test.ts

@@ -17,7 +17,8 @@ describeWithMockConnection('StylePropertyHighlighter', () => {
   }> {
     const target = createTarget();
     UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, sinon.createStubInstance(SDK.DOMModel.DOMNode));
-    const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    const computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+    const stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
       cssModel: target.model(SDK.CSSModel.CSSModel)!,
       node: stylesSidebarPane.node() as SDK.DOMModel.DOMNode,

package/front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -9,7 +9,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -21,13 +21,15 @@ import * as Elements from './elements.js';
 
 describeWithMockConnection('StylePropertyTreeElement', () => {
   let stylesSidebarPane: Elements.StylesSidebarPane.StylesSidebarPane;
+  let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
   let mockStylePropertiesSection: sinon.SinonStubbedInstance<Elements.StylePropertiesSection.StylePropertiesSection>;
   let mockCssStyleDeclaration: sinon.SinonStubbedInstance<SDK.CSSStyleDeclaration.CSSStyleDeclaration>;
   let mockMatchedStyles: sinon.SinonStubbedInstance<SDK.CSSMatchedStyles.CSSMatchedStyles>;
   let mockVariableMap: Record<string, string>;
 
   beforeEach(async () => {
-    stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    computedStyleModel = new Elements.ComputedStyleModel.ComputedStyleModel();
+    stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane(computedStyleModel);
     mockVariableMap = {
       '--a': 'red',
       '--b': 'blue',
@@ -97,7 +99,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
            assert.exists(childValueElement);
            assert.notExists(childValueElement.querySelector(swatchSelector));
          };
-         assertNullSwatchOnChildAt(0, '[is="bezier-swatch"]');
+         assertNullSwatchOnChildAt(0, 'devtools-bezier-swatch');
          assertNullSwatchOnChildAt(1, '[is="css-shadow-swatch"]');
          assertNullSwatchOnChildAt(2, '[is="css-shadow-swatch"]');
          assertNullSwatchOnChildAt(3, 'devtools-css-length');
@@ -245,8 +247,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.strictEqual(outerColorMix.getText(), 'color-mix(in srgb, color-mix(in oklch, red, green), blue)');
         assert.strictEqual(innerColorMix.getText(), 'color-mix(in oklch, red, green)');
         innerColorMix.setFirstColor('blue');
-        assert.deepStrictEqual(
-            handler.args[0][0].data, {text: 'color-mix(in srgb, color-mix(in oklch, blue, green), blue)'});
+        assert.deepEqual(handler.args[0][0].data, {text: 'color-mix(in srgb, color-mix(in oklch, blue, green), blue)'});
         assert.strictEqual(outerColorMix.getText(), 'color-mix(in srgb, color-mix(in oklch, blue, green), blue)');
 
         // setFirstColor does not actually update the rendered color swatches or the textContent, which is why the first
@@ -257,7 +258,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.isOk(newColor);
         colorSwatch.setColor(newColor);
         assert.strictEqual(outerColorMix.getText(), 'color-mix(in srgb, color-mix(in oklch, #ff0000, green), blue)');
-        assert.deepStrictEqual(
+        assert.deepEqual(
             handler.args[1][0].data, {text: 'color-mix(in srgb, color-mix(in oklch, #ff0000, green), blue)'});
       });
     });
@@ -511,7 +512,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         declaration: new SDK.CSSMatchedStyles.CSSValueSource(sinon.createStubInstance(SDK.CSSProperty.CSSProperty)),
       });
       const popoverContents = addElementPopoverHook.args[0][1].contents();
-      assert.isTrue(popoverContents instanceof ElementsComponents.CSSVariableValueView.CSSVariableValueView);
+      assert.instanceOf(popoverContents, ElementsComponents.CSSVariableValueView.CSSVariableValueView);
       const {details} = popoverContents as ElementsComponents.CSSVariableValueView.CSSVariableValueView;
       assert.exists(details);
 
@@ -779,17 +780,17 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         return res;
       }
 
-      assert.deepStrictEqual(
+      assert.deepEqual(
           await matchProperty('var( --blue    )'), {hasUnresolvedVars: false, computedText: 'color: blue'});
-      assert.deepStrictEqual(
+      assert.deepEqual(
           await matchProperty('var(--no, var(--blue))'), {hasUnresolvedVars: false, computedText: 'color: blue'});
-      assert.deepStrictEqual(
+      assert.deepEqual(
           await matchProperty('pre var(--no) post'),
           {hasUnresolvedVars: true, computedText: 'color: pre var(--no) post'});
-      assert.deepStrictEqual(
+      assert.deepEqual(
           await matchProperty('var(--no, var(--no2))'),
           {hasUnresolvedVars: true, computedText: 'color: var(--no, var(--no2))'});
-      assert.deepStrictEqual(await matchProperty(''), {hasUnresolvedVars: false, computedText: 'color:'});
+      assert.deepEqual(await matchProperty(''), {hasUnresolvedVars: false, computedText: 'color:'});
     });
 
     it('layers correctly with the font renderer', () => {
@@ -988,7 +989,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 2);
+      assert.lengthOf(swatches, 2);
       assert.strictEqual(swatches[0].textContent, 'inset 10px 11px blue');
       assert.strictEqual(swatches[1].textContent, '6px 5px red');
     });
@@ -999,7 +1000,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 1);
+      assert.lengthOf(swatches, 1);
       assert.strictEqual(swatches[0].textContent, '6px 5px red');
     });
 
@@ -1020,7 +1021,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 2);
+      assert.lengthOf(swatches, 2);
       assert.strictEqual(swatches[0].textContent, 'var(--offset) red');
       assert.strictEqual(swatches[1].textContent, 'var(--shadow)');
     });
@@ -1033,7 +1034,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 2);
+      assert.lengthOf(swatches, 2);
 
       const showPopoverStub = sinon.stub(stylePropertyTreeElement.parentPane().swatchPopoverHelper(), 'show');
 
@@ -1052,7 +1053,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.instanceOf(showPopoverStub.args[0][0], InlineEditor.CSSShadowEditor.CSSShadowEditor);
         const editor = showPopoverStub.args[0][0] as InlineEditor.CSSShadowEditor.CSSShadowEditor;
         const text = editorProperties(editor);
-        assert.deepStrictEqual(text, ['Outset', '10px', '10px', '0', '0']);
+        assert.deepEqual(text, ['Outset', '10px', '10px', '0', '0']);
       }
 
       {
@@ -1061,7 +1062,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         assert.instanceOf(showPopoverStub.args[1][0], InlineEditor.CSSShadowEditor.CSSShadowEditor);
         const editor = showPopoverStub.args[1][0] as InlineEditor.CSSShadowEditor.CSSShadowEditor;
         const text = editorProperties(editor);
-        assert.deepStrictEqual(text, ['Inset', '8px', '9px', '10px', '11px']);
+        assert.deepEqual(text, ['Inset', '8px', '9px', '10px', '11px']);
       }
     });
 
@@ -1070,7 +1071,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 1);
+      assert.lengthOf(swatches, 1);
       const showPopoverStub = sinon.stub(stylePropertyTreeElement.parentPane().swatchPopoverHelper(), 'show');
       swatches[0].iconElement().click();
       assert.isTrue(showPopoverStub.calledOnce);
@@ -1089,7 +1090,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       const swatches = stylePropertyTreeElement.valueElement?.querySelectorAll('css-shadow-swatch');
       assert.exists(swatches);
-      assert.strictEqual(swatches.length, 1);
+      assert.lengthOf(swatches, 1);
       const showPopoverStub = sinon.stub(stylePropertyTreeElement.parentPane().swatchPopoverHelper(), 'show');
       swatches[0].iconElement().click();
       assert.isTrue(showPopoverStub.calledOnce);
@@ -1254,7 +1255,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       model.setBlurRadius(new InlineEditor.CSSShadowEditor.CSSLength(12, 'px'));
       model.renderContents(container);
       assert.strictEqual(container.textContent, '10px y 12px spread');
-      assert.deepStrictEqual(properties.map(p => p.source), [null, null, null, null]);
+      assert.deepEqual(properties.map(p => p.source), [null, null, null, null]);
     });
   });
 
@@ -1658,6 +1659,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
   describe('Autocompletion', function(this: Mocha.Suite) {
     let promptStub: sinon.SinonStub<Parameters<Elements.StylesSidebarPane.CSSPropertyPrompt['initialize']>>;
     beforeEach(async () => {
+      stubNoopSettings();
       promptStub = sinon.stub(Elements.StylesSidebarPane.CSSPropertyPrompt.prototype, 'initialize').resolves([]);
       setMockConnectionResponseHandler('CSS.enable', () => ({}));
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1186,6 +1186,7 @@ export class LengthRenderer implements MatchRenderer<LengthMatch> {
 
     const onDraggingFinished = (): void => {
       this.#treeElement.parentPane().setEditingStyle(false);
+      void this.#treeElement.applyStyleText(this.#treeElement.renderedPropertyText(), true);
     };
 
     cssLength.addEventListener('valuechanged', onValueChanged);
@@ -2189,7 +2190,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     this.originalPropertyText = this.property.propertyText || '';
 
-    this.parentPaneInternal.setEditingStyle(true, this);
+    this.parentPaneInternal.setEditingStyle(true);
     selectedElement.parentElement?.scrollIntoViewIfNeeded(false);
 
     this.prompt = new CSSPropertyPrompt(this, context.isEditingName, Array.from(this.#gridNames ?? []));
@@ -2586,7 +2587,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   private async innerApplyStyleText(
       styleText: string, majorChange: boolean, property?: SDK.CSSProperty.CSSProperty|null): Promise<void> {
-    // this.property might have been nulled at the end of the last innerApplyStyleText
+    // this.property might have been nulled at the end of the last innerApplyStyleText.
     if (!this.treeOutline || !this.property) {
       return;
     }

package/front_end/panels/elements/StylesSidebarPane.test.ts

@@ -49,7 +49,8 @@ describe('StylesSidebarPane', () => {
 
     describe('rebuildSectionsForMatchedStyleRulesForTest', () => {
       it('should add @position-try section', async () => {
-        const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+        const stylesSidebarPane =
+            new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel());
         const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
           cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
           node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
@@ -79,15 +80,16 @@ describe('StylesSidebarPane', () => {
         const sectionBlocks =
             await stylesSidebarPane.rebuildSectionsForMatchedStyleRulesForTest(matchedStyles, new Map(), new Map());
 
-        assert.strictEqual(sectionBlocks.length, 2);
+        assert.lengthOf(sectionBlocks, 2);
         assert.strictEqual(sectionBlocks[1].titleElement()?.textContent, '@position-try --try-one');
-        assert.strictEqual(sectionBlocks[1].sections.length, 1);
+        assert.lengthOf(sectionBlocks[1].sections, 1);
         assert.instanceOf(sectionBlocks[1].sections[0], Elements.StylePropertiesSection.PositionTryRuleSection);
       });
     });
 
     it('should add @font-palette-values section to the end', async () => {
-      const stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+      const stylesSidebarPane =
+          new Elements.StylesSidebarPane.StylesSidebarPane(new Elements.ComputedStyleModel.ComputedStyleModel());
       const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
         cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
         node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
@@ -117,9 +119,9 @@ describe('StylesSidebarPane', () => {
       const sectionBlocks =
           await stylesSidebarPane.rebuildSectionsForMatchedStyleRulesForTest(matchedStyles, new Map(), new Map());
 
-      assert.strictEqual(sectionBlocks.length, 2);
+      assert.lengthOf(sectionBlocks, 2);
       assert.strictEqual(sectionBlocks[1].titleElement()?.textContent, '@font-palette-values --palette');
-      assert.strictEqual(sectionBlocks[1].sections.length, 1);
+      assert.lengthOf(sectionBlocks[1].sections, 1);
       assert.instanceOf(sectionBlocks[1].sections[0], Elements.StylePropertiesSection.FontPaletteValuesRuleSection);
     });
   });