blob: f48acbe9ecf3a5fd94e81b3115c660c9a4a36cd3 [file] [log] [blame]
Alex Rudenkoa39d2142020-08-11 05:09:401// Copyright (c) 2020 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5// @ts-nocheck
6// TODO(crbug.com/1011811): Enable TypeScript compiler checks
7
8import * as Common from '../common/common.js';
Changhao Han03c48382020-09-14 21:17:509import * as Host from '../host/host.js';
Alex Rudenkoa39d2142020-08-11 05:09:4010import * as SDK from '../sdk/sdk.js';
11import * as UI from '../ui/ui.js';
12
Alex Rudenko21a9ca32020-08-18 06:11:3713import {ElementsPanel} from './ElementsPanel.js';
Jack Franklinfb0426e2020-08-18 11:09:5214import {createLayoutPane, LayoutElement} from './LayoutPane_bridge.js'; // eslint-disable-line no-unused-vars
Alex Rudenko034db882020-08-13 12:21:0915
16/**
17 * @param {!Array<!SDK.DOMModel.DOMNode>} nodes
Jack Franklinfb0426e2020-08-18 11:09:5218 * @return {!Array<!LayoutElement>}
Alex Rudenko034db882020-08-13 12:21:0919 */
20const gridNodesToElements = nodes => {
Patrick Brossetbf746e62020-08-14 08:43:1421 return nodes.map(node => {
22 const className = node.getAttribute('class');
23 return {
24 id: node.id,
Patrick Brosset1824faf2020-09-03 09:10:4925 color: node.domModel().overlayModel().colorOfGridInPersistentOverlay(node.id),
Patrick Brossetbf746e62020-08-14 08:43:1426 name: node.localName(),
27 domId: node.getAttribute('id'),
Patrick Brossetaf165fe2020-08-28 12:10:3928 domClasses: className ? className.split(/\s+/).filter(s => !!s) : null,
Alex Rudenko7529de92020-08-20 09:47:0529 enabled: node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(node.id),
30 reveal: () => {
31 ElementsPanel.instance().revealAndSelectNode(node, true, true);
Patrick Brosset50e1d662020-09-14 12:41:4432 node.scrollIntoView();
Alex Rudenko7529de92020-08-20 09:47:0533 },
Alex Rudenko994d0192020-09-17 14:19:1834 highlight: () => {
35 node.highlight();
36 },
37 hideHighlight: () => {
38 SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
39 },
Alex Rudenko7529de92020-08-20 09:47:0540 toggle: value => {
41 if (value) {
Changhao Han03c48382020-09-14 21:17:5042 node.domModel().overlayModel().highlightGridInPersistentOverlay(
43 node.id, Host.UserMetrics.GridOverlayOpener.LayoutPane);
Alex Rudenko7529de92020-08-20 09:47:0544 } else {
45 node.domModel().overlayModel().hideGridInPersistentOverlay(node.id);
46 }
Alex Rudenkobc83da92020-09-15 08:46:5347 },
48 setColor(value) {
49 this.color = value;
50 node.domModel().overlayModel().setColorOfGridInPersistentOverlay(node.id, value);
51 },
Patrick Brossetbf746e62020-08-14 08:43:1452 };
53 });
Alex Rudenko034db882020-08-13 12:21:0954};
Alex Rudenkoa39d2142020-08-11 05:09:4055
56/**
57 * @unrestricted
58 */
59export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
60 constructor() {
61 super(true /* isWebComponent */);
62 this._layoutPane = createLayoutPane();
63 this.contentElement.appendChild(this._layoutPane);
Alex Rudenkob7799802020-08-26 10:18:5464 this._settings = ['showGridLineLabels', 'showGridTrackSizes', 'showGridAreas', 'extendGridLines'];
Patrick Brossetf398c102020-10-14 07:35:0865 this._uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM');
Alex Rudenko034db882020-08-13 12:21:0966 this._boundOnSettingChanged = this.onSettingChanged.bind(this);
Alex Rudenko7529de92020-08-20 09:47:0567 this._domModels = [];
Alex Rudenko0e97afa2020-08-14 09:51:1168 }
69
Alex Rudenko7529de92020-08-20 09:47:0570 /**
71 * @param {!SDK.DOMModel.DOMModel} domModel
72 */
73 modelAdded(domModel) {
74 const overlayModel = domModel.overlayModel();
75 overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
76 overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
77 this._domModels.push(domModel);
78 }
79
80 /**
81 * @param {!SDK.DOMModel.DOMModel} domModel
82 */
83 modelRemoved(domModel) {
84 const overlayModel = domModel.overlayModel();
85 overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
86 overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
87 this._domModels = this._domModels.filter(model => model !== domModel);
Alex Rudenko034db882020-08-13 12:21:0988 }
89
90 async _fetchGridNodes() {
Patrick Brossetf398c102020-10-14 07:35:0891 const showUAShadowDOM = this._uaShadowDOMSetting.get();
92
Alex Rudenko7529de92020-08-20 09:47:0593 const nodes = [];
94 for (const domModel of this._domModels) {
95 const nodeIds = await domModel.getNodesByStyle(
96 [{name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}], true /* pierce */);
97
Patrick Brossetf398c102020-10-14 07:35:0898 nodes.push(...nodeIds.map(id => domModel.nodeForId(id)).filter(node => {
99 return node && (showUAShadowDOM || !node.ancestorUserAgentShadowRoot());
100 }));
Alex Rudenko7529de92020-08-20 09:47:05101 }
Patrick Brossetf398c102020-10-14 07:35:08102
Alex Rudenko034db882020-08-13 12:21:09103 return nodes;
104 }
105
106 _mapSettings() {
107 return this._settings
108 .map(settingName => {
109 const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
110 const ext = setting.extension();
111 if (!ext) {
112 return null;
113 }
114 const descriptor = ext.descriptor();
115 return {
116 type: descriptor.settingType,
117 name: descriptor.settingName,
Christy Chenc23abb12020-09-22 19:44:08118 title: ls(descriptor.title),
Alex Rudenko034db882020-08-13 12:21:09119 value: setting.get(),
120 options: descriptor.options.map(opt => ({
Christy Chenc23abb12020-09-22 19:44:08121 title: ls(opt.title),
Alex Rudenko034db882020-08-13 12:21:09122 value: opt.value,
123 }))
124 };
125 })
126 .filter(descriptor => descriptor !== null);
Alex Rudenkoa39d2142020-08-11 05:09:40127 }
128
129 /**
130 * @override
131 * @protected
132 * @return {!Promise<void>}
133 */
134 async doUpdate() {
135 this._layoutPane.data = {
Alex Rudenko034db882020-08-13 12:21:09136 gridElements: gridNodesToElements(await this._fetchGridNodes()),
137 settings: this._mapSettings(),
Alex Rudenkoa39d2142020-08-11 05:09:40138 };
139 }
140
141 /**
Alex Rudenko034db882020-08-13 12:21:09142 * @param {*} event
143 */
144 onSettingChanged(event) {
145 Common.Settings.Settings.instance().moduleSetting(event.data.setting).set(event.data.value);
146 }
147
148 /**
Alex Rudenkoa39d2142020-08-11 05:09:40149 * @override
150 */
151 wasShown() {
Alex Rudenko034db882020-08-13 12:21:09152 for (const setting of this._settings) {
153 Common.Settings.Settings.instance().moduleSetting(setting).addChangeListener(this.update, this);
154 }
155 this._layoutPane.addEventListener('setting-changed', this._boundOnSettingChanged);
Alex Rudenko7529de92020-08-20 09:47:05156 for (const domModel of this._domModels) {
157 this.modelRemoved(domModel);
158 }
159 this._domModels = [];
160 SDK.SDKModel.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this);
Tim van der Lipped1a00aa2020-08-19 16:03:56161 UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
Patrick Brossetf398c102020-10-14 07:35:08162 this._uaShadowDOMSetting.addChangeListener(this.update, this);
Alex Rudenkoa39d2142020-08-11 05:09:40163 this.update();
164 }
165
166 /**
167 * @override
168 */
169 willHide() {
Alex Rudenko034db882020-08-13 12:21:09170 for (const setting of this._settings) {
171 Common.Settings.Settings.instance().moduleSetting(setting).removeChangeListener(this.update, this);
172 }
173 this._layoutPane.removeEventListener('setting-changed', this._boundOnSettingChanged);
Alex Rudenko7529de92020-08-20 09:47:05174 SDK.SDKModel.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel, this);
Tim van der Lipped1a00aa2020-08-19 16:03:56175 UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
Patrick Brossetf398c102020-10-14 07:35:08176 this._uaShadowDOMSetting.removeChangeListener(this.update, this);
Alex Rudenkoa39d2142020-08-11 05:09:40177 }
178}