From 13f71fb5e752fa63b166a62d51bc869587473af7 Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Fri, 29 Nov 2019 11:17:39 +0000 Subject: [PATCH] Reland "Migrate elements/ to ESM" This reverts commit 9fd15ddbd03f3f5d6fb97ff65d44c4f7ae9be6cb. Reason for revert: Fixed browser tests loading behavior Original change's description: > Revert "Migrate elements/ to ESM" > > This reverts commit 8fefb2ca13559d41eeaa21786ff47445b8a10a55. > > Reason for revert: broke browsertest https://ci.chromium.org/p/chromium/builders/try/linux-rel/250464 and blocking roll. > > Original change's description: > > Migrate elements/ to ESM > > > > Bug: 1006759 > > Change-Id: Ie9144a22562eb3ae3341a285f5ad16f3d630896c > > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1934212 > > Reviewed-by: Paul Lewis > > Commit-Queue: Paul Lewis > > Commit-Queue: Tim van der Lippe > > TBR=aerotwist@chromium.org,tvanderlippe@chromium.org > > # Not skipping CQ checks because original CL landed > 1 day ago. > > Bug: 1006759 > Change-Id: I16a1fd9851391a6080c5376ca35866402b0bc445 > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1937027 > Reviewed-by: Yang Guo > Commit-Queue: Yang Guo Change-Id: Iba84f5230f20a86b2de75b84115fcb10aeea534e Bug: 1006759 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1937029 Reviewed-by: Mathias Bynens Commit-Queue: Mathias Bynens Auto-Submit: Tim van der Lippe --- BUILD.gn | 71 ++++--- front_end/elements/ClassesPaneWidget.js | 41 ++-- front_end/elements/ColorSwatchPopoverIcon.js | 45 +++-- front_end/elements/ComputedStyleModel.js | 43 +++-- front_end/elements/ComputedStyleWidget.js | 31 ++- front_end/elements/DOMLinkifier.js | 33 +++- front_end/elements/DOMPath.js | 70 ++++--- front_end/elements/ElementStatePaneWidget.js | 23 ++- front_end/elements/ElementsBreadcrumbs.js | 23 ++- front_end/elements/ElementsPanel.js | 107 +++++++---- front_end/elements/ElementsSidebarPane.js | 16 +- front_end/elements/ElementsTreeElement.js | 75 +++++--- .../ElementsTreeElementHighlighter.js | 16 +- front_end/elements/ElementsTreeOutline.js | 83 ++++---- front_end/elements/EventListenersWidget.js | 50 +++-- .../elements/InspectElementModeController.js | 35 +++- front_end/elements/MarkerDecorator.js | 23 ++- front_end/elements/MetricsSidebarPane.js | 23 ++- front_end/elements/NodeStackTraceWidget.js | 19 +- front_end/elements/PlatformFontsWidget.js | 13 +- front_end/elements/PropertiesWidget.js | 21 +- .../elements/StylePropertyHighlighter.js | 13 +- .../elements/StylePropertyTreeElement.js | 34 ++-- front_end/elements/StylesSidebarPane.js | 180 +++++++++++------- front_end/elements/elements.js | 77 ++++++++ front_end/elements/module.json | 4 +- 26 files changed, 796 insertions(+), 373 deletions(-) create mode 100644 front_end/elements/elements.js diff --git a/BUILD.gn b/BUILD.gn index 164ddb1ca9..f871fa1566 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -102,42 +102,19 @@ all_devtools_files = [ "front_end/dom_extension/module.json", "front_end/elements/breadcrumbs.css", "front_end/elements/classesPaneWidget.css", - "front_end/elements/ClassesPaneWidget.js", - "front_end/elements/ColorSwatchPopoverIcon.js", - "front_end/elements/ComputedStyleModel.js", "front_end/elements/computedStyleSidebarPane.css", "front_end/elements/computedStyleWidgetTree.css", - "front_end/elements/ComputedStyleWidget.js", - "front_end/elements/DOMLinkifier.js", "front_end/elements/domLinkifier.css", - "front_end/elements/DOMPath.js", - "front_end/elements/ElementsBreadcrumbs.js", "front_end/elements/elementsPanel.css", - "front_end/elements/ElementsPanel.js", - "front_end/elements/ElementsSidebarPane.js", "front_end/elements/elementStatePaneWidget.css", - "front_end/elements/ElementStatePaneWidget.js", - "front_end/elements/ElementsTreeElement.js", - "front_end/elements/ElementsTreeElementHighlighter.js", "front_end/elements/elementsTreeOutline.css", - "front_end/elements/ElementsTreeOutline.js", - "front_end/elements/EventListenersWidget.js", - "front_end/elements/InspectElementModeController.js", - "front_end/elements/MarkerDecorator.js", "front_end/elements/metricsSidebarPane.css", - "front_end/elements/MetricsSidebarPane.js", "front_end/elements/nodeStackTraceWidget.css", - "front_end/elements/NodeStackTraceWidget.js", "front_end/elements/module.json", "front_end/elements/platformFontsWidget.css", - "front_end/elements/PlatformFontsWidget.js", "front_end/elements/propertiesWidget.css", - "front_end/elements/PropertiesWidget.js", - "front_end/elements/StylePropertyHighlighter.js", "front_end/elements/stylesSectionTree.css", "front_end/elements/stylesSidebarPane.css", - "front_end/elements/StylesSidebarPane.js", - "front_end/elements/StylePropertyTreeElement.js", "front_end/elements_test_runner/EditDOMTestRunner.js", "front_end/elements_test_runner/ElementsPanelShadowSelectionOnRefreshTestRunner.js", "front_end/elements_test_runner/ElementsTestRunner.js", @@ -661,6 +638,30 @@ all_devtools_modules = [ "front_end/quick_open/HelpQuickOpen.js", "front_end/quick_open/FilteredListWidget.js", "front_end/quick_open/CommandMenu.js", + "front_end/elements/elements.js", + "front_end/elements/StylesSidebarPane.js", + "front_end/elements/StylePropertyTreeElement.js", + "front_end/elements/StylePropertyHighlighter.js", + "front_end/elements/PropertiesWidget.js", + "front_end/elements/PlatformFontsWidget.js", + "front_end/elements/NodeStackTraceWidget.js", + "front_end/elements/MetricsSidebarPane.js", + "front_end/elements/MarkerDecorator.js", + "front_end/elements/InspectElementModeController.js", + "front_end/elements/EventListenersWidget.js", + "front_end/elements/ElementsTreeOutline.js", + "front_end/elements/ElementsTreeElement.js", + "front_end/elements/ElementsTreeElementHighlighter.js", + "front_end/elements/ElementStatePaneWidget.js", + "front_end/elements/ElementsSidebarPane.js", + "front_end/elements/ElementsPanel.js", + "front_end/elements/ElementsBreadcrumbs.js", + "front_end/elements/DOMPath.js", + "front_end/elements/DOMLinkifier.js", + "front_end/elements/ComputedStyleWidget.js", + "front_end/elements/ComputedStyleModel.js", + "front_end/elements/ColorSwatchPopoverIcon.js", + "front_end/elements/ClassesPaneWidget.js", "front_end/timeline_model/timeline_model.js", "front_end/timeline_model/TracingLayerTree.js", "front_end/timeline_model/TimelineProfileTree.js", @@ -1262,6 +1263,30 @@ copied_devtools_modules = [ "$resources_out_dir/web_audio/WebAudioModel.js", "$resources_out_dir/web_audio/AudioContextSelector.js", "$resources_out_dir/web_audio/AudioContextContentBuilder.js", + "$resources_out_dir/elements/elements.js", + "$resources_out_dir/elements/StylesSidebarPane.js", + "$resources_out_dir/elements/StylePropertyTreeElement.js", + "$resources_out_dir/elements/StylePropertyHighlighter.js", + "$resources_out_dir/elements/PropertiesWidget.js", + "$resources_out_dir/elements/PlatformFontsWidget.js", + "$resources_out_dir/elements/NodeStackTraceWidget.js", + "$resources_out_dir/elements/MetricsSidebarPane.js", + "$resources_out_dir/elements/MarkerDecorator.js", + "$resources_out_dir/elements/InspectElementModeController.js", + "$resources_out_dir/elements/EventListenersWidget.js", + "$resources_out_dir/elements/ElementsTreeOutline.js", + "$resources_out_dir/elements/ElementsTreeElement.js", + "$resources_out_dir/elements/ElementsTreeElementHighlighter.js", + "$resources_out_dir/elements/ElementStatePaneWidget.js", + "$resources_out_dir/elements/ElementsSidebarPane.js", + "$resources_out_dir/elements/ElementsPanel.js", + "$resources_out_dir/elements/ElementsBreadcrumbs.js", + "$resources_out_dir/elements/DOMPath.js", + "$resources_out_dir/elements/DOMLinkifier.js", + "$resources_out_dir/elements/ComputedStyleWidget.js", + "$resources_out_dir/elements/ComputedStyleModel.js", + "$resources_out_dir/elements/ColorSwatchPopoverIcon.js", + "$resources_out_dir/elements/ClassesPaneWidget.js", "$resources_out_dir/javascript_metadata/javascript_metadata.js", "$resources_out_dir/javascript_metadata/NativeFunctions.js", "$resources_out_dir/javascript_metadata/JavaScriptMetadata.js", diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js index 6d3fd268ff..1be8862409 100644 --- a/front_end/elements/ClassesPaneWidget.js +++ b/front_end/elements/ClassesPaneWidget.js @@ -4,7 +4,7 @@ /** * @unrestricted */ -Elements.ClassesPaneWidget = class extends UI.Widget { +export default class ClassesPaneWidget extends UI.Widget { constructor() { super(true); this.registerRequiredCSS('elements/classesPaneWidget.css'); @@ -14,7 +14,7 @@ Elements.ClassesPaneWidget = class extends UI.Widget { this.setDefaultFocusedElement(this._input); this._classesContainer = this.contentElement.createChild('div', 'source-code'); this._classesContainer.classList.add('styles-element-classes-container'); - this._prompt = new Elements.ClassesPaneWidget.ClassNamePrompt(this._nodeClasses.bind(this)); + this._prompt = new ClassNamePrompt(this._nodeClasses.bind(this)); this._prompt.setAutocompletionTimeout(0); this._prompt.renderAsBlock(); @@ -99,7 +99,7 @@ Elements.ClassesPaneWidget = class extends UI.Widget { if (this._mutatingNodes.has(node)) { return; } - delete node[Elements.ClassesPaneWidget._classesSymbol]; + delete node[ClassesPaneWidget._classesSymbol]; this._update(); } @@ -170,7 +170,7 @@ Elements.ClassesPaneWidget = class extends UI.Widget { * @return {!Map} */ _nodeClasses(node) { - let result = node[Elements.ClassesPaneWidget._classesSymbol]; + let result = node[ClassesPaneWidget._classesSymbol]; if (!result) { const classAttribute = node.getAttribute('class') || ''; const classes = classAttribute.split(/\s/); @@ -182,7 +182,7 @@ Elements.ClassesPaneWidget = class extends UI.Widget { } result.set(className, true); } - node[Elements.ClassesPaneWidget._classesSymbol] = result; + node[ClassesPaneWidget._classesSymbol] = result; } return result; } @@ -237,27 +237,27 @@ Elements.ClassesPaneWidget = class extends UI.Widget { /** * @param {!SDK.DOMNode} node - * @this {Elements.ClassesPaneWidget} + * @this {ClassesPaneWidget} */ function onClassValueUpdated(node) { this._mutatingNodes.delete(node); } } -}; +} -Elements.ClassesPaneWidget._classesSymbol = Symbol('Elements.ClassesPaneWidget._classesSymbol'); +ClassesPaneWidget._classesSymbol = Symbol('ClassesPaneWidget._classesSymbol'); /** * @implements {UI.ToolbarItem.Provider} * @unrestricted */ -Elements.ClassesPaneWidget.ButtonProvider = class { +export class ButtonProvider { constructor() { this._button = new UI.ToolbarToggle(Common.UIString('Element Classes'), ''); this._button.setText('.cls'); this._button.element.classList.add('monospace'); this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked, this); - this._view = new Elements.ClassesPaneWidget(); + this._view = new ClassesPaneWidget(); } _clicked() { @@ -271,12 +271,12 @@ Elements.ClassesPaneWidget.ButtonProvider = class { item() { return this._button; } -}; +} /** * @unrestricted */ -Elements.ClassesPaneWidget.ClassNamePrompt = class extends UI.TextPrompt { +export class ClassNamePrompt extends UI.TextPrompt { /** * @param {function(!SDK.DOMNode):!Map} nodeClasses */ @@ -345,4 +345,19 @@ Elements.ClassesPaneWidget.ClassNamePrompt = class extends UI.TextPrompt { return completions.filter(value => value.startsWith(prefix)).sort().map(completion => ({text: completion})); }); } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ClassesPaneWidget = ClassesPaneWidget; + +/** @constructor */ +Elements.ClassesPaneWidget.ButtonProvider = ButtonProvider; + +/** @constructor */ +Elements.ClassesPaneWidget.ClassNamePrompt = ClassNamePrompt; diff --git a/front_end/elements/ColorSwatchPopoverIcon.js b/front_end/elements/ColorSwatchPopoverIcon.js index e8426ceb1e..59799462c6 100644 --- a/front_end/elements/ColorSwatchPopoverIcon.js +++ b/front_end/elements/ColorSwatchPopoverIcon.js @@ -1,10 +1,11 @@ // Copyright (c) 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.BezierPopoverIcon = class { +export class BezierPopoverIcon { /** * @param {!Elements.StylePropertyTreeElement} treeElement * @param {!InlineEditor.SwatchPopoverHelper} swatchPopoverHelper @@ -86,12 +87,12 @@ Elements.BezierPopoverIcon = class { this._treeElement.parentPane().setEditingStyle(false); delete this._originalPropertyText; } -}; +} /** * @unrestricted */ -Elements.ColorSwatchPopoverIcon = class { +export default class ColorSwatchPopoverIcon { /** * @param {!Elements.StylePropertyTreeElement} treeElement * @param {!InlineEditor.SwatchPopoverHelper} swatchPopoverHelper @@ -99,7 +100,7 @@ Elements.ColorSwatchPopoverIcon = class { */ constructor(treeElement, swatchPopoverHelper, swatch) { this._treeElement = treeElement; - this._treeElement[Elements.ColorSwatchPopoverIcon._treeElementSymbol] = this; + this._treeElement[ColorSwatchPopoverIcon._treeElementSymbol] = this; this._swatchPopoverHelper = swatchPopoverHelper; this._swatch = swatch; @@ -142,10 +143,10 @@ Elements.ColorSwatchPopoverIcon = class { /** * @param {!Elements.StylePropertyTreeElement} treeElement - * @return {?Elements.ColorSwatchPopoverIcon} + * @return {?ColorSwatchPopoverIcon} */ static forTreeElement(treeElement) { - return treeElement[Elements.ColorSwatchPopoverIcon._treeElementSymbol] || null; + return treeElement[ColorSwatchPopoverIcon._treeElementSymbol] || null; } /** @@ -241,15 +242,14 @@ Elements.ColorSwatchPopoverIcon = class { this._treeElement.parentPane().setEditingStyle(false); delete this._originalPropertyText; } -}; - -Elements.ColorSwatchPopoverIcon._treeElementSymbol = Symbol('Elements.ColorSwatchPopoverIcon._treeElementSymbol'); +} +ColorSwatchPopoverIcon._treeElementSymbol = Symbol('ColorSwatchPopoverIcon._treeElementSymbol'); /** * @unrestricted */ -Elements.ShadowSwatchPopoverHelper = class { +export class ShadowSwatchPopoverHelper { /** * @param {!Elements.StylePropertyTreeElement} treeElement * @param {!InlineEditor.SwatchPopoverHelper} swatchPopoverHelper @@ -257,7 +257,7 @@ Elements.ShadowSwatchPopoverHelper = class { */ constructor(treeElement, swatchPopoverHelper, shadowSwatch) { this._treeElement = treeElement; - this._treeElement[Elements.ShadowSwatchPopoverHelper._treeElementSymbol] = this; + this._treeElement[ShadowSwatchPopoverHelper._treeElementSymbol] = this; this._swatchPopoverHelper = swatchPopoverHelper; this._shadowSwatch = shadowSwatch; this._iconElement = shadowSwatch.iconElement(); @@ -272,10 +272,10 @@ Elements.ShadowSwatchPopoverHelper = class { /** * @param {!Elements.StylePropertyTreeElement} treeElement - * @return {?Elements.ShadowSwatchPopoverHelper} + * @return {?ShadowSwatchPopoverHelper} */ static forTreeElement(treeElement) { - return treeElement[Elements.ShadowSwatchPopoverHelper._treeElementSymbol] || null; + return treeElement[ShadowSwatchPopoverHelper._treeElementSymbol] || null; } /** @@ -341,6 +341,21 @@ Elements.ShadowSwatchPopoverHelper = class { this._treeElement.parentPane().setEditingStyle(false); delete this._originalPropertyText; } -}; +} -Elements.ShadowSwatchPopoverHelper._treeElementSymbol = Symbol('Elements.ShadowSwatchPopoverHelper._treeElementSymbol'); +ShadowSwatchPopoverHelper._treeElementSymbol = Symbol('ShadowSwatchPopoverHelper._treeElementSymbol'); + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ColorSwatchPopoverIcon = ColorSwatchPopoverIcon; + +/** @constructor */ +Elements.BezierPopoverIcon = BezierPopoverIcon; + +/** @constructor */ +Elements.ShadowSwatchPopoverHelper = ShadowSwatchPopoverHelper; diff --git a/front_end/elements/ComputedStyleModel.js b/front_end/elements/ComputedStyleModel.js index f39900f5f8..6804ccc4aa 100644 --- a/front_end/elements/ComputedStyleModel.js +++ b/front_end/elements/ComputedStyleModel.js @@ -1,10 +1,11 @@ // Copyright (c) 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.ComputedStyleModel = class extends Common.Object { +export default class ComputedStyleModel extends Common.Object { constructor() { super(); this._node = UI.context.flavor(SDK.DOMNode); @@ -67,7 +68,7 @@ Elements.ComputedStyleModel = class extends Common.Object { */ _onComputedStyleChanged(event) { delete this._computedStylePromise; - this.dispatchEventToListeners(Elements.ComputedStyleModel.Events.ComputedStyleChanged, event ? event.data : null); + this.dispatchEventToListeners(Events.ComputedStyleChanged, event ? event.data : null); } /** @@ -88,7 +89,7 @@ Elements.ComputedStyleModel = class extends Common.Object { */ _onFrameResized(event) { /** - * @this {Elements.ComputedStyleModel} + * @this {ComputedStyleModel} */ function refreshContents() { this._onComputedStyleChanged(null); @@ -110,13 +111,13 @@ Elements.ComputedStyleModel = class extends Common.Object { } /** - * @return {!Promise.} + * @return {!Promise.} */ fetchComputedStyle() { const elementNode = this._elementNode(); const cssModel = this.cssModel(); if (!elementNode || !cssModel) { - return Promise.resolve(/** @type {?Elements.ComputedStyleModel.ComputedStyle} */ (null)); + return Promise.resolve(/** @type {?ComputedStyle} */ (null)); } if (!this._computedStylePromise) { @@ -129,26 +130,25 @@ Elements.ComputedStyleModel = class extends Common.Object { /** * @param {!SDK.DOMNode} elementNode * @param {?Map.} style - * @return {?Elements.ComputedStyleModel.ComputedStyle} - * @this {Elements.ComputedStyleModel} + * @return {?ComputedStyle} + * @this {ComputedStyleModel} */ function verifyOutdated(elementNode, style) { - return elementNode === this._elementNode() && style ? - new Elements.ComputedStyleModel.ComputedStyle(elementNode, style) : - /** @type {?Elements.ComputedStyleModel.ComputedStyle} */ (null); + return elementNode === this._elementNode() && style ? new ComputedStyle(elementNode, style) : + /** @type {?ComputedStyle} */ (null); } } -}; +} /** @enum {symbol} */ -Elements.ComputedStyleModel.Events = { +export const Events = { ComputedStyleChanged: Symbol('ComputedStyleChanged') }; /** * @unrestricted */ -Elements.ComputedStyleModel.ComputedStyle = class { +export class ComputedStyle { /** * @param {!SDK.DOMNode} node * @param {!Map.} computedStyle @@ -157,4 +157,19 @@ Elements.ComputedStyleModel.ComputedStyle = class { this.node = node; this.computedStyle = computedStyle; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ComputedStyleModel = ComputedStyleModel; + +/** @enum {symbol} */ +Elements.ComputedStyleModel.Events = Events; + +/** @constructor */ +Elements.ComputedStyleModel.ComputedStyle = ComputedStyle; diff --git a/front_end/elements/ComputedStyleWidget.js b/front_end/elements/ComputedStyleWidget.js index 726d5adb76..ab6229ed46 100644 --- a/front_end/elements/ComputedStyleWidget.js +++ b/front_end/elements/ComputedStyleWidget.js @@ -30,7 +30,7 @@ /** * @unrestricted */ -Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { +export default class ComputedStyleWidget extends UI.ThrottledWidget { constructor() { super(true); this.registerRequiredCSS('elements/computedStyleSidebarPane.css'); @@ -68,11 +68,11 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { this._propertiesOutline.element.classList.add('monospace', 'computed-properties'); this.contentElement.appendChild(this._propertiesOutline.element); - this._linkifier = new Components.Linkifier(Elements.ComputedStyleWidget._maxLinkLength); + this._linkifier = new Components.Linkifier(_maxLinkLength); /** * @param {?RegExp} regex - * @this {Elements.ComputedStyleWidget} + * @this {ComputedStyleWidget} */ function filterCallback(regex) { this._filterRegex = regex; @@ -118,7 +118,7 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { /** * @param {?SDK.CSSMatchedStyles} matchedStyles * @return {?SDK.CSSMatchedStyles} - * @this {Elements.ComputedStyleWidget} + * @this {ComputedStyleWidget} */ function validateStyles(matchedStyles) { return matchedStyles && matchedStyles.node() === this._computedStyleModel.node() ? matchedStyles : null; @@ -151,7 +151,7 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { if (!treeElement.expanded) { continue; } - const propertyName = treeElement[Elements.ComputedStyleWidget._propertySymbol].name; + const propertyName = treeElement[_propertySymbol].name; expandedProperties.add(propertyName); } const hadFocus = this._propertiesOutline.element.hasFocus(); @@ -210,7 +210,7 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { const treeElement = new UI.TreeElement(); treeElement.title = propertyElement; - treeElement[Elements.ComputedStyleWidget._propertySymbol] = {name: propertyName, value: propertyValue}; + treeElement[_propertySymbol] = {name: propertyName, value: propertyValue}; const isOdd = this._propertiesOutline.rootElement().children().length % 2 === 0; treeElement.listItemElement.classList.toggle('odd-row', isOdd); this._propertiesOutline.appendChild(treeElement); @@ -396,15 +396,26 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget { const children = this._propertiesOutline.rootElement().children(); let hasMatch = false; for (const child of children) { - const property = child[Elements.ComputedStyleWidget._propertySymbol]; + const property = child[_propertySymbol]; const matched = !regex || regex.test(property.name) || regex.test(property.value); child.hidden = !matched; hasMatch |= matched; } this._noMatchesElement.classList.toggle('hidden', !!hasMatch); } -}; +} -Elements.ComputedStyleWidget._maxLinkLength = 30; +export const _maxLinkLength = 30; +export const _propertySymbol = Symbol('property'); -Elements.ComputedStyleWidget._propertySymbol = Symbol('property'); +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ComputedStyleWidget = ComputedStyleWidget; + +Elements.ComputedStyleWidget._maxLinkLength = _maxLinkLength; +Elements.ComputedStyleWidget._propertySymbol = _propertySymbol; diff --git a/front_end/elements/DOMLinkifier.js b/front_end/elements/DOMLinkifier.js index 0723d3ae63..e1a140ad87 100644 --- a/front_end/elements/DOMLinkifier.js +++ b/front_end/elements/DOMLinkifier.js @@ -2,14 +2,12 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Elements.DOMLinkifier = {}; - /** * @param {!SDK.DOMNode} node * @param {!Element} parentElement * @param {string=} tooltipContent */ -Elements.DOMLinkifier.decorateNodeLabel = function(node, parentElement, tooltipContent) { +export const decorateNodeLabel = function(node, parentElement, tooltipContent) { const originalNode = node; const isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType(); if (isPseudo && node.parentNode) { @@ -65,7 +63,7 @@ Elements.DOMLinkifier.decorateNodeLabel = function(node, parentElement, tooltipC * @param {!Common.Linkifier.Options=} options * @return {!Node} */ -Elements.DOMLinkifier.linkifyNodeReference = function(node, options = {}) { +export const linkifyNodeReference = function(node, options = {}) { if (!node) { return createTextNode(Common.UIString('')); } @@ -74,7 +72,7 @@ Elements.DOMLinkifier.linkifyNodeReference = function(node, options = {}) { const shadowRoot = UI.createShadowRootWithCoreStyles(root, 'elements/domLinkifier.css'); const link = shadowRoot.createChild('div', 'node-link'); - Elements.DOMLinkifier.decorateNodeLabel(node, link, options.tooltip); + decorateNodeLabel(node, link, options.tooltip); link.addEventListener('click', () => Common.Revealer.reveal(node, false) && false, false); link.addEventListener('mouseover', node.highlight.bind(node, undefined), false); @@ -94,7 +92,7 @@ Elements.DOMLinkifier.linkifyNodeReference = function(node, options = {}) { * @param {!Common.Linkifier.Options=} options * @return {!Node} */ -Elements.DOMLinkifier.linkifyDeferredNodeReference = function(deferredNode, options = {}) { +export const linkifyDeferredNodeReference = function(deferredNode, options = {}) { const root = createElement('div'); const shadowRoot = UI.createShadowRootWithCoreStyles(root, 'elements/domLinkifier.css'); const link = shadowRoot.createChild('div', 'node-link'); @@ -121,7 +119,7 @@ Elements.DOMLinkifier.linkifyDeferredNodeReference = function(deferredNode, opti /** * @implements {Common.Linkifier} */ -Elements.DOMLinkifier.Linkifier = class { +export class Linkifier { /** * @override * @param {!Object} object @@ -130,11 +128,26 @@ Elements.DOMLinkifier.Linkifier = class { */ linkify(object, options) { if (object instanceof SDK.DOMNode) { - return Elements.DOMLinkifier.linkifyNodeReference(object, options); + return linkifyNodeReference(object, options); } if (object instanceof SDK.DeferredDOMNode) { - return Elements.DOMLinkifier.linkifyDeferredNodeReference(object, options); + return linkifyDeferredNodeReference(object, options); } throw new Error('Can\'t linkify non-node'); } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +Elements.DOMLinkifier = {}; + +Elements.DOMLinkifier.decorateNodeLabel = decorateNodeLabel; +Elements.DOMLinkifier.linkifyNodeReference = linkifyNodeReference; +Elements.DOMLinkifier.linkifyDeferredNodeReference = linkifyDeferredNodeReference; + +/** @constructor */ +Elements.DOMLinkifier.Linkifier = Linkifier; diff --git a/front_end/elements/DOMPath.js b/front_end/elements/DOMPath.js index 6ddbbaab36..ece4474b11 100644 --- a/front_end/elements/DOMPath.js +++ b/front_end/elements/DOMPath.js @@ -2,18 +2,16 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Elements.DOMPath = {}; - /** * @param {!SDK.DOMNode} node * @param {boolean=} justSelector * @return {string} */ -Elements.DOMPath.fullQualifiedSelector = function(node, justSelector) { +export const fullQualifiedSelector = function(node, justSelector) { if (node.nodeType() !== Node.ELEMENT_NODE) { return node.localName() || node.nodeName().toLowerCase(); } - return Elements.DOMPath.cssPath(node, justSelector); + return cssPath(node, justSelector); }; /** @@ -21,7 +19,7 @@ Elements.DOMPath.fullQualifiedSelector = function(node, justSelector) { * @param {boolean=} optimized * @return {string} */ -Elements.DOMPath.cssPath = function(node, optimized) { +export const cssPath = function(node, optimized) { if (node.nodeType() !== Node.ELEMENT_NODE) { return ''; } @@ -29,7 +27,7 @@ Elements.DOMPath.cssPath = function(node, optimized) { const steps = []; let contextNode = node; while (contextNode) { - const step = Elements.DOMPath._cssPathStep(contextNode, !!optimized, contextNode === node); + const step = _cssPathStep(contextNode, !!optimized, contextNode === node); if (!step) { break; } // Error - bail out early. @@ -48,7 +46,7 @@ Elements.DOMPath.cssPath = function(node, optimized) { * @param {!SDK.DOMNode} node * @return {boolean} */ -Elements.DOMPath.canGetJSPath = function(node) { +export const canGetJSPath = function(node) { let wp = node; while (wp) { if (wp.ancestorShadowRoot() && wp.ancestorShadowRoot().shadowRootType() !== SDK.DOMNode.ShadowRootTypes.Open) { @@ -64,7 +62,7 @@ Elements.DOMPath.canGetJSPath = function(node) { * @param {boolean=} optimized * @return {string} */ -Elements.DOMPath.jsPath = function(node, optimized) { +export const jsPath = function(node, optimized) { if (node.nodeType() !== Node.ELEMENT_NODE) { return ''; } @@ -72,7 +70,7 @@ Elements.DOMPath.jsPath = function(node, optimized) { const path = []; let wp = node; while (wp) { - path.push(Elements.DOMPath.cssPath(wp, optimized)); + path.push(cssPath(wp, optimized)); wp = wp.ancestorShadowHost(); } path.reverse(); @@ -92,9 +90,9 @@ Elements.DOMPath.jsPath = function(node, optimized) { * @param {!SDK.DOMNode} node * @param {boolean} optimized * @param {boolean} isTargetNode - * @return {?Elements.DOMPath.Step} + * @return {?Step} */ -Elements.DOMPath._cssPathStep = function(node, optimized, isTargetNode) { +export const _cssPathStep = function(node, optimized, isTargetNode) { if (node.nodeType() !== Node.ELEMENT_NODE) { return null; } @@ -102,21 +100,21 @@ Elements.DOMPath._cssPathStep = function(node, optimized, isTargetNode) { const id = node.getAttribute('id'); if (optimized) { if (id) { - return new Elements.DOMPath.Step(idSelector(id), true); + return new Step(idSelector(id), true); } const nodeNameLower = node.nodeName().toLowerCase(); if (nodeNameLower === 'body' || nodeNameLower === 'head' || nodeNameLower === 'html') { - return new Elements.DOMPath.Step(node.nodeNameInCorrectCase(), true); + return new Step(node.nodeNameInCorrectCase(), true); } } const nodeName = node.nodeNameInCorrectCase(); if (id) { - return new Elements.DOMPath.Step(nodeName + idSelector(id), true); + return new Step(nodeName + idSelector(id), true); } const parent = node.parentNode; if (!parent || parent.nodeType() === Node.DOCUMENT_NODE) { - return new Elements.DOMPath.Step(nodeName, true); + return new Step(nodeName, true); } /** @@ -199,7 +197,7 @@ Elements.DOMPath._cssPathStep = function(node, optimized, isTargetNode) { } } - return new Elements.DOMPath.Step(result, false); + return new Step(result, false); }; /** @@ -207,7 +205,7 @@ Elements.DOMPath._cssPathStep = function(node, optimized, isTargetNode) { * @param {boolean=} optimized * @return {string} */ -Elements.DOMPath.xPath = function(node, optimized) { +export const xPath = function(node, optimized) { if (node.nodeType() === Node.DOCUMENT_NODE) { return '/'; } @@ -215,7 +213,7 @@ Elements.DOMPath.xPath = function(node, optimized) { const steps = []; let contextNode = node; while (contextNode) { - const step = Elements.DOMPath._xPathValue(contextNode, optimized); + const step = _xPathValue(contextNode, optimized); if (!step) { break; } // Error - bail out early. @@ -233,11 +231,11 @@ Elements.DOMPath.xPath = function(node, optimized) { /** * @param {!SDK.DOMNode} node * @param {boolean=} optimized - * @return {?Elements.DOMPath.Step} + * @return {?Step} */ -Elements.DOMPath._xPathValue = function(node, optimized) { +export const _xPathValue = function(node, optimized) { let ownValue; - const ownIndex = Elements.DOMPath._xPathIndex(node); + const ownIndex = _xPathIndex(node); if (ownIndex === -1) { return null; } // Error. @@ -245,7 +243,7 @@ Elements.DOMPath._xPathValue = function(node, optimized) { switch (node.nodeType()) { case Node.ELEMENT_NODE: if (optimized && node.getAttribute('id')) { - return new Elements.DOMPath.Step('//*[@id="' + node.getAttribute('id') + '"]', true); + return new Step('//*[@id="' + node.getAttribute('id') + '"]', true); } ownValue = node.localName(); break; @@ -274,14 +272,14 @@ Elements.DOMPath._xPathValue = function(node, optimized) { ownValue += '[' + ownIndex + ']'; } - return new Elements.DOMPath.Step(ownValue, node.nodeType() === Node.DOCUMENT_NODE); + return new Step(ownValue, node.nodeType() === Node.DOCUMENT_NODE); }; /** * @param {!SDK.DOMNode} node * @return {number} */ -Elements.DOMPath._xPathIndex = function(node) { +export const _xPathIndex = function(node) { // Returns -1 in case of error, 0 if no siblings matching the same expression, otherwise. function areNodesSimilar(left, right) { if (left === right) { @@ -331,7 +329,7 @@ Elements.DOMPath._xPathIndex = function(node) { /** * @unrestricted */ -Elements.DOMPath.Step = class { +export class Step { /** * @param {string} value * @param {boolean} optimized @@ -348,4 +346,24 @@ Elements.DOMPath.Step = class { toString() { return this.value; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +Elements.DOMPath = {}; + +Elements.DOMPath.fullQualifiedSelector = fullQualifiedSelector; +Elements.DOMPath.cssPath = cssPath; +Elements.DOMPath.canGetJSPath = canGetJSPath; +Elements.DOMPath.jsPath = jsPath; +Elements.DOMPath._cssPathStep = _cssPathStep; +Elements.DOMPath.xPath = xPath; +Elements.DOMPath._xPathValue = _xPathValue; +Elements.DOMPath._xPathIndex = _xPathIndex; + +/** @constructor */ +Elements.DOMPath.Step = Step; diff --git a/front_end/elements/ElementStatePaneWidget.js b/front_end/elements/ElementStatePaneWidget.js index ede77705f2..62f7f1c5aa 100644 --- a/front_end/elements/ElementStatePaneWidget.js +++ b/front_end/elements/ElementStatePaneWidget.js @@ -1,10 +1,11 @@ // Copyright (c) 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.ElementStatePaneWidget = class extends UI.Widget { +export default class ElementStatePaneWidget extends UI.Widget { constructor() { super(true); this.registerRequiredCSS('elements/elementStatePaneWidget.css'); @@ -108,19 +109,19 @@ Elements.ElementStatePaneWidget = class extends UI.Widget { } } } -}; +} /** * @implements {UI.ToolbarItem.Provider} * @unrestricted */ -Elements.ElementStatePaneWidget.ButtonProvider = class { +export class ButtonProvider { constructor() { this._button = new UI.ToolbarToggle(Common.UIString('Toggle Element State'), ''); this._button.setText(Common.UIString(':hov')); this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked, this); this._button.element.classList.add('monospace'); - this._view = new Elements.ElementStatePaneWidget(); + this._view = new ElementStatePaneWidget(); } _clicked() { @@ -134,4 +135,16 @@ Elements.ElementStatePaneWidget.ButtonProvider = class { item() { return this._button; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementStatePaneWidget = ElementStatePaneWidget; + +/** @constructor */ +Elements.ElementStatePaneWidget.ButtonProvider = ButtonProvider; diff --git a/front_end/elements/ElementsBreadcrumbs.js b/front_end/elements/ElementsBreadcrumbs.js index dd1d6bc9fc..d73289d932 100644 --- a/front_end/elements/ElementsBreadcrumbs.js +++ b/front_end/elements/ElementsBreadcrumbs.js @@ -1,10 +1,11 @@ // Copyright 2014 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.ElementsBreadcrumbs = class extends UI.HBox { +export default class ElementsBreadcrumbs extends UI.HBox { constructor() { super(true); this.registerRequiredCSS('elements/breadcrumbs.css'); @@ -67,13 +68,13 @@ Elements.ElementsBreadcrumbs = class extends UI.HBox { /** * @param {!Event} event - * @this {Elements.ElementsBreadcrumbs} + * @this {ElementsBreadcrumbs} */ _onClickCrumb(event) { event.preventDefault(); let crumb = /** @type {!Element} */ (event.currentTarget); if (!crumb.classList.contains('collapsed')) { - this.dispatchEventToListeners(Elements.ElementsBreadcrumbs.Events.NodeSelected, crumb[this._nodeSymbol]); + this.dispatchEventToListeners(Events.NodeSelected, crumb[this._nodeSymbol]); return; } @@ -465,9 +466,21 @@ Elements.ElementsBreadcrumbs = class extends UI.HBox { // Collapse the selected crumb as a last resort. Pass true to prevent coalescing. collapse(selectedCrumb, true); } -}; +} /** @enum {symbol} */ -Elements.ElementsBreadcrumbs.Events = { +export const Events = { NodeSelected: Symbol('NodeSelected') }; + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsBreadcrumbs = ElementsBreadcrumbs; + +/** @enum {symbol} */ +Elements.ElementsBreadcrumbs.Events = Events; diff --git a/front_end/elements/ElementsPanel.js b/front_end/elements/ElementsPanel.js index e31c01fd2e..69ff9c7e2c 100644 --- a/front_end/elements/ElementsPanel.js +++ b/front_end/elements/ElementsPanel.js @@ -34,7 +34,7 @@ * @implements {UI.ViewLocationResolver} * @unrestricted */ -Elements.ElementsPanel = class extends UI.Panel { +export default class ElementsPanel extends UI.Panel { constructor() { super('elements'); this.registerRequiredCSS('elements/elementsPanel.css'); @@ -55,7 +55,7 @@ Elements.ElementsPanel = class extends UI.Panel { stackElement.appendChild(crumbsContainer); this._splitWidget.setMainWidget(this._searchableView); - /** @type {?Elements.ElementsPanel._splitMode} */ + /** @type {?_splitMode} */ this._splitMode = null; this._contentElement.id = 'elements-content'; @@ -98,10 +98,10 @@ Elements.ElementsPanel = class extends UI.Panel { } /** - * @return {!Elements.ElementsPanel} + * @return {!ElementsPanel} */ static instance() { - return /** @type {!Elements.ElementsPanel} */ (self.runtime.sharedInstance(Elements.ElementsPanel)); + return /** @type {!ElementsPanel} */ (self.runtime.sharedInstance(ElementsPanel)); } /** @@ -237,7 +237,7 @@ Elements.ElementsPanel = class extends UI.Panel { * @override */ wasShown() { - UI.context.setFlavor(Elements.ElementsPanel, this); + UI.context.setFlavor(ElementsPanel, this); for (let i = 0; i < this._treeOutlines.length; ++i) { const treeOutline = this._treeOutlines[i]; @@ -291,7 +291,7 @@ Elements.ElementsPanel = class extends UI.Panel { this._popoverHelper.hidePopover(); } super.willHide(); - UI.context.setFlavor(Elements.ElementsPanel, null); + UI.context.setFlavor(ElementsPanel, null); } /** @@ -370,7 +370,7 @@ Elements.ElementsPanel = class extends UI.Panel { /** * @param {!SDK.DOMModel} domModel * @param {?SDK.DOMNode} staleNode - * @this {Elements.ElementsPanel} + * @this {ElementsPanel} */ async function restoreNode(domModel, staleNode) { const nodePath = staleNode ? staleNode.path() : null; @@ -454,7 +454,7 @@ Elements.ElementsPanel = class extends UI.Panel { /** * @param {!Array.} resultCounts - * @this {Elements.ElementsPanel} + * @this {ElementsPanel} */ function resultCountCallback(resultCounts) { this._searchResults = []; @@ -768,7 +768,7 @@ Elements.ElementsPanel = class extends UI.Panel { }, true); /** - * @this {!Elements.ElementsPanel} + * @this {!ElementsPanel} */ function uninstallHack() { this._splitWidget.element.classList.remove('disable-resizer-for-elements-hack'); @@ -794,11 +794,11 @@ Elements.ElementsPanel = class extends UI.Panel { let splitMode; const position = Common.moduleSetting('sidebarPosition').get(); if (position === 'right' || (position === 'auto' && UI.inspectorView.element.offsetWidth > 680)) { - splitMode = Elements.ElementsPanel._splitMode.Vertical; + splitMode = _splitMode.Vertical; } else if (UI.inspectorView.element.offsetWidth > 415) { - splitMode = Elements.ElementsPanel._splitMode.Horizontal; + splitMode = _splitMode.Horizontal; } else { - splitMode = Elements.ElementsPanel._splitMode.Slim; + splitMode = _splitMode.Slim; } if (this.sidebarPaneView && splitMode === this._splitMode) { @@ -814,7 +814,7 @@ Elements.ElementsPanel = class extends UI.Panel { this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement()); } - this._splitWidget.setVertical(this._splitMode === Elements.ElementsPanel._splitMode.Vertical); + this._splitWidget.setVertical(this._splitMode === _splitMode.Vertical); this.showToolbarPane(null /* widget */, null /* toggle */); const matchedStylePanesWrapper = new UI.VBox(); @@ -828,7 +828,7 @@ Elements.ElementsPanel = class extends UI.Panel { /** * @param {boolean} inComputedStyle - * @this {Elements.ElementsPanel} + * @this {ElementsPanel} */ function showMetrics(inComputedStyle) { if (inComputedStyle) { @@ -840,7 +840,7 @@ Elements.ElementsPanel = class extends UI.Panel { /** * @param {!Common.Event} event - * @this {Elements.ElementsPanel} + * @this {ElementsPanel} */ function tabSelected(event) { const tabId = /** @type {string} */ (event.data.tabId); @@ -860,13 +860,13 @@ Elements.ElementsPanel = class extends UI.Panel { this._popoverHelper.setHasPadding(true); this._popoverHelper.setTimeout(0); - if (this._splitMode !== Elements.ElementsPanel._splitMode.Vertical) { + if (this._splitMode !== _splitMode.Vertical) { this._splitWidget.installResizer(tabbedPane.headerElement()); } const stylesView = new UI.SimpleView(Common.UIString('Styles')); this.sidebarPaneView.appendView(stylesView); - if (splitMode === Elements.ElementsPanel._splitMode.Horizontal) { + if (splitMode === _splitMode.Horizontal) { // Styles and computed are merged into a single tab. stylesView.element.classList.add('flex-auto'); @@ -888,7 +888,7 @@ Elements.ElementsPanel = class extends UI.Panel { } this._stylesViewToReveal = stylesView; - showMetrics.call(this, this._splitMode === Elements.ElementsPanel._splitMode.Horizontal); + showMetrics.call(this, this._splitMode === _splitMode.Horizontal); this.sidebarPaneView.appendApplicableItems('elements-sidebar'); for (let i = 0; i < extensionSidebarPanes.length; ++i) { @@ -918,25 +918,22 @@ Elements.ElementsPanel = class extends UI.Panel { this.sidebarPaneView.appendView(pane); } } -}; +} -Elements.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol('title'); +export const _elementsSidebarViewTitleSymbol = Symbol('title'); /** @enum {symbol} */ -Elements.ElementsPanel._splitMode = { +export const _splitMode = { Vertical: Symbol('Vertical'), Horizontal: Symbol('Horizontal'), Slim: Symbol('Slim'), }; -// Sniffed in tests. -Elements.ElementsPanel._firstInspectElementCompletedForTest = function() {}; - /** * @implements {UI.ContextMenu.Provider} * @unrestricted */ -Elements.ElementsPanel.ContextMenuProvider = class { +export class ContextMenuProvider { /** * @override * @param {!Event} event @@ -950,19 +947,19 @@ Elements.ElementsPanel.ContextMenuProvider = class { } // Skip adding "Reveal..." menu item for our own tree outline. - if (Elements.ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target))) { + if (ElementsPanel.instance().element.isAncestor(/** @type {!Node} */ (event.target))) { return; } const commandCallback = Common.Revealer.reveal.bind(Common.Revealer, object); contextMenu.revealSection().appendItem(Common.UIString('Reveal in Elements panel'), commandCallback); } -}; +} /** * @implements {Common.Revealer} * @unrestricted */ -Elements.ElementsPanel.DOMNodeRevealer = class { +export class DOMNodeRevealer { /** * @override * @param {!Object} node @@ -970,7 +967,7 @@ Elements.ElementsPanel.DOMNodeRevealer = class { * @return {!Promise} */ reveal(node, omitFocus) { - const panel = Elements.ElementsPanel.instance(); + const panel = ElementsPanel.instance(); panel._pendingNodeReveal = true; return new Promise(revealPromise); @@ -1028,30 +1025,30 @@ Elements.ElementsPanel.DOMNodeRevealer = class { } } } -}; +} /** * @implements {Common.Revealer} * @unrestricted */ -Elements.ElementsPanel.CSSPropertyRevealer = class { +export class CSSPropertyRevealer { /** * @override * @param {!Object} property * @return {!Promise} */ reveal(property) { - const panel = Elements.ElementsPanel.instance(); + const panel = ElementsPanel.instance(); return panel._revealProperty(/** @type {!SDK.CSSProperty} */ (property)); } -}; +} /** * @implements {UI.ActionDelegate} * @unrestricted */ -Elements.ElementsActionDelegate = class { +export class ElementsActionDelegate { /** * @override * @param {!UI.Context} context @@ -1077,22 +1074,22 @@ Elements.ElementsActionDelegate = class { return true; case 'elements.undo': SDK.domModelUndoStack.undo(); - Elements.ElementsPanel.instance()._stylesWidget.forceUpdate(); + ElementsPanel.instance()._stylesWidget.forceUpdate(); return true; case 'elements.redo': SDK.domModelUndoStack.redo(); - Elements.ElementsPanel.instance()._stylesWidget.forceUpdate(); + ElementsPanel.instance()._stylesWidget.forceUpdate(); return true; } return false; } -}; +} /** * @implements {Elements.MarkerDecorator} * @unrestricted */ -Elements.ElementsPanel.PseudoStateMarkerDecorator = class { +export class PseudoStateMarkerDecorator { /** * @override * @param {!SDK.DOMNode} node @@ -1104,4 +1101,36 @@ Elements.ElementsPanel.PseudoStateMarkerDecorator = class { title: Common.UIString('Element state: %s', ':' + node.domModel().cssModel().pseudoState(node).join(', :')) }; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsPanel = ElementsPanel; + +// Sniffed in tests. +Elements.ElementsPanel._firstInspectElementCompletedForTest = function() {}; + +Elements.ElementsPanel._elementsSidebarViewTitleSymbol = _elementsSidebarViewTitleSymbol; + +/** @enum {symbol} */ +Elements.ElementsPanel._splitMode = _splitMode; + +/** @constructor */ +Elements.ElementsPanel.ContextMenuProvider = ContextMenuProvider; + +/** @constructor */ +Elements.ElementsPanel.DOMNodeRevealer = DOMNodeRevealer; + +/** @constructor */ +Elements.ElementsPanel.CSSPropertyRevealer = CSSPropertyRevealer; + +/** @constructor */ +Elements.ElementsActionDelegate = ElementsActionDelegate; + +/** @constructor */ +Elements.ElementsPanel.PseudoStateMarkerDecorator = PseudoStateMarkerDecorator; diff --git a/front_end/elements/ElementsSidebarPane.js b/front_end/elements/ElementsSidebarPane.js index bda591c840..3656ec6f0f 100644 --- a/front_end/elements/ElementsSidebarPane.js +++ b/front_end/elements/ElementsSidebarPane.js @@ -1,10 +1,11 @@ // Copyright (c) 2014 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.ElementsSidebarPane = class extends UI.VBox { +export default class ElementsSidebarPane extends UI.VBox { /** * @param {boolean=} delegatesFocus */ @@ -50,7 +51,7 @@ Elements.ElementsSidebarPane = class extends UI.VBox { /** * @return {!Promise.} - * @this {Elements.ElementsSidebarPane} + * @this {ElementsSidebarPane} */ function innerUpdate() { return this.isShowing() ? this.doUpdate() : Promise.resolve(); @@ -72,4 +73,13 @@ Elements.ElementsSidebarPane = class extends UI.VBox { */ onCSSModelChanged(event) { } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsSidebarPane = ElementsSidebarPane; diff --git a/front_end/elements/ElementsTreeElement.js b/front_end/elements/ElementsTreeElement.js index f8129d46a5..19284caf39 100644 --- a/front_end/elements/ElementsTreeElement.js +++ b/front_end/elements/ElementsTreeElement.js @@ -31,7 +31,7 @@ /** * @unrestricted */ -Elements.ElementsTreeElement = class extends UI.TreeElement { +export default class ElementsTreeElement extends UI.TreeElement { /** * @param {!SDK.DOMNode} node * @param {boolean=} elementCloseTag @@ -53,7 +53,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { this._canAddAttributes = true; } this._searchQuery = null; - this._expandedChildrenLimit = Elements.ElementsTreeElement.InitialChildrenLimit; + this._expandedChildrenLimit = InitialChildrenLimit; this._decorationsThrottler = new Common.Throttler(100); /** @@ -63,7 +63,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @param {!Elements.ElementsTreeElement} treeElement + * @param {!ElementsTreeElement} treeElement */ static animateOnDOMUpdate(treeElement) { const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name'); @@ -95,7 +95,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { */ static canShowInlineText(node) { if (node.contentDocument() || node.importedDocument() || node.templateContent() || - Elements.ElementsTreeElement.visibleShadowRoots(node).length || node.hasPseudoElements()) { + ElementsTreeElement.visibleShadowRoots(node).length || node.hasPseudoElements()) { return false; } if (node.nodeType() !== Node.ELEMENT_NODE) { @@ -514,7 +514,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { Common.UIString('Edit attribute'), this._startEditingAttribute.bind(this, attribute, event.target)); } this.populateNodeContextMenu(contextMenu); - Elements.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node()); + ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node()); this.populateScrollIntoView(contextMenu); contextMenu.viewSection().appendItem(Common.UIString('Focus'), async () => { await this._node.focus(); @@ -758,7 +758,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } const tagName = tagNameElement.textContent; - if (Elements.ElementsTreeElement.EditTagBlacklist.has(tagName.toLowerCase())) { + if (EditTagBlacklist.has(tagName.toLowerCase())) { return false; } @@ -791,7 +791,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {!Element} element * @param {string} newTagName - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function editingComitted(element, newTagName) { tagNameElement.removeEventListener('keyup', keyupListener, false); @@ -800,7 +800,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function editingCancelled() { tagNameElement.removeEventListener('keyup', keyupListener, false); @@ -853,7 +853,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {!UI.TextEditorFactory} factory - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function gotFactory(factory) { const editor = factory.createEditor({ @@ -883,7 +883,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function resize() { if (this._htmlEditElement) { @@ -893,7 +893,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function commit() { commitCallback(initialValue, this._editing.editor.text()); @@ -901,7 +901,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function dispose() { this._editing.editor.widget().element.removeEventListener('blur', this._editing.commit, true); @@ -932,7 +932,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {!Event} event - * @this {!Elements.ElementsTreeElement} + * @this {!ElementsTreeElement} */ function keydown(event) { const isMetaOrCtrl = UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!KeyboardEvent} */ (event)) && @@ -954,7 +954,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {?Protocol.Error=} error - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function moveToNextAttributeIfNeeded(error) { if (error) { @@ -1037,7 +1037,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function moveToNextAttributeIfNeeded() { if (moveDirection !== 'forward') { @@ -1081,7 +1081,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { delete this._editing; /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function callback() { this.updateTitle(); @@ -1249,7 +1249,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { return Promise.all(promises).then(updateDecorationsUI.bind(this)); /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function updateDecorationsUI() { this._decorationsElement.removeChildren(); @@ -1294,7 +1294,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {!Set} colors * @param {string} className - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function processColors(colors, className) { for (const color of colors) { @@ -1343,7 +1343,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {!Element} element * @param {string} value - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function setValueWithEntities(element, value) { result = this._convertWhitespaceToEntities(value); @@ -1373,7 +1373,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} * @param {string} value * @return {!Element} */ @@ -1391,7 +1391,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { const link = node.nodeName().toLowerCase() === 'a' ? UI.XLink.create(rewrittenHref, value, '', true /* preventClick */) : Components.Linkifier.linkifyURL(rewrittenHref, {text: value, preventClick: true}); - link[Elements.ElementsTreeElement.HrefSymbol] = rewrittenHref; + link[HrefSymbol] = rewrittenHref; return link; } @@ -1411,7 +1411,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { /** * @param {string} value * @return {!DocumentFragment} - * @this {!Elements.ElementsTreeElement} + * @this {!ElementsTreeElement} */ function linkifySrcset(value) { // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x". @@ -1578,7 +1578,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { break; } - if (Elements.ElementsTreeElement.canShowInlineText(node)) { + if (ElementsTreeElement.canShowInlineText(node)) { const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node'); const result = this._convertWhitespaceToEntities(node.firstChild.nodeValue()); textNodeElement.textContent = result.text; @@ -1594,7 +1594,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { break; } - if (this.treeOutline.isXMLMimeType || !Elements.ElementsTreeElement.ForbiddenClosingTagElements.has(tagName)) { + if (this.treeOutline.isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) { this._buildTagDOM(titleDOM, tagName, true, false, updateRecord); } break; @@ -1665,7 +1665,7 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { } /** - * @this {Elements.ElementsTreeElement} + * @this {ElementsTreeElement} */ function updateSearchHighlight() { delete this._highlightResult; @@ -1807,21 +1807,34 @@ Elements.ElementsTreeElement = class extends UI.TreeElement { const promise = Common.Revealer.reveal(this.node()); promise.then(() => UI.actionRegistry.action('elements.edit-as-html').execute()); } -}; +} -Elements.ElementsTreeElement.HrefSymbol = Symbol('ElementsTreeElement.Href'); - -Elements.ElementsTreeElement.InitialChildrenLimit = 500; +export const HrefSymbol = Symbol('ElementsTreeElement.Href'); +export const InitialChildrenLimit = 500; // A union of HTML4 and HTML5-Draft elements that explicitly // or implicitly (for HTML5) forbid the closing tag. -Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([ +export const ForbiddenClosingTagElements = new Set([ 'area', 'base', 'basefont', 'br', 'canvas', 'col', 'command', 'embed', 'frame', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr' ]); // These tags we do not allow editing their tag name. -Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']); +export const EditTagBlacklist = new Set(['html', 'head', 'body']); + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsTreeElement = ElementsTreeElement; + +Elements.ElementsTreeElement.HrefSymbol = HrefSymbol; +Elements.ElementsTreeElement.InitialChildrenLimit = InitialChildrenLimit; +Elements.ElementsTreeElement.ForbiddenClosingTagElements = ForbiddenClosingTagElements; +Elements.ElementsTreeElement.EditTagBlacklist = EditTagBlacklist; /** @typedef {{cancel: function(), commit: function(), resize: function(), editor:!UI.TextEditor}} */ Elements.MultilineEditorController; diff --git a/front_end/elements/ElementsTreeElementHighlighter.js b/front_end/elements/ElementsTreeElementHighlighter.js index 3786f5279a..c354e5788e 100644 --- a/front_end/elements/ElementsTreeElementHighlighter.js +++ b/front_end/elements/ElementsTreeElementHighlighter.js @@ -1,10 +1,11 @@ // Copyright (c) 2015 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. + /** * @unrestricted */ -Elements.ElementsTreeElementHighlighter = class { +export default class ElementsTreeElementHighlighter { /** * @param {!Elements.ElementsTreeOutline} treeOutline */ @@ -35,7 +36,7 @@ Elements.ElementsTreeElementHighlighter = class { this._treeOutline === Elements.ElementsTreeOutline.forDOMModel(domNode.domModel()) ? domNode : null; /** - * @this {Elements.ElementsTreeElementHighlighter} + * @this {ElementsTreeElementHighlighter} */ function callback() { this._highlightNodeInternal(this._pendingHighlightNode); @@ -95,4 +96,13 @@ Elements.ElementsTreeElementHighlighter = class { delete this._alreadyExpandedParentElement; delete this._pendingHighlightNode; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsTreeElementHighlighter = ElementsTreeElementHighlighter; diff --git a/front_end/elements/ElementsTreeOutline.js b/front_end/elements/ElementsTreeOutline.js index 22f5cb5091..268f9b3724 100644 --- a/front_end/elements/ElementsTreeOutline.js +++ b/front_end/elements/ElementsTreeOutline.js @@ -31,7 +31,7 @@ /** * @unrestricted */ -Elements.ElementsTreeOutline = class extends UI.TreeOutline { +export default class ElementsTreeOutline extends UI.TreeOutline { /** * @param {boolean=} omitRootDOMNode * @param {boolean=} selectEnabled @@ -83,7 +83,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { this._popoverHelper.setHasPadding(true); this._popoverHelper.setTimeout(0, 100); - /** @type {!Map} */ + /** @type {!Map} */ this._updateRecords = new Map(); /** @type {!Set} */ this._treeElementsBeingUpdated = new Set(); @@ -95,10 +95,10 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { /** * @param {!SDK.DOMModel} domModel - * @return {?Elements.ElementsTreeOutline} + * @return {?ElementsTreeOutline} */ static forDOMModel(domModel) { - return domModel[Elements.ElementsTreeOutline._treeOutlineSymbol] || null; + return domModel[ElementsTreeOutline._treeOutlineSymbol] || null; } _onShowHTMLCommentsChange() { @@ -292,7 +292,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { /** * @param {?Protocol.Error} error * @param {!Protocol.DOM.NodeId} nodeId - * @this {Elements.ElementsTreeOutline} + * @this {ElementsTreeOutline} */ function expandCallback(error, nodeId) { if (error) { @@ -421,14 +421,14 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { */ _selectedNodeChanged(focus) { this.dispatchEventToListeners( - Elements.ElementsTreeOutline.Events.SelectedNodeChanged, {node: this._selectedDOMNode, focus: focus}); + ElementsTreeOutline.Events.SelectedNodeChanged, {node: this._selectedDOMNode, focus: focus}); } /** * @param {!Array.} nodes */ _fireElementsTreeUpdated(nodes) { - this.dispatchEventToListeners(Elements.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes); + this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes); } /** @@ -654,7 +654,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { return; } - if (element instanceof Elements.ElementsTreeOutline.ShortcutTreeElement) { + if (element instanceof ShortcutTreeElement) { element.domModel().overlayModel().highlightInOverlay({deferredNode: element.deferredNode()}, 'all', showInfo); } } @@ -897,7 +897,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { treeElement.toggleEditAsHTML(editingFinished.bind(this), startEditing); /** - * @this {Elements.ElementsTreeOutline} + * @this {ElementsTreeOutline} * @param {boolean} success */ function editingFinished(success) { @@ -1046,7 +1046,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { * @param {!SDK.DOMModel} domModel */ wireToDOMModel(domModel) { - domModel[Elements.ElementsTreeOutline._treeOutlineSymbol] = this; + domModel[ElementsTreeOutline._treeOutlineSymbol] = this; domModel.addEventListener(SDK.DOMModel.Events.MarkersChanged, this._markersChanged, this); domModel.addEventListener(SDK.DOMModel.Events.NodeInserted, this._nodeInserted, this); domModel.addEventListener(SDK.DOMModel.Events.NodeRemoved, this._nodeRemoved, this); @@ -1071,17 +1071,17 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this._documentUpdated, this); domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this); domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this._distributedNodesChanged, this); - delete domModel[Elements.ElementsTreeOutline._treeOutlineSymbol]; + delete domModel[ElementsTreeOutline._treeOutlineSymbol]; } /** * @param {!SDK.DOMNode} node - * @return {!Elements.ElementsTreeOutline.UpdateRecord} + * @return {!UpdateRecord} */ _addUpdateRecord(node) { let record = this._updateRecords.get(node); if (!record) { - record = new Elements.ElementsTreeOutline.UpdateRecord(); + record = new UpdateRecord(); this._updateRecords.set(node, record); } return record; @@ -1089,7 +1089,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { /** * @param {!SDK.DOMNode} node - * @return {?Elements.ElementsTreeOutline.UpdateRecord} + * @return {?UpdateRecord} */ _updateRecordForHighlight(node) { if (!this._visible) { @@ -1391,7 +1391,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { return expandAllButtonElement; /** - * @this {Elements.ElementsTreeOutline} + * @this {ElementsTreeOutline} * @param {!Event} event */ function handleLoadAllChildren(event) { @@ -1540,7 +1540,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { // Insert shortcuts to distrubuted children. if (node.isInsertionPoint()) { for (const distributedNode of node.distributedNodes()) { - treeElement.appendChild(new Elements.ElementsTreeOutline.ShortcutTreeElement(distributedNode)); + treeElement.appendChild(new ShortcutTreeElement(distributedNode)); } } @@ -1562,16 +1562,12 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline { treeElement.updateDecorations(); } } -}; +} -Elements.ElementsTreeOutline._treeOutlineSymbol = Symbol('treeOutline'); - - -/** @typedef {{node: !SDK.DOMNode, isCut: boolean}} */ -Elements.ElementsTreeOutline.ClipboardData; +ElementsTreeOutline._treeOutlineSymbol = Symbol('treeOutline'); /** @override @suppress {checkPrototypalTypes} @enum {symbol} */ -Elements.ElementsTreeOutline.Events = { +ElementsTreeOutline.Events = { SelectedNodeChanged: Symbol('SelectedNodeChanged'), ElementsTreeUpdated: Symbol('ElementsTreeUpdated') }; @@ -1580,7 +1576,7 @@ Elements.ElementsTreeOutline.Events = { * @const * @type {!Object.} */ -Elements.ElementsTreeOutline.MappedCharToEntity = { +export const MappedCharToEntity = { '\xA0': 'nbsp', '\x93': '#147', // '\xAD': 'shy', @@ -1604,7 +1600,7 @@ Elements.ElementsTreeOutline.MappedCharToEntity = { /** * @unrestricted */ -Elements.ElementsTreeOutline.UpdateRecord = class { +export class UpdateRecord { /** * @param {string} attrName */ @@ -1686,12 +1682,12 @@ Elements.ElementsTreeOutline.UpdateRecord = class { hasRemovedChildren() { return !!this._hasRemovedChildren; } -}; +} /** * @implements {UI.Renderer} */ -Elements.ElementsTreeOutline.Renderer = class { +export class Renderer { /** * @override * @param {!Object} object @@ -1712,7 +1708,7 @@ Elements.ElementsTreeOutline.Renderer = class { return null; } - const treeOutline = new Elements.ElementsTreeOutline( + const treeOutline = new ElementsTreeOutline( /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true); treeOutline.rootDOMNode = node; if (!treeOutline.firstChild().isExpandable()) { @@ -1723,12 +1719,12 @@ Elements.ElementsTreeOutline.Renderer = class { treeOutline.setShowSelectionOnKeyboardFocus(/* show: */ true, /* preventTabOrder: */ true); return {node: treeOutline.element, tree: treeOutline}; } -}; +} /** * @unrestricted */ -Elements.ElementsTreeOutline.ShortcutTreeElement = class extends UI.TreeElement { +export class ShortcutTreeElement extends UI.TreeElement { /** * @param {!SDK.DOMNodeShortcut} nodeShortcut */ @@ -1795,7 +1791,7 @@ Elements.ElementsTreeOutline.ShortcutTreeElement = class extends UI.TreeElement this._nodeShortcut.deferredNode.resolve(resolved.bind(this)); /** * @param {?SDK.DOMNode} node - * @this {Elements.ElementsTreeOutline.ShortcutTreeElement} + * @this {ShortcutTreeElement} */ function resolved(node) { if (node) { @@ -1805,4 +1801,27 @@ Elements.ElementsTreeOutline.ShortcutTreeElement = class extends UI.TreeElement } return true; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.ElementsTreeOutline = ElementsTreeOutline; + +Elements.ElementsTreeOutline.MappedCharToEntity = MappedCharToEntity; + +/** @constructor */ +Elements.ElementsTreeOutline.UpdateRecord = UpdateRecord; + +/** @constructor */ +Elements.ElementsTreeOutline.Renderer = Renderer; + +/** @constructor */ +Elements.ElementsTreeOutline.ShortcutTreeElement = ShortcutTreeElement; + +/** @typedef {{node: !SDK.DOMNode, isCut: boolean}} */ +Elements.ElementsTreeOutline.ClipboardData; diff --git a/front_end/elements/EventListenersWidget.js b/front_end/elements/EventListenersWidget.js index 2f897dd0ea..0dcba06883 100644 --- a/front_end/elements/EventListenersWidget.js +++ b/front_end/elements/EventListenersWidget.js @@ -26,11 +26,12 @@ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ + /** * @implements {UI.ToolbarItem.ItemsProvider} * @unrestricted */ -Elements.EventListenersWidget = class extends UI.ThrottledWidget { +export default class EventListenersWidget extends UI.ThrottledWidget { constructor() { super(); this._toolbarItems = []; @@ -38,8 +39,8 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { this._showForAncestorsSetting = Common.settings.moduleSetting('showEventListenersForAncestors'); this._showForAncestorsSetting.addChangeListener(this.update.bind(this)); - this._dispatchFilterBySetting = Common.settings.createSetting( - 'eventListenerDispatchFilterType', Elements.EventListenersWidget.DispatchFilterBy.All); + this._dispatchFilterBySetting = + Common.settings.createSetting('eventListenerDispatchFilterType', DispatchFilterBy.All); this._dispatchFilterBySetting.addChangeListener(this.update.bind(this)); this._showFrameworkListenersSetting = Common.settings.createSetting('showFrameowkrListeners', true); @@ -60,7 +61,7 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { /** * @param {string} name * @param {string} value - * @this {Elements.EventListenersWidget} + * @this {EventListenersWidget} */ function addDispatchFilterOption(name, value) { const option = dispatchFilter.createOption(name, value); @@ -68,11 +69,9 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { dispatchFilter.select(option); } } - addDispatchFilterOption.call(this, Common.UIString('All'), Elements.EventListenersWidget.DispatchFilterBy.All); - addDispatchFilterOption.call( - this, Common.UIString('Passive'), Elements.EventListenersWidget.DispatchFilterBy.Passive); - addDispatchFilterOption.call( - this, Common.UIString('Blocking'), Elements.EventListenersWidget.DispatchFilterBy.Blocking); + addDispatchFilterOption.call(this, Common.UIString('All'), DispatchFilterBy.All); + addDispatchFilterOption.call(this, Common.UIString('Passive'), DispatchFilterBy.Passive); + addDispatchFilterOption.call(this, Common.UIString('Blocking'), DispatchFilterBy.Blocking); dispatchFilter.setMaxWidth(200); this._toolbarItems.push(dispatchFilter); this._toolbarItems.push(new UI.ToolbarSettingCheckbox( @@ -89,8 +88,7 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { */ doUpdate() { if (this._lastRequestedNode) { - this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup( - Elements.EventListenersWidget._objectGroupName); + this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(_objectGroupName); delete this._lastRequestedNode; } const node = UI.context.flavor(SDK.DOMNode); @@ -102,11 +100,11 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { this._lastRequestedNode = node; const selectedNodeOnly = !this._showForAncestorsSetting.get(); const promises = []; - promises.push(node.resolveToObject(Elements.EventListenersWidget._objectGroupName)); + promises.push(node.resolveToObject(_objectGroupName)); if (!selectedNodeOnly) { let currentNode = node.parentNode; while (currentNode) { - promises.push(currentNode.resolveToObject(Elements.EventListenersWidget._objectGroupName)); + promises.push(currentNode.resolveToObject(_objectGroupName)); currentNode = currentNode.parentNode; } promises.push(this._windowObjectInNodeContext(node)); @@ -133,10 +131,8 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { _showFrameworkListenersChanged() { const dispatchFilter = this._dispatchFilterBySetting.get(); - const showPassive = dispatchFilter === Elements.EventListenersWidget.DispatchFilterBy.All || - dispatchFilter === Elements.EventListenersWidget.DispatchFilterBy.Passive; - const showBlocking = dispatchFilter === Elements.EventListenersWidget.DispatchFilterBy.All || - dispatchFilter === Elements.EventListenersWidget.DispatchFilterBy.Blocking; + const showPassive = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Passive; + const showBlocking = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Blocking; this._eventListenersView.showFrameworkListeners( this._showFrameworkListenersSetting.get(), showPassive, showBlocking); } @@ -162,7 +158,7 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { .evaluate( { expression: 'self', - objectGroup: Elements.EventListenersWidget._objectGroupName, + objectGroup: _objectGroupName, includeCommandLineAPI: false, silent: true, returnByValue: false, @@ -175,12 +171,24 @@ Elements.EventListenersWidget = class extends UI.ThrottledWidget { _eventListenersArrivedForTest() { } -}; +} -Elements.EventListenersWidget.DispatchFilterBy = { +export const DispatchFilterBy = { All: 'All', Blocking: 'Blocking', Passive: 'Passive' }; -Elements.EventListenersWidget._objectGroupName = 'event-listeners-panel'; +export const _objectGroupName = 'event-listeners-panel'; + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.EventListenersWidget = EventListenersWidget; + +Elements.EventListenersWidget.DispatchFilterBy = DispatchFilterBy; +Elements.EventListenersWidget._objectGroupName = _objectGroupName; diff --git a/front_end/elements/InspectElementModeController.js b/front_end/elements/InspectElementModeController.js index 900c89d585..2b57de06f7 100644 --- a/front_end/elements/InspectElementModeController.js +++ b/front_end/elements/InspectElementModeController.js @@ -25,11 +25,12 @@ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ + /** * @implements {SDK.SDKModelObserver} * @unrestricted */ -Elements.InspectElementModeController = class { +export default class InspectElementModeController { /** * @suppressGlobalPropertiesCheck */ @@ -133,13 +134,13 @@ Elements.InspectElementModeController = class { _showDetailedInspectTooltipChanged() { this._setMode(this._mode); } -}; +} /** * @implements {UI.ActionDelegate} * @unrestricted */ -Elements.InspectElementModeController.ToggleSearchActionDelegate = class { +export class ToggleSearchActionDelegate { /** * @override * @param {!UI.Context} context @@ -147,18 +148,32 @@ Elements.InspectElementModeController.ToggleSearchActionDelegate = class { * @return {boolean} */ handleAction(context, actionId) { - if (!Elements.inspectElementModeController) { + if (!inspectElementModeController) { return false; } if (actionId === 'elements.toggle-element-search') { - Elements.inspectElementModeController._toggleInspectMode(); + inspectElementModeController._toggleInspectMode(); } else if (actionId === 'elements.capture-area-screenshot') { - Elements.inspectElementModeController._captureScreenshotMode(); + inspectElementModeController._captureScreenshotMode(); } return true; } -}; +} -/** @type {?Elements.InspectElementModeController} */ -Elements.inspectElementModeController = - Root.Runtime.queryParam('isSharedWorker') ? null : new Elements.InspectElementModeController(); +/** @type {?InspectElementModeController} */ +export const inspectElementModeController = + Root.Runtime.queryParam('isSharedWorker') ? null : new InspectElementModeController(); + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.InspectElementModeController = InspectElementModeController; + +/** @constructor */ +Elements.InspectElementModeController.ToggleSearchActionDelegate = ToggleSearchActionDelegate; + +Elements.inspectElementModeController = inspectElementModeController; diff --git a/front_end/elements/MarkerDecorator.js b/front_end/elements/MarkerDecorator.js index a39c9c7dab..8632af270c 100644 --- a/front_end/elements/MarkerDecorator.js +++ b/front_end/elements/MarkerDecorator.js @@ -5,21 +5,19 @@ /** * @interface */ -Elements.MarkerDecorator = function() {}; - -Elements.MarkerDecorator.prototype = { +export default class MarkerDecorator { /** * @param {!SDK.DOMNode} node * @return {?{title: string, color: string}} */ decorate(node) {} -}; +} /** - * @implements {Elements.MarkerDecorator} + * @implements {MarkerDecorator} * @unrestricted */ -Elements.GenericDecorator = class { +export class GenericDecorator { /** * @param {!Root.Runtime.Extension} extension */ @@ -36,4 +34,15 @@ Elements.GenericDecorator = class { decorate(node) { return {title: this._title, color: this._color}; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @interface */ +Elements.MarkerDecorator = MarkerDecorator; + +Elements.GenericDecorator = GenericDecorator; diff --git a/front_end/elements/MetricsSidebarPane.js b/front_end/elements/MetricsSidebarPane.js index e6a08e0c8a..0d2d18f75a 100644 --- a/front_end/elements/MetricsSidebarPane.js +++ b/front_end/elements/MetricsSidebarPane.js @@ -29,7 +29,7 @@ /** * @unrestricted */ -Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { +export default class MetricsSidebarPane extends Elements.ElementsSidebarPane { constructor() { super(); this.registerRequiredCSS('elements/metricsSidebarPane.css'); @@ -60,7 +60,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { /** * @param {?Map.} style - * @this {Elements.MetricsSidebarPane} + * @this {MetricsSidebarPane} */ function callback(style) { if (!style || this.node() !== node) { @@ -70,7 +70,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { } /** * @param {?SDK.CSSModel.InlineStyleResult} inlineStyleResult - * @this {Elements.MetricsSidebarPane} + * @this {MetricsSidebarPane} */ function inlineStyleCallback(inlineStyleResult) { if (inlineStyleResult && this.node() === node) { @@ -156,7 +156,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { * @param {string} name * @param {string} side * @param {string} suffix - * @this {Elements.MetricsSidebarPane} + * @this {MetricsSidebarPane} */ function createBoxPartElement(style, name, side, suffix) { const propertyName = (name !== 'position' ? name + '-' : '') + side + suffix; @@ -343,7 +343,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { /** * @param {string} originalValue * @param {string} replacementString - * @this {Elements.MetricsSidebarPane} + * @this {MetricsSidebarPane} */ function finishHandler(originalValue, replacementString) { this._applyUserInput(element, replacementString, originalValue, context, false); @@ -454,7 +454,7 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { /** * @param {boolean} success - * @this {Elements.MetricsSidebarPane} + * @this {MetricsSidebarPane} */ function callback(success) { if (!success) { @@ -478,4 +478,13 @@ Elements.MetricsSidebarPane = class extends Elements.ElementsSidebarPane { this.editingEnded(element, context); this._applyUserInput(element, userInput, previousContent, context, true); } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.MetricsSidebarPane = MetricsSidebarPane; diff --git a/front_end/elements/NodeStackTraceWidget.js b/front_end/elements/NodeStackTraceWidget.js index 1fb6dc2492..d220c38050 100644 --- a/front_end/elements/NodeStackTraceWidget.js +++ b/front_end/elements/NodeStackTraceWidget.js @@ -5,7 +5,7 @@ /** * @unrestricted */ -Elements.NodeStackTraceWidget = class extends UI.ThrottledWidget { +export default class NodeStackTraceWidget extends UI.ThrottledWidget { constructor() { super(true /* isWebComponent */); this.registerRequiredCSS('elements/nodeStackTraceWidget.css'); @@ -14,7 +14,7 @@ Elements.NodeStackTraceWidget = class extends UI.ThrottledWidget { this._noStackTraceElement.textContent = ls`No stack trace available`; this._creationStackTraceElement = this.contentElement.createChild('div', 'stack-trace'); - this._linkifier = new Components.Linkifier(Elements.NodeStackTraceWidget.MaxLengthForLinks); + this._linkifier = new Components.Linkifier(MaxLengthForLinks); } /** @@ -60,10 +60,21 @@ Elements.NodeStackTraceWidget = class extends UI.ThrottledWidget { this._creationStackTraceElement.classList.add('hidden'); } } -}; +} /** * @const * @type {number} */ -Elements.NodeStackTraceWidget.MaxLengthForLinks = 40; +export const MaxLengthForLinks = 40; + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.NodeStackTraceWidget = NodeStackTraceWidget; + +Elements.NodeStackTraceWidget.MaxLengthForLinks = MaxLengthForLinks; diff --git a/front_end/elements/PlatformFontsWidget.js b/front_end/elements/PlatformFontsWidget.js index 78ffdc0f33..d71d852343 100644 --- a/front_end/elements/PlatformFontsWidget.js +++ b/front_end/elements/PlatformFontsWidget.js @@ -31,7 +31,7 @@ /** * @unrestricted */ -Elements.PlatformFontsWidget = class extends UI.ThrottledWidget { +export default class PlatformFontsWidget extends UI.ThrottledWidget { /** * @param {!Elements.ComputedStyleModel} sharedModel */ @@ -103,4 +103,13 @@ Elements.PlatformFontsWidget = class extends UI.ThrottledWidget { usage === 1 ? Common.UIString('(%d glyph)', usage) : Common.UIString('(%d glyphs)', usage); } } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.PlatformFontsWidget = PlatformFontsWidget; diff --git a/front_end/elements/PropertiesWidget.js b/front_end/elements/PropertiesWidget.js index 186227f13d..3d23c66181 100644 --- a/front_end/elements/PropertiesWidget.js +++ b/front_end/elements/PropertiesWidget.js @@ -30,7 +30,7 @@ /** * @unrestricted */ -Elements.PropertiesWidget = class extends UI.ThrottledWidget { +export default class PropertiesWidget extends UI.ThrottledWidget { constructor() { super(true /* isWebComponent */); this.registerRequiredCSS('elements/propertiesWidget.css'); @@ -71,7 +71,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget { */ async doUpdate() { if (this._lastRequestedNode) { - this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(Elements.PropertiesWidget._objectGroupName); + this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(_objectGroupName); delete this._lastRequestedNode; } @@ -81,7 +81,7 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget { } this._lastRequestedNode = this._node; - const object = await this._node.resolveToObject(Elements.PropertiesWidget._objectGroupName); + const object = await this._node.resolveToObject(_objectGroupName); if (!object) { return; } @@ -167,6 +167,17 @@ Elements.PropertiesWidget = class extends UI.ThrottledWidget { } this.update(); } -}; +} -Elements.PropertiesWidget._objectGroupName = 'properties-sidebar-pane'; +export const _objectGroupName = 'properties-sidebar-pane'; + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.PropertiesWidget = PropertiesWidget; + +Elements.PropertiesWidget._objectGroupName = _objectGroupName; diff --git a/front_end/elements/StylePropertyHighlighter.js b/front_end/elements/StylePropertyHighlighter.js index 91092f6456..a94cb01739 100644 --- a/front_end/elements/StylePropertyHighlighter.js +++ b/front_end/elements/StylePropertyHighlighter.js @@ -5,7 +5,7 @@ /** * @unrestricted */ -Elements.StylePropertyHighlighter = class { +export default class StylePropertyHighlighter { /** * @param {!Elements.StylesSidebarPane} ssp * @param {!SDK.CSSProperty} cssProperty @@ -51,4 +51,13 @@ Elements.StylePropertyHighlighter = class { ], {duration: 2000, easing: 'cubic-bezier(0, 0, 0.2, 1)'}); } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.StylePropertyHighlighter = StylePropertyHighlighter; diff --git a/front_end/elements/StylePropertyTreeElement.js b/front_end/elements/StylePropertyTreeElement.js index e9f521fdfa..7c5736fc15 100644 --- a/front_end/elements/StylePropertyTreeElement.js +++ b/front_end/elements/StylePropertyTreeElement.js @@ -2,7 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -Elements.StylePropertyTreeElement = class extends UI.TreeElement { +export default class StylePropertyTreeElement extends UI.TreeElement { /** * @param {!Elements.StylesSidebarPane} stylesPane * @param {!SDK.CSSMatchedStyles} matchedStyles @@ -376,7 +376,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { this._matchedStyles.propertyState(longhandProperties[i]) === SDK.CSSMatchedStyles.PropertyState.Overloaded; } - const item = new Elements.StylePropertyTreeElement( + const item = new StylePropertyTreeElement( this._parentPane, this._matchedStyles, longhandProperties[i], false, inherited, overloaded, false); this.appendChild(item); } @@ -390,7 +390,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { this.listItemElement.addEventListener('mousedown', event => { if (event.which === 1) { - this._parentPane[Elements.StylePropertyTreeElement.ActiveSymbol] = this; + this._parentPane[ActiveSymbol] = this; } }, false); this.listItemElement.addEventListener('mouseup', this._mouseUp.bind(this)); @@ -517,8 +517,8 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { * @param {!Event} event */ _mouseUp(event) { - const activeTreeElement = this._parentPane[Elements.StylePropertyTreeElement.ActiveSymbol]; - this._parentPane[Elements.StylePropertyTreeElement.ActiveSymbol] = null; + const activeTreeElement = this._parentPane[ActiveSymbol]; + this._parentPane[ActiveSymbol] = null; if (activeTreeElement !== this) { return; } @@ -666,7 +666,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { /** * @param {!Elements.StylePropertyTreeElement.Context} context * @param {!Event} event - * @this {Elements.StylePropertyTreeElement} + * @this {StylePropertyTreeElement} */ function pasteHandler(context, event) { const data = event.clipboardData.getData('Text'); @@ -699,7 +699,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { /** * @param {!Elements.StylePropertyTreeElement.Context} context * @param {!Event} event - * @this {Elements.StylePropertyTreeElement} + * @this {StylePropertyTreeElement} */ function blurListener(context, event) { let text = event.target.textContent; @@ -912,7 +912,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { /** * @param {string} moveDirection - * @return {?Elements.StylePropertyTreeElement} + * @return {?StylePropertyTreeElement} */ _findSibling(moveDirection) { let target = this; @@ -996,7 +996,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { * @param {boolean} alreadyNew * @param {boolean} valueChanged * @param {!Elements.StylePropertiesSection} section - * @this {Elements.StylePropertyTreeElement} + * @this {StylePropertyTreeElement} */ function moveToNextCallback(alreadyNew, valueChanged, section) { if (!moveDirection) { @@ -1170,7 +1170,20 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { isEventWithinDisclosureTriangle(event) { return event.target === this._expandElement; } -}; +} + +export const ActiveSymbol = Symbol('ActiveSymbol'); + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.StylePropertyTreeElement = StylePropertyTreeElement; + +Elements.StylePropertyTreeElement.ActiveSymbol = ActiveSymbol; /** @typedef {{ * expanded: boolean, @@ -1183,4 +1196,3 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement { * }} */ Elements.StylePropertyTreeElement.Context; -Elements.StylePropertyTreeElement.ActiveSymbol = Symbol('ActiveSymbol'); diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js index d6e199d49d..215109bb29 100644 --- a/front_end/elements/StylesSidebarPane.js +++ b/front_end/elements/StylesSidebarPane.js @@ -27,7 +27,7 @@ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { +export default class StylesSidebarPane extends Elements.ElementsSidebarPane { constructor() { super(true /* delegatesFocus */); this.setMinimumSize(96, 26); @@ -56,7 +56,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { this._sectionsContainer.addEventListener('focusout', this._sectionsContainerFocusChanged.bind(this), false); this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper(); - this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLinkLength, /* useLinkDecorator */ true); + this._linkifier = new Components.Linkifier(_maxLinkLength, /* useLinkDecorator */ true); /** @type {?Elements.StylePropertyHighlighter} */ this._decorator = null; this._userOperation = false; @@ -67,10 +67,10 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { this.contentElement.classList.add('styles-pane'); - /** @type {!Array} */ + /** @type {!Array} */ this._sectionBlocks = []; this._needsForceUpdate = false; - Elements.StylesSidebarPane._instance = this; + StylesSidebarPane._instance = this; UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this); this.contentElement.addEventListener('copy', this._clipboardCopy.bind(this)); this._resizeThrottler = new Common.Throttler(100); @@ -97,7 +97,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { static createExclamationMark(property) { const exclamationElement = createElement('span', 'dt-icon-label'); exclamationElement.className = 'exclamation-mark'; - if (!Elements.StylesSidebarPane.ignoreErrorsForProperty(property)) { + if (!StylesSidebarPane.ignoreErrorsForProperty(property)) { exclamationElement.type = 'smallicon-warning'; } exclamationElement.title = SDK.cssMetadata().isCSSPropertyName(property.name) ? @@ -316,7 +316,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } /** - * @param {!Elements.StylePropertiesSection} editedSection + * @param {!StylePropertiesSection} editedSection * @param {!Elements.StylePropertyTreeElement=} editedTreeElement */ _refreshUpdate(editedSection, editedTreeElement) { @@ -394,7 +394,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { /** * @param {?SDK.CSSMatchedStyles} matchedStyles * @return {?SDK.CSSMatchedStyles} - * @this {Elements.StylesSidebarPane} + * @this {StylesSidebarPane} */ function validateStyles(matchedStyles) { return matchedStyles && matchedStyles.node() === this.node() ? matchedStyles : null; @@ -526,18 +526,18 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort()); for (const pseudoType of pseudoTypes) { - const block = Elements.SectionBlock.createPseudoTypeBlock(pseudoType); + const block = SectionBlock.createPseudoTypeBlock(pseudoType); for (const style of matchedStyles.pseudoStyles(pseudoType)) { - const section = new Elements.StylePropertiesSection(this, matchedStyles, style); + const section = new StylePropertiesSection(this, matchedStyles, style); block.sections.push(section); } this._sectionBlocks.push(block); } for (const keyframesRule of matchedStyles.keyframes()) { - const block = Elements.SectionBlock.createKeyframesBlock(keyframesRule.name().text); + const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text); for (const keyframe of keyframesRule.keyframes()) { - block.sections.push(new Elements.KeyframePropertiesSection(this, matchedStyles, keyframe.style)); + block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style)); } this._sectionBlocks.push(block); } @@ -584,19 +584,19 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { /** * @param {!SDK.CSSMatchedStyles} matchedStyles - * @return {!Promise>} + * @return {!Promise>} */ async _rebuildSectionsForMatchedStyleRules(matchedStyles) { - const blocks = [new Elements.SectionBlock(null)]; + const blocks = [new SectionBlock(null)]; let lastParentNode = null; for (const style of matchedStyles.nodeStyles()) { const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null; if (parentNode && parentNode !== lastParentNode) { lastParentNode = parentNode; - const block = await Elements.SectionBlock._createInheritedNodeBlock(lastParentNode); + const block = await SectionBlock._createInheritedNodeBlock(lastParentNode); blocks.push(block); } - const section = new Elements.StylePropertiesSection(this, matchedStyles, style); + const section = new StylePropertiesSection(this, matchedStyles, style); blocks.peekLast().sections.push(section); } return blocks; @@ -631,13 +631,13 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } /** - * @param {!Elements.StylePropertiesSection} insertAfterSection + * @param {!StylePropertiesSection} insertAfterSection * @param {string} styleSheetId * @param {!TextUtils.TextRange} ruleLocation */ _addBlankSection(insertAfterSection, styleSheetId, ruleLocation) { const node = this.node(); - const blankSection = new Elements.BlankStylePropertiesSection( + const blankSection = new BlankStylePropertiesSection( this, insertAfterSection._matchedStyles, node ? node.simpleSelector() : '', styleSheetId, ruleLocation, insertAfterSection._style); @@ -654,7 +654,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } /** - * @param {!Elements.StylePropertiesSection} section + * @param {!StylePropertiesSection} section */ removeSection(section) { for (const block of this._sectionBlocks) { @@ -691,7 +691,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } /** - * @return {!Array} + * @return {!Array} */ allSections() { let sections = []; @@ -716,7 +716,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar'); const filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box'); const filterInput = - Elements.StylesSidebarPane.createPropertyFilterElement(ls`Filter`, hbox, this._onFilterChanged.bind(this)); + StylesSidebarPane.createPropertyFilterElement(ls`Filter`, hbox, this._onFilterChanged.bind(this)); UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Styles')); filterContainerElement.appendChild(filterInput); const toolbar = new UI.Toolbar('styles-pane-toolbar', hbox); @@ -781,7 +781,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { this._toolbarPaneElement.addEventListener('animationend', listener, false); /** - * @this {!Elements.StylesSidebarPane} + * @this {!StylesSidebarPane} */ function onAnimationEnd() { this._toolbarPaneElement.style.removeProperty('animation-name'); @@ -803,11 +803,11 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { } } } -}; +} -Elements.StylesSidebarPane._maxLinkLength = 23; +export const _maxLinkLength = 23; -Elements.SectionBlock = class { +export class SectionBlock { /** * @param {?Element} titleElement */ @@ -818,29 +818,29 @@ Elements.SectionBlock = class { /** * @param {!Protocol.DOM.PseudoType} pseudoType - * @return {!Elements.SectionBlock} + * @return {!SectionBlock} */ static createPseudoTypeBlock(pseudoType) { const separatorElement = createElement('div'); separatorElement.className = 'sidebar-separator'; separatorElement.textContent = Common.UIString('Pseudo ::%s element', pseudoType); - return new Elements.SectionBlock(separatorElement); + return new SectionBlock(separatorElement); } /** * @param {string} keyframesName - * @return {!Elements.SectionBlock} + * @return {!SectionBlock} */ static createKeyframesBlock(keyframesName) { const separatorElement = createElement('div'); separatorElement.className = 'sidebar-separator'; separatorElement.textContent = `@keyframes ${keyframesName}`; - return new Elements.SectionBlock(separatorElement); + return new SectionBlock(separatorElement); } /** * @param {!SDK.DOMNode} node - * @return {!Promise} + * @return {!Promise} */ static async _createInheritedNodeBlock(node) { const separatorElement = createElement('div'); @@ -848,7 +848,7 @@ Elements.SectionBlock = class { separatorElement.createTextChild(ls`Inherited from${' '}`); const link = await Common.Linkifier.linkify(node, {preventKeyboardFocus: true}); separatorElement.appendChild(link); - return new Elements.SectionBlock(separatorElement); + return new SectionBlock(separatorElement); } /** @@ -871,11 +871,11 @@ Elements.SectionBlock = class { titleElement() { return this._titleElement; } -}; +} -Elements.StylePropertiesSection = class { +export class StylePropertiesSection { /** - * @param {!Elements.StylesSidebarPane} parentPane + * @param {!StylesSidebarPane} parentPane * @param {!SDK.CSSMatchedStyles} matchedStyles * @param {!SDK.CSSStyleDeclaration} style */ @@ -940,7 +940,7 @@ Elements.StylePropertiesSection = class { if (rule.isUserAgent() || rule.isInjected()) { this.editable = false; } else { - // Check this is a real CSSRule, not a bogus object coming from Elements.BlankStylePropertiesSection. + // Check this is a real CSSRule, not a bogus object coming from BlankStylePropertiesSection. if (rule.styleSheetId) { const header = rule.cssModel().styleSheetHeaderForId(rule.styleSheetId); this.navigable = !header.isAnonymousInlineStyleSheet(); @@ -984,7 +984,7 @@ Elements.StylePropertiesSection = class { const header = rule.styleSheetId ? matchedStyles.cssModel().styleSheetHeaderForId(rule.styleSheetId) : null; if (ruleLocation && rule.styleSheetId && header && !header.isAnonymousInlineStyleSheet()) { - return Elements.StylePropertiesSection._linkifyRuleLocation( + return StylePropertiesSection._linkifyRuleLocation( matchedStyles.cssModel(), linkifier, rule.styleSheetId, ruleLocation); } @@ -1239,7 +1239,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ firstSibling() { const parent = this.element.parentElement; @@ -1259,7 +1259,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ lastSibling() { const parent = this.element.parentElement; @@ -1279,7 +1279,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ nextSibling() { let curElement = this.element; @@ -1291,7 +1291,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ previousSibling() { let curElement = this.element; @@ -1430,7 +1430,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ nextEditableSibling() { let curSection = this; @@ -1449,7 +1449,7 @@ Elements.StylePropertiesSection = class { } /** - * @return {?Elements.StylePropertiesSection} + * @return {?StylePropertiesSection} */ previousEditableSibling() { let curSection = this; @@ -1525,8 +1525,7 @@ Elements.StylePropertiesSection = class { const style = this._style; let count = 0; const properties = style.leadingProperties(); - const maxProperties = - Elements.StylePropertiesSection.MaxProperties + properties.length - this._originalPropertiesCount; + const maxProperties = StylePropertiesSection.MaxProperties + properties.length - this._originalPropertiesCount; for (const property of properties) { if (!this._forceShowAll && count >= maxProperties) { @@ -1819,7 +1818,7 @@ Elements.StylePropertiesSection = class { /** * @param {boolean} success - * @this {Elements.StylePropertiesSection} + * @this {StylePropertiesSection} */ function userCallback(success) { if (success) { @@ -1867,7 +1866,7 @@ Elements.StylePropertiesSection = class { return; } const rawLocation = new SDK.CSSLocation(header, rule.lineNumberInSource(index), rule.columnNumberInSource(index)); - Elements.StylePropertiesSection._revealSelectorSource(rawLocation, focus); + StylePropertiesSection._revealSelectorSource(rawLocation, focus); } /** @@ -1969,7 +1968,7 @@ Elements.StylePropertiesSection = class { } /** - * @this {Elements.StylePropertiesSection} + * @this {StylePropertiesSection} */ function headerTextCommitted() { this._parentPane.setUserOperation(false); @@ -1992,7 +1991,7 @@ Elements.StylePropertiesSection = class { * @param {!SDK.CSSStyleRule} rule * @param {boolean} success * @return {!Promise} - * @this {Elements.StylePropertiesSection} + * @this {StylePropertiesSection} */ function onSelectorsUpdated(rule, success) { if (!success) { @@ -2003,7 +2002,7 @@ Elements.StylePropertiesSection = class { /** * @param {!SDK.CSSStyleRule} rule - * @this {Elements.StylePropertiesSection} + * @this {StylePropertiesSection} */ function updateSourceRanges(rule) { const doesAffectSelectedNode = this._matchedStyles.matchingSelectors(rule).length > 0; @@ -2026,7 +2025,7 @@ Elements.StylePropertiesSection = class { _updateRuleOrigin() { this._selectorRefElement.removeChildren(); - this._selectorRefElement.appendChild(Elements.StylePropertiesSection.createRuleOriginNode( + this._selectorRefElement.appendChild(StylePropertiesSection.createRuleOriginNode( this._matchedStyles, this._parentPane._linkifier, this._style.parentRule)); } @@ -2041,11 +2040,13 @@ Elements.StylePropertiesSection = class { // This is overridden by BlankStylePropertiesSection. this._markSelectorMatches(); } -}; +} -Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSection { +StylePropertiesSection.MaxProperties = 50; + +export class BlankStylePropertiesSection extends StylePropertiesSection { /** - * @param {!Elements.StylesSidebarPane} stylesPane + * @param {!StylesSidebarPane} stylesPane * @param {!SDK.CSSMatchedStyles} matchedStyles * @param {string} defaultSelectorText * @param {string} styleSheetId @@ -2060,7 +2061,7 @@ Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec this._ruleLocation = ruleLocation; this._styleSheetId = styleSheetId; this._selectorRefElement.removeChildren(); - this._selectorRefElement.appendChild(Elements.StylePropertiesSection._linkifyRuleLocation( + this._selectorRefElement.appendChild(StylePropertiesSection._linkifyRuleLocation( cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation())); if (insertAfterStyle && insertAfterStyle.parentRule) { this._createMediaList(insertAfterStyle.parentRule.media); @@ -2109,7 +2110,7 @@ Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec /** * @param {?SDK.CSSStyleRule} newRule * @return {!Promise} - * @this {Elements.BlankStylePropertiesSection} + * @this {BlankStylePropertiesSection} */ function onRuleAdded(newRule) { if (!newRule) { @@ -2123,7 +2124,7 @@ Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec /** * @param {!SDK.CSSStyleRule} newRule - * @this {Elements.BlankStylePropertiesSection} + * @this {BlankStylePropertiesSection} */ function onAddedToCascade(newRule) { const doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors(newRule).length > 0; @@ -2176,15 +2177,14 @@ Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec _makeNormal(newRule) { this.element.classList.remove('blank-section'); this._style = newRule.style; - // FIXME: replace this instance by a normal Elements.StylePropertiesSection. + // FIXME: replace this instance by a normal StylePropertiesSection. this._normal = true; } -}; -Elements.StylePropertiesSection.MaxProperties = 50; +} -Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSection { +export class KeyframePropertiesSection extends StylePropertiesSection { /** - * @param {!Elements.StylesSidebarPane} stylesPane + * @param {!StylesSidebarPane} stylesPane * @param {!SDK.CSSMatchedStyles} matchedStyles * @param {!SDK.CSSStyleDeclaration} style */ @@ -2210,7 +2210,7 @@ Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSecti _setHeaderText(rule, newContent) { /** * @param {boolean} success - * @this {Elements.KeyframePropertiesSection} + * @this {KeyframePropertiesSection} */ function updateSourceRanges(success) { if (!success) { @@ -2263,9 +2263,9 @@ Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSecti */ _highlight() { } -}; +} -Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { +export class CSSPropertyPrompt extends UI.TextPrompt { /** * @param {!Elements.StylePropertyTreeElement} treeElement * @param {boolean} isEditingName @@ -2372,7 +2372,7 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { /** * @param {string} originalValue * @param {string} replacementString - * @this {Elements.StylesSidebarPane.CSSPropertyPrompt} + * @this {CSSPropertyPrompt} */ function finishHandler(originalValue, replacementString) { // Synthesize property text disregarding any comments, custom whitespace etc. @@ -2385,7 +2385,7 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { * @param {number} number * @param {string} suffix * @return {string} - * @this {Elements.StylesSidebarPane.CSSPropertyPrompt} + * @this {CSSPropertyPrompt} */ function customNumberHandler(prefix, number, suffix) { if (number !== 0 && !suffix.length && SDK.cssMetadata().isLengthProperty(this._treeElement.property.name)) { @@ -2483,7 +2483,7 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { * @param {string} completion * @param {boolean} variable * @param {boolean=} nameValue - * @this {Elements.StylesSidebarPane.CSSPropertyPrompt} + * @this {CSSPropertyPrompt} */ function filterCompletions(completion, variable, nameValue) { const index = completion.toLowerCase().indexOf(lowerQuery); @@ -2521,9 +2521,9 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { return swatch; } } -}; +} -Elements.StylesSidebarPropertyRenderer = class { +export class StylesSidebarPropertyRenderer { /** * @param {?SDK.CSSRule} rule * @param {?SDK.DOMNode} node @@ -2660,12 +2660,12 @@ Elements.StylesSidebarPropertyRenderer = class { container.createTextChild(')'); return container; } -}; +} /** * @implements {UI.ToolbarItem.Provider} */ -Elements.StylesSidebarPane.ButtonProvider = class { +export class ButtonProvider { constructor() { this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'largeicon-add'); this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked, this); @@ -2677,7 +2677,7 @@ Elements.StylesSidebarPane.ButtonProvider = class { onNodeChanged.call(this); /** - * @this {Elements.StylesSidebarPane.ButtonProvider} + * @this {ButtonProvider} */ function onNodeChanged() { let node = UI.context.flavor(SDK.DOMNode); @@ -2690,14 +2690,14 @@ Elements.StylesSidebarPane.ButtonProvider = class { * @param {!Common.Event} event */ _clicked(event) { - Elements.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet(); + StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet(); } /** * @param {!Event} e */ _longClicked(e) { - Elements.StylesSidebarPane._instance._onAddButtonLongClick(e); + StylesSidebarPane._instance._onAddButtonLongClick(e); } /** @@ -2707,4 +2707,36 @@ Elements.StylesSidebarPane.ButtonProvider = class { item() { return this._button; } -}; +} + +/* Legacy exported object */ +self.Elements = self.Elements || {}; + +/* Legacy exported object */ +Elements = Elements || {}; + +/** @constructor */ +Elements.StylesSidebarPane = StylesSidebarPane; + +Elements.StylesSidebarPane._maxLinkLength = _maxLinkLength; + +/** @constructor */ +Elements.StylesSidebarPane.CSSPropertyPrompt = CSSPropertyPrompt; + +/** @constructor */ +Elements.StylesSidebarPane.ButtonProvider = ButtonProvider; + +/** @constructor */ +Elements.SectionBlock = SectionBlock; + +/** @constructor */ +Elements.StylePropertiesSection = StylePropertiesSection; + +/** @constructor */ +Elements.BlankStylePropertiesSection = BlankStylePropertiesSection; + +/** @constructor */ +Elements.KeyframePropertiesSection = KeyframePropertiesSection; + +/** @constructor */ +Elements.StylesSidebarPropertyRenderer = StylesSidebarPropertyRenderer; diff --git a/front_end/elements/elements.js b/front_end/elements/elements.js new file mode 100644 index 0000000000..57e1632cd7 --- /dev/null +++ b/front_end/elements/elements.js @@ -0,0 +1,77 @@ +// Copyright 2019 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import './InspectElementModeController.js'; +import './ColorSwatchPopoverIcon.js'; +import './ComputedStyleModel.js'; +import './DOMLinkifier.js'; +import './DOMPath.js'; +import './ElementsBreadcrumbs.js'; +import './ElementsSidebarPane.js'; +import './ElementsTreeElement.js'; +import './ElementsTreeOutline.js'; +import './EventListenersWidget.js'; +import './MarkerDecorator.js'; +import './MetricsSidebarPane.js'; +import './PlatformFontsWidget.js'; +import './PropertiesWidget.js'; +import './NodeStackTraceWidget.js'; +import './StylePropertyHighlighter.js'; +import './StylesSidebarPane.js'; +import './StylePropertyTreeElement.js'; +import './ComputedStyleWidget.js'; +import './ElementsPanel.js'; +import './ClassesPaneWidget.js'; +import './ElementStatePaneWidget.js'; +import './ElementsTreeElementHighlighter.js'; + +import * as ClassesPaneWidget from './ClassesPaneWidget.js'; +import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js'; +import * as ComputedStyleModel from './ComputedStyleModel.js'; +import * as ComputedStyleWidget from './ComputedStyleWidget.js'; +import * as DOMLinkifier from './DOMLinkifier.js'; +import * as DOMPath from './DOMPath.js'; +import * as ElementsBreadcrumbs from './ElementsBreadcrumbs.js'; +import * as ElementsPanel from './ElementsPanel.js'; +import * as ElementsSidebarPane from './ElementsSidebarPane.js'; +import * as ElementStatePaneWidget from './ElementStatePaneWidget.js'; +import * as ElementsTreeElement from './ElementsTreeElement.js'; +import * as ElementsTreeElementHighlighter from './ElementsTreeElementHighlighter.js'; +import * as ElementsTreeOutline from './ElementsTreeOutline.js'; +import * as EventListenersWidget from './EventListenersWidget.js'; +import * as InspectElementModeController from './InspectElementModeController.js'; +import * as MarkerDecorator from './MarkerDecorator.js'; +import * as MetricsSidebarPane from './MetricsSidebarPane.js'; +import * as NodeStackTraceWidget from './NodeStackTraceWidget.js'; +import * as PlatformFontsWidget from './PlatformFontsWidget.js'; +import * as PropertiesWidget from './PropertiesWidget.js'; +import * as StylePropertyHighlighter from './StylePropertyHighlighter.js'; +import * as StylePropertyTreeElement from './StylePropertyTreeElement.js'; +import * as StylesSidebarPane from './StylesSidebarPane.js'; + +export { + ClassesPaneWidget, + ColorSwatchPopoverIcon, + ComputedStyleModel, + ComputedStyleWidget, + DOMLinkifier, + DOMPath, + ElementsBreadcrumbs, + ElementsPanel, + ElementsSidebarPane, + ElementStatePaneWidget, + ElementsTreeElement, + ElementsTreeElementHighlighter, + ElementsTreeOutline, + EventListenersWidget, + InspectElementModeController, + MarkerDecorator, + MetricsSidebarPane, + NodeStackTraceWidget, + PlatformFontsWidget, + PropertiesWidget, + StylePropertyHighlighter, + StylePropertyTreeElement, + StylesSidebarPane, +}; diff --git a/front_end/elements/module.json b/front_end/elements/module.json index 9c7e2004d4..7a7a28a7d7 100644 --- a/front_end/elements/module.json +++ b/front_end/elements/module.json @@ -288,7 +288,9 @@ "color_picker", "event_listeners" ], - "scripts": [ + "scripts": [], + "modules": [ + "elements.js", "InspectElementModeController.js", "ColorSwatchPopoverIcon.js", "ComputedStyleModel.js",