Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 1 | // 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 | |
| 8 | import * as Common from '../common/common.js'; |
Changhao Han | 03c4838 | 2020-09-14 21:17:50 | [diff] [blame] | 9 | import * as Host from '../host/host.js'; |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 10 | import * as SDK from '../sdk/sdk.js'; |
| 11 | import * as UI from '../ui/ui.js'; |
| 12 | |
Alex Rudenko | 21a9ca3 | 2020-08-18 06:11:37 | [diff] [blame] | 13 | import {ElementsPanel} from './ElementsPanel.js'; |
Jack Franklin | fb0426e | 2020-08-18 11:09:52 | [diff] [blame] | 14 | import {createLayoutPane, LayoutElement} from './LayoutPane_bridge.js'; // eslint-disable-line no-unused-vars |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 15 | |
| 16 | /** |
| 17 | * @param {!Array<!SDK.DOMModel.DOMNode>} nodes |
Jack Franklin | fb0426e | 2020-08-18 11:09:52 | [diff] [blame] | 18 | * @return {!Array<!LayoutElement>} |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 19 | */ |
| 20 | const gridNodesToElements = nodes => { |
Patrick Brosset | bf746e6 | 2020-08-14 08:43:14 | [diff] [blame] | 21 | return nodes.map(node => { |
| 22 | const className = node.getAttribute('class'); |
| 23 | return { |
| 24 | id: node.id, |
Patrick Brosset | 1824faf | 2020-09-03 09:10:49 | [diff] [blame] | 25 | color: node.domModel().overlayModel().colorOfGridInPersistentOverlay(node.id), |
Patrick Brosset | bf746e6 | 2020-08-14 08:43:14 | [diff] [blame] | 26 | name: node.localName(), |
| 27 | domId: node.getAttribute('id'), |
Patrick Brosset | af165fe | 2020-08-28 12:10:39 | [diff] [blame] | 28 | domClasses: className ? className.split(/\s+/).filter(s => !!s) : null, |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 29 | enabled: node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(node.id), |
| 30 | reveal: () => { |
| 31 | ElementsPanel.instance().revealAndSelectNode(node, true, true); |
Patrick Brosset | 50e1d66 | 2020-09-14 12:41:44 | [diff] [blame] | 32 | node.scrollIntoView(); |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 33 | }, |
Alex Rudenko | 994d019 | 2020-09-17 14:19:18 | [diff] [blame] | 34 | highlight: () => { |
| 35 | node.highlight(); |
| 36 | }, |
| 37 | hideHighlight: () => { |
| 38 | SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(); |
| 39 | }, |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 40 | toggle: value => { |
| 41 | if (value) { |
Changhao Han | 03c4838 | 2020-09-14 21:17:50 | [diff] [blame] | 42 | node.domModel().overlayModel().highlightGridInPersistentOverlay( |
| 43 | node.id, Host.UserMetrics.GridOverlayOpener.LayoutPane); |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 44 | } else { |
| 45 | node.domModel().overlayModel().hideGridInPersistentOverlay(node.id); |
| 46 | } |
Alex Rudenko | bc83da9 | 2020-09-15 08:46:53 | [diff] [blame] | 47 | }, |
| 48 | setColor(value) { |
| 49 | this.color = value; |
| 50 | node.domModel().overlayModel().setColorOfGridInPersistentOverlay(node.id, value); |
| 51 | }, |
Patrick Brosset | bf746e6 | 2020-08-14 08:43:14 | [diff] [blame] | 52 | }; |
| 53 | }); |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 54 | }; |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 55 | |
| 56 | /** |
| 57 | * @unrestricted |
| 58 | */ |
| 59 | export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget { |
| 60 | constructor() { |
| 61 | super(true /* isWebComponent */); |
| 62 | this._layoutPane = createLayoutPane(); |
| 63 | this.contentElement.appendChild(this._layoutPane); |
Alex Rudenko | b779980 | 2020-08-26 10:18:54 | [diff] [blame] | 64 | this._settings = ['showGridLineLabels', 'showGridTrackSizes', 'showGridAreas', 'extendGridLines']; |
Patrick Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 65 | this._uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM'); |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 66 | this._boundOnSettingChanged = this.onSettingChanged.bind(this); |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 67 | this._domModels = []; |
Alex Rudenko | 0e97afa | 2020-08-14 09:51:11 | [diff] [blame] | 68 | } |
| 69 | |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 70 | /** |
| 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 Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 88 | } |
| 89 | |
| 90 | async _fetchGridNodes() { |
Patrick Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 91 | const showUAShadowDOM = this._uaShadowDOMSetting.get(); |
| 92 | |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 93 | 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 Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 98 | nodes.push(...nodeIds.map(id => domModel.nodeForId(id)).filter(node => { |
| 99 | return node && (showUAShadowDOM || !node.ancestorUserAgentShadowRoot()); |
| 100 | })); |
Alex Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 101 | } |
Patrick Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 102 | |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 103 | 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 Chen | c23abb1 | 2020-09-22 19:44:08 | [diff] [blame] | 118 | title: ls(descriptor.title), |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 119 | value: setting.get(), |
| 120 | options: descriptor.options.map(opt => ({ |
Christy Chen | c23abb1 | 2020-09-22 19:44:08 | [diff] [blame] | 121 | title: ls(opt.title), |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 122 | value: opt.value, |
| 123 | })) |
| 124 | }; |
| 125 | }) |
| 126 | .filter(descriptor => descriptor !== null); |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 127 | } |
| 128 | |
| 129 | /** |
| 130 | * @override |
| 131 | * @protected |
| 132 | * @return {!Promise<void>} |
| 133 | */ |
| 134 | async doUpdate() { |
| 135 | this._layoutPane.data = { |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 136 | gridElements: gridNodesToElements(await this._fetchGridNodes()), |
| 137 | settings: this._mapSettings(), |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 138 | }; |
| 139 | } |
| 140 | |
| 141 | /** |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 142 | * @param {*} event |
| 143 | */ |
| 144 | onSettingChanged(event) { |
| 145 | Common.Settings.Settings.instance().moduleSetting(event.data.setting).set(event.data.value); |
| 146 | } |
| 147 | |
| 148 | /** |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 149 | * @override |
| 150 | */ |
| 151 | wasShown() { |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 152 | 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 Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 156 | 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 Lippe | d1a00aa | 2020-08-19 16:03:56 | [diff] [blame] | 161 | UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this); |
Patrick Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 162 | this._uaShadowDOMSetting.addChangeListener(this.update, this); |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 163 | this.update(); |
| 164 | } |
| 165 | |
| 166 | /** |
| 167 | * @override |
| 168 | */ |
| 169 | willHide() { |
Alex Rudenko | 034db88 | 2020-08-13 12:21:09 | [diff] [blame] | 170 | 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 Rudenko | 7529de9 | 2020-08-20 09:47:05 | [diff] [blame] | 174 | SDK.SDKModel.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel, this); |
Tim van der Lippe | d1a00aa | 2020-08-19 16:03:56 | [diff] [blame] | 175 | UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this); |
Patrick Brosset | f398c10 | 2020-10-14 07:35:08 | [diff] [blame^] | 176 | this._uaShadowDOMSetting.removeChangeListener(this.update, this); |
Alex Rudenko | a39d214 | 2020-08-11 05:09:40 | [diff] [blame] | 177 | } |
| 178 | } |