Show list of grid elements in Layout pane
This CL adds a list of grid elements to the Layout pane and
synchronises the overlay state with adorners. The ability to navigate
to an element or configure the colors will be done in follow-up CLs.
Screenshot: https://i.imgur.com/y8bsLzk.png
Bug: 1109177
Change-Id: I7700a37e1e8b03b48e3e4394f3e6c95a41d543f0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352712
Reviewed-by: Patrick Brosset <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
diff --git a/front_end/elements/LayoutSidebarPane.js b/front_end/elements/LayoutSidebarPane.js
index 294cf39..e86ac7d 100644
--- a/front_end/elements/LayoutSidebarPane.js
+++ b/front_end/elements/LayoutSidebarPane.js
@@ -9,7 +9,21 @@
import * as SDK from '../sdk/sdk.js';
import * as UI from '../ui/ui.js';
-import {createLayoutPane} from './LayoutPane_bridge.js';
+import {createLayoutPane, Element} from './LayoutPane_bridge.js'; // eslint-disable-line no-unused-vars
+
+/**
+ * @param {!Array<!SDK.DOMModel.DOMNode>} nodes
+ * @return {!Array<!Element>}
+ */
+const gridNodesToElements = nodes => {
+ return nodes.map(node => ({
+ id: node.id,
+ name: node.localName(),
+ domId: node.getAttribute('id'),
+ domClasses: (node.getAttribute('class') || '').split(/\s+/),
+ enabled: node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(node.id)
+ }));
+};
/**
* @unrestricted
@@ -22,12 +36,39 @@
this._settings = [
'showGridBorder', 'showGridLines', 'showGridLineNumbers', 'showGridGaps', 'showGridAreas', 'showGridTrackSizes'
];
- this._layoutPane.addEventListener('setting-changed', event => {
- Common.Settings.Settings.instance().moduleSetting(event.data.setting).set(event.data.value);
- });
- this._settings.forEach(setting => {
- Common.Settings.Settings.instance().moduleSetting(setting).addChangeListener(this.update, this);
- });
+ this._node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+ this._boundOnSettingChanged = this.onSettingChanged.bind(this);
+ this._boundOnOverlayChanged = this.onOverlayChanged.bind(this);
+ }
+
+ async _fetchGridNodes() {
+ const nodeIds = await this._node.domModel().getNodesByStyle(
+ [{name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}], true /* pierce */);
+ const nodes = nodeIds.map(id => this._node.domModel().nodeForId(id)).filter(node => node !== null);
+ return nodes;
+ }
+
+ _mapSettings() {
+ return this._settings
+ .map(settingName => {
+ const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
+ const ext = setting.extension();
+ if (!ext) {
+ return null;
+ }
+ const descriptor = ext.descriptor();
+ return {
+ type: descriptor.settingType,
+ name: descriptor.settingName,
+ title: descriptor.title,
+ value: setting.get(),
+ options: descriptor.options.map(opt => ({
+ title: opt.text,
+ value: opt.value,
+ }))
+ };
+ })
+ .filter(descriptor => descriptor !== null);
}
/**
@@ -37,34 +78,42 @@
*/
async doUpdate() {
this._layoutPane.data = {
- settings: this._settings
- .map(settingName => {
- const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
- const ext = setting.extension();
- if (!ext) {
- return null;
- }
- const descriptor = ext.descriptor();
- return {
- type: descriptor.settingType,
- name: descriptor.settingName,
- title: descriptor.title,
- value: setting.get(),
- options: descriptor.options.map(opt => ({
- title: opt.text,
- value: opt.value,
- }))
- };
- })
- .filter(descriptor => descriptor !== null)
+ gridElements: gridNodesToElements(await this._fetchGridNodes()),
+ settings: this._mapSettings(),
};
}
/**
+ * @param {*} event
+ */
+ onSettingChanged(event) {
+ Common.Settings.Settings.instance().moduleSetting(event.data.setting).set(event.data.value);
+ }
+
+ /**
+ * @param {*} event
+ */
+ onOverlayChanged(event) {
+ const node = this._node.domModel().nodeForId(event.data.id);
+ if (event.data.value) {
+ node.domModel().overlayModel().highlightGridInPersistentOverlay(event.data.id);
+ } else {
+ node.domModel().overlayModel().hideGridInPersistentOverlay(event.data.id);
+ }
+ }
+
+ /**
* @override
*/
wasShown() {
- self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+ for (const setting of this._settings) {
+ Common.Settings.Settings.instance().moduleSetting(setting).addChangeListener(this.update, this);
+ }
+ this._layoutPane.addEventListener('setting-changed', this._boundOnSettingChanged);
+ this._layoutPane.addEventListener('overlay-changed', this._boundOnOverlayChanged);
+ const overlayModel = this._node.domModel().overlayModel();
+ overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
+ overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
this.update();
}
@@ -72,9 +121,13 @@
* @override
*/
willHide() {
- self.UI.context.removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
- this._settings.forEach(setting => {
- Common.Settings.Settings.instance().moduleSetting(setting).removeChangeListener(this.update.bind, this);
- });
+ for (const setting of this._settings) {
+ Common.Settings.Settings.instance().moduleSetting(setting).removeChangeListener(this.update, this);
+ }
+ this._layoutPane.removeEventListener('setting-changed', this._boundOnSettingChanged);
+ this._layoutPane.removeEventListener('overlay-changed', this._boundOnOverlayChanged);
+ const overlayModel = this._node.domModel().overlayModel();
+ overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
+ overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
}
}
