[module.json extensions] @UI.ToolbarItem.Provider Part 2
Bug: 1134103
Change-Id: I1674bd9bcc12f19aa51405d9fd8ef6a9c7965331
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2684120
Commit-Queue: Andres Olivares <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js
index bb23a5a..559a916 100644
--- a/front_end/elements/ClassesPaneWidget.js
+++ b/front_end/elements/ClassesPaneWidget.js
@@ -265,10 +265,14 @@
/** @type {!WeakMap<!SDK.DOMModel.DOMNode, !Map<string, boolean>>} */
const cachedClassesMap = new WeakMap();
+/** @type {!ButtonProvider} */
+let buttonProviderInstance;
+
/**
* @implements {UI.Toolbar.Provider}
*/
export class ButtonProvider {
+ /** @private */
constructor() {
this._button = new UI.Toolbar.ToolbarToggle(Common.UIString.UIString('Element Classes'), '');
this._button.setText('.cls');
@@ -277,6 +281,18 @@
this._view = new ClassesPaneWidget();
}
+ /**
+ * @param {{forceNew: ?boolean}} opts
+ */
+ static instance(opts = {forceNew: null}) {
+ const {forceNew} = opts;
+ if (!buttonProviderInstance || forceNew) {
+ buttonProviderInstance = new ButtonProvider();
+ }
+
+ return buttonProviderInstance;
+ }
+
_clicked() {
ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button);
}
diff --git a/front_end/elements/ElementStatePaneWidget.js b/front_end/elements/ElementStatePaneWidget.js
index a6c2b12..3f858e0 100644
--- a/front_end/elements/ElementStatePaneWidget.js
+++ b/front_end/elements/ElementStatePaneWidget.js
@@ -125,10 +125,14 @@
}
}
+/** @type {!ButtonProvider} */
+let buttonProviderInstance;
+
/**
* @implements {UI.Toolbar.Provider}
*/
export class ButtonProvider {
+ /** @private */
constructor() {
this._button = new UI.Toolbar.ToolbarToggle(Common.UIString.UIString('Toggle Element State'), '');
this._button.setText(Common.UIString.UIString(':hov'));
@@ -137,6 +141,18 @@
this._view = new ElementStatePaneWidget();
}
+ /**
+ * @param {{forceNew: ?boolean}} opts
+ */
+ static instance(opts = {forceNew: null}) {
+ const {forceNew} = opts;
+ if (!buttonProviderInstance || forceNew) {
+ buttonProviderInstance = new ButtonProvider();
+ }
+
+ return buttonProviderInstance;
+ }
+
_clicked() {
ElementsPanel.instance().showToolbarPane(!this._view.isShowing() ? this._view : null, this._button);
}
diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
index 5adf097..4ebf4c6 100644
--- a/front_end/elements/StylesSidebarPane.js
+++ b/front_end/elements/StylesSidebarPane.js
@@ -3231,10 +3231,14 @@
}
}
+/** @type {!ButtonProvider} */
+let buttonProviderInstance;
+
/**
* @implements {UI.Toolbar.Provider}
*/
export class ButtonProvider {
+ /** @private */
constructor() {
this._button = new UI.Toolbar.ToolbarButton(Common.UIString.UIString('New Style Rule'), 'largeicon-add');
this._button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._clicked, this);
@@ -3256,6 +3260,18 @@
}
/**
+ * @param {{forceNew: ?boolean}} opts
+ */
+ static instance(opts = {forceNew: null}) {
+ const {forceNew} = opts;
+ if (!buttonProviderInstance || forceNew) {
+ buttonProviderInstance = new ButtonProvider();
+ }
+
+ return buttonProviderInstance;
+ }
+
+ /**
* @param {!Common.EventTarget.EventTargetEvent} event
*/
_clicked(event) {
diff --git a/front_end/elements/elements-meta.ts b/front_end/elements/elements-meta.ts
index a181531..bf08061 100644
--- a/front_end/elements/elements-meta.ts
+++ b/front_end/elements/elements-meta.ts
@@ -352,3 +352,52 @@
return Elements.ElementsPanel.CSSPropertyRevealer.instance();
},
});
+
+UI.Toolbar.registerToolbarItem({
+ async loadItem() {
+ const Elements = await loadElementsModule();
+ return Elements.ElementStatePaneWidget.ButtonProvider.instance();
+ },
+ order: 1,
+ location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
+ showLabel: undefined,
+ condition: undefined,
+ separator: undefined,
+ actionId: undefined,
+});
+
+UI.Toolbar.registerToolbarItem({
+ async loadItem() {
+ const Elements = await loadElementsModule();
+ return Elements.ClassesPaneWidget.ButtonProvider.instance();
+ },
+ order: 2,
+ location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
+ showLabel: undefined,
+ condition: undefined,
+ separator: undefined,
+ actionId: undefined,
+});
+
+UI.Toolbar.registerToolbarItem({
+ async loadItem() {
+ const Elements = await loadElementsModule();
+ return Elements.StylesSidebarPane.ButtonProvider.instance();
+ },
+ order: 100,
+ location: UI.Toolbar.ToolbarItemLocation.STYLES_SIDEBARPANE_TOOLBAR,
+ showLabel: undefined,
+ condition: undefined,
+ separator: undefined,
+ actionId: undefined,
+});
+
+UI.Toolbar.registerToolbarItem({
+ actionId: 'elements.toggle-element-search',
+ location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,
+ order: 0,
+ showLabel: undefined,
+ condition: undefined,
+ separator: undefined,
+ loadItem: undefined,
+});
diff --git a/front_end/elements/module.json b/front_end/elements/module.json
index 3e83cd8..6ddedf1 100644
--- a/front_end/elements/module.json
+++ b/front_end/elements/module.json
@@ -17,24 +17,6 @@
"className": "Elements.DOMLinkifier.Linkifier"
},
{
- "type": "@UI.ToolbarItem.Provider",
- "className": "Elements.ElementStatePaneWidget.ButtonProvider",
- "order": 1,
- "location": "styles-sidebarpane-toolbar"
- },
- {
- "type": "@UI.ToolbarItem.Provider",
- "className": "Elements.ClassesPaneWidget.ButtonProvider",
- "order": 2,
- "location": "styles-sidebarpane-toolbar"
- },
- {
- "type": "@UI.ToolbarItem.Provider",
- "className": "Elements.StylesSidebarPane.ButtonProvider",
- "order": 100,
- "location": "styles-sidebarpane-toolbar"
- },
- {
"type": "@Elements.MarkerDecorator",
"className": "Elements.ElementsPanel.PseudoStateMarkerDecorator",
"marker": "pseudo-state-marker"
@@ -45,12 +27,6 @@
"marker": "hidden-marker",
"title": "Element is hidden",
"color": "#555"
- },
- {
- "type": "@UI.ToolbarItem.Provider",
- "actionId": "elements.toggle-element-search",
- "location": "main-toolbar-left",
- "order": 0
}
],
"dependencies": [
