[Elements] Convert StylesSidebarPane to a regular class

ElementsPanel already is a singleton and we can provide
access to the StylesSidebarPanel it rendered through it.

This way, we can control the lifecycle of the StylesSidebarPane
directly from the ElementsPanel and do not need to
have a singleton class for it.

Bug: 349566291
Change-Id: Ie1ee75677a305712d482812ad910bc38c583afd9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6069998
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: ergunsh

front_end/panels/elements/ElementsPanel.ts

@@ -279,7 +279,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    this.stylesWidget = StylesSidebarPane.instance();
+    this.stylesWidget = new StylesSidebarPane();
     this.computedStyleWidget = new ComputedStyleWidget();
     this.metricsWidget = new MetricsSidebarPane();
 

front_end/panels/elements/StylePropertiesSection.test.ts

@@ -161,7 +161,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();
     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 +214,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();
     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 +274,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();
     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 +302,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();
     const origin = Protocol.CSS.StyleSheetOrigin.Regular;
     const styleSheetId = '0' as Protocol.CSS.StyleSheetId;
     const range = {startLine: 0, startColumn: 0, endLine: 0, endColumn: 6};

front_end/panels/elements/StylePropertyHighlighter.test.ts

@@ -17,7 +17,7 @@ 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 stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
     const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
       cssModel: target.model(SDK.CSSModel.CSSModel)!,
       node: stylesSidebarPane.node() as SDK.DOMModel.DOMNode,

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -27,7 +27,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
   let mockVariableMap: Record<string, string>;
 
   beforeEach(async () => {
-    stylesSidebarPane = Elements.StylesSidebarPane.StylesSidebarPane.instance({forceNew: true});
+    stylesSidebarPane = new Elements.StylesSidebarPane.StylesSidebarPane();
     mockVariableMap = {
       '--a': 'red',
       '--b': 'blue',

front_end/panels/elements/StylesSidebarPane.test.ts

@@ -49,7 +49,7 @@ 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();
         const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
           cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
           node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
@@ -87,7 +87,7 @@ describe('StylesSidebarPane', () => {
     });
 
     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();
       const matchedStyles = await SDK.CSSMatchedStyles.CSSMatchedStyles.create({
         cssModel: stylesSidebarPane.cssModel() as SDK.CSSModel.CSSModel,
         node: sinon.createStubInstance(SDK.DOMModel.DOMNode),

front_end/panels/elements/StylesSidebarPane.ts

@@ -185,8 +185,6 @@ const HIGHLIGHTABLE_PROPERTIES = [
   {mode: 'flexibility', properties: ['flex', 'flex-basis', 'flex-grow', 'flex-shrink']},
 ];
 
-let stylesSidebarPaneInstance: StylesSidebarPane;
-
 export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof ElementsSidebarPane>(
     ElementsSidebarPane) {
   private currentToolbarPane: UI.Widget.Widget|null;
@@ -230,13 +228,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
-  static instance(opts?: {forceNew: boolean}): StylesSidebarPane {
-    if (!stylesSidebarPaneInstance || opts?.forceNew) {
-      stylesSidebarPaneInstance = new StylesSidebarPane();
-    }
-    return stylesSidebarPaneInstance;
-  }
-
   constructor() {
     super(true /* delegatesFocus */);
     this.setMinimumSize(96, 26);
@@ -281,7 +272,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.sectionBlocks = [];
     this.idleCallbackManager = null;
     this.needsForceUpdate = false;
-    stylesSidebarPaneInstance = this;
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
     this.resizeThrottler = new Common.Throttler.Throttler(100);
@@ -2199,7 +2189,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     switch (actionId) {
       case 'elements.new-style-rule': {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NewStyleRuleAdded);
-        void StylesSidebarPane.instance().createNewRuleInViaInspectorStyleSheet();
+        void ElementsPanel.instance().stylesWidget.createNewRuleInViaInspectorStyleSheet();
         return true;
       }
     }
@@ -2208,7 +2198,6 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 }
 
 let buttonProviderInstance: ButtonProvider;
-
 export class ButtonProvider implements UI.Toolbar.Provider {
   private readonly button: UI.Toolbar.ToolbarButton;
   private constructor() {
@@ -2238,7 +2227,7 @@ export class ButtonProvider implements UI.Toolbar.Provider {
   }
 
   private longClicked(event: Event): void {
-    StylesSidebarPane.instance().onAddButtonLongClick(event);
+    ElementsPanel.instance().stylesWidget.onAddButtonLongClick(event);
   }
 
   item(): UI.Toolbar.ToolbarItem {