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 <[email protected]>
> > Commit-Queue: Paul Lewis <[email protected]>
> > Commit-Queue: Tim van der Lippe <[email protected]>
>
> [email protected],[email protected]
>
> # 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 <[email protected]>
> Commit-Queue: Yang Guo <[email protected]>
Change-Id: Iba84f5230f20a86b2de75b84115fcb10aeea534e
Bug: 1006759
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1937029
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Mathias Bynens <[email protected]>
Auto-Submit: Tim van der Lippe <[email protected]>
diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js
index 6d3fd26..1be8862 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 @@
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 @@
if (this._mutatingNodes.has(node)) {
return;
}
- delete node[Elements.ClassesPaneWidget._classesSymbol];
+ delete node[ClassesPaneWidget._classesSymbol];
this._update();
}
@@ -170,7 +170,7 @@
* @return {!Map<string, boolean>}
*/
_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 @@
}
result.set(className, true);
}
- node[Elements.ClassesPaneWidget._classesSymbol] = result;
+ node[ClassesPaneWidget._classesSymbol] = result;
}
return result;
}
@@ -237,27 +237,27 @@
/**
* @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 @@
item() {
return this._button;
}
-};
+}
/**
* @unrestricted
*/
-Elements.ClassesPaneWidget.ClassNamePrompt = class extends UI.TextPrompt {
+export class ClassNamePrompt extends UI.TextPrompt {
/**
* @param {function(!SDK.DOMNode):!Map<string, boolean>} nodeClasses
*/
@@ -345,4 +345,19 @@
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 e8426ce..5979946 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 @@
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 @@
*/
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 @@
/**
* @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 @@
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 @@
*/
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 @@
/**
* @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 @@
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 f39900f..6804ccc 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 @@
*/
_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 @@
*/
_onFrameResized(event) {
/**
- * @this {Elements.ComputedStyleModel}
+ * @this {ComputedStyleModel}
*/
function refreshContents() {
this._onComputedStyleChanged(null);
@@ -110,13 +111,13 @@
}
/**
- * @return {!Promise.<?Elements.ComputedStyleModel.ComputedStyle>}
+ * @return {!Promise.<?ComputedStyle>}
*/
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 @@
/**
* @param {!SDK.DOMNode} elementNode
* @param {?Map.<string, string>} 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.<string, string>} computedStyle
@@ -157,4 +157,19 @@
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 726d5ad..ab6229e 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 @@
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 @@
/**
* @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 @@
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 @@
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 @@
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 0723d3a..e1a140a 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 @@
* @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('<node>'));
}
@@ -74,7 +72,7 @@
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 @@
* @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 @@
/**
* @implements {Common.Linkifier}
*/
-Elements.DOMLinkifier.Linkifier = class {
+export class Linkifier {
/**
* @override
* @param {!Object} object
@@ -130,11 +128,26 @@
*/
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 6ddbbaa..ece4474 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 @@
* @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 @@
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 @@
* @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 @@
* @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 @@
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 @@
* @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 @@
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 @@
}
}
- return new Elements.DOMPath.Step(result, false);
+ return new Step(result, false);
};
/**
@@ -207,7 +205,7 @@
* @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 @@
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 @@
/**
* @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 @@
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 @@
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, <XPath index among the same expression-matching sibling nodes> otherwise.
function areNodesSimilar(left, right) {
if (left === right) {
@@ -331,7 +329,7 @@
/**
* @unrestricted
*/
-Elements.DOMPath.Step = class {
+export class Step {
/**
* @param {string} value
* @param {boolean} optimized
@@ -348,4 +346,24 @@
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 ede7770..62f7f1c 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 @@
}
}
}
-};
+}
/**
* @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 @@
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 dd1d6bc..d73289d 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 @@
/**
* @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 @@
// 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 e31c01f..69ff9c7 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 @@
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 @@
}
/**
- * @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 @@
* @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 @@
this._popoverHelper.hidePopover();
}
super.willHide();
- UI.context.setFlavor(Elements.ElementsPanel, null);
+ UI.context.setFlavor(ElementsPanel, null);
}
/**
@@ -370,7 +370,7 @@
/**
* @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 @@
/**
* @param {!Array.<number>} resultCounts
- * @this {Elements.ElementsPanel}
+ * @this {ElementsPanel}
*/
function resultCountCallback(resultCounts) {
this._searchResults = [];
@@ -768,7 +768,7 @@
}, true);
/**
- * @this {!Elements.ElementsPanel}
+ * @this {!ElementsPanel}
*/
function uninstallHack() {
this._splitWidget.element.classList.remove('disable-resizer-for-elements-hack');
@@ -794,11 +794,11 @@
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 @@
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 @@
/**
* @param {boolean} inComputedStyle
- * @this {Elements.ElementsPanel}
+ * @this {ElementsPanel}
*/
function showMetrics(inComputedStyle) {
if (inComputedStyle) {
@@ -840,7 +840,7 @@
/**
* @param {!Common.Event} event
- * @this {Elements.ElementsPanel}
+ * @this {ElementsPanel}
*/
function tabSelected(event) {
const tabId = /** @type {string} */ (event.data.tabId);
@@ -860,13 +860,13 @@
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 @@
}
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 @@
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 @@
}
// 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 @@
* @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 @@
}
}
}
-};
+}
/**
* @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 @@
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 @@
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 bda591c..3656ec6 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 @@
/**
* @return {!Promise.<?>}
- * @this {Elements.ElementsSidebarPane}
+ * @this {ElementsSidebarPane}
*/
function innerUpdate() {
return this.isShowing() ? this.doUpdate() : Promise.resolve();
@@ -72,4 +73,13 @@
*/
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 f8129d4..19284ca 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 @@
this._canAddAttributes = true;
}
this._searchQuery = null;
- this._expandedChildrenLimit = Elements.ElementsTreeElement.InitialChildrenLimit;
+ this._expandedChildrenLimit = InitialChildrenLimit;
this._decorationsThrottler = new Common.Throttler(100);
/**
@@ -63,7 +63,7 @@
}
/**
- * @param {!Elements.ElementsTreeElement} treeElement
+ * @param {!ElementsTreeElement} treeElement
*/
static animateOnDOMUpdate(treeElement) {
const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
@@ -95,7 +95,7 @@
*/
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 @@
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 @@
}
const tagName = tagNameElement.textContent;
- if (Elements.ElementsTreeElement.EditTagBlacklist.has(tagName.toLowerCase())) {
+ if (EditTagBlacklist.has(tagName.toLowerCase())) {
return false;
}
@@ -791,7 +791,7 @@
/**
* @param {!Element} element
* @param {string} newTagName
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function editingComitted(element, newTagName) {
tagNameElement.removeEventListener('keyup', keyupListener, false);
@@ -800,7 +800,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function editingCancelled() {
tagNameElement.removeEventListener('keyup', keyupListener, false);
@@ -853,7 +853,7 @@
/**
* @param {!UI.TextEditorFactory} factory
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function gotFactory(factory) {
const editor = factory.createEditor({
@@ -883,7 +883,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function resize() {
if (this._htmlEditElement) {
@@ -893,7 +893,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function commit() {
commitCallback(initialValue, this._editing.editor.text());
@@ -901,7 +901,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function dispose() {
this._editing.editor.widget().element.removeEventListener('blur', this._editing.commit, true);
@@ -932,7 +932,7 @@
/**
* @param {!Event} event
- * @this {!Elements.ElementsTreeElement}
+ * @this {!ElementsTreeElement}
*/
function keydown(event) {
const isMetaOrCtrl = UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!KeyboardEvent} */ (event)) &&
@@ -954,7 +954,7 @@
/**
* @param {?Protocol.Error=} error
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function moveToNextAttributeIfNeeded(error) {
if (error) {
@@ -1037,7 +1037,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function moveToNextAttributeIfNeeded() {
if (moveDirection !== 'forward') {
@@ -1081,7 +1081,7 @@
delete this._editing;
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function callback() {
this.updateTitle();
@@ -1249,7 +1249,7 @@
return Promise.all(promises).then(updateDecorationsUI.bind(this));
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function updateDecorationsUI() {
this._decorationsElement.removeChildren();
@@ -1294,7 +1294,7 @@
/**
* @param {!Set<string>} colors
* @param {string} className
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function processColors(colors, className) {
for (const color of colors) {
@@ -1343,7 +1343,7 @@
/**
* @param {!Element} element
* @param {string} value
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function setValueWithEntities(element, value) {
result = this._convertWhitespaceToEntities(value);
@@ -1373,7 +1373,7 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
* @param {string} value
* @return {!Element}
*/
@@ -1391,7 +1391,7 @@
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 @@
/**
* @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 @@
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 @@
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 @@
}
/**
- * @this {Elements.ElementsTreeElement}
+ * @this {ElementsTreeElement}
*/
function updateSearchHighlight() {
delete this._highlightResult;
@@ -1807,21 +1807,34 @@
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 3786f52..c354e57 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 @@
this._treeOutline === Elements.ElementsTreeOutline.forDOMModel(domNode.domModel()) ? domNode : null;
/**
- * @this {Elements.ElementsTreeElementHighlighter}
+ * @this {ElementsTreeElementHighlighter}
*/
function callback() {
this._highlightNodeInternal(this._pendingHighlightNode);
@@ -95,4 +96,13 @@
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 22f5cb5..268f9b3 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 @@
this._popoverHelper.setHasPadding(true);
this._popoverHelper.setTimeout(0, 100);
- /** @type {!Map<!SDK.DOMNode, !Elements.ElementsTreeOutline.UpdateRecord>} */
+ /** @type {!Map<!SDK.DOMNode, !UpdateRecord>} */
this._updateRecords = new Map();
/** @type {!Set<!Elements.ElementsTreeElement>} */
this._treeElementsBeingUpdated = new Set();
@@ -95,10 +95,10 @@
/**
* @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 @@
/**
* @param {?Protocol.Error} error
* @param {!Protocol.DOM.NodeId} nodeId
- * @this {Elements.ElementsTreeOutline}
+ * @this {ElementsTreeOutline}
*/
function expandCallback(error, nodeId) {
if (error) {
@@ -421,14 +421,14 @@
*/
_selectedNodeChanged(focus) {
this.dispatchEventToListeners(
- Elements.ElementsTreeOutline.Events.SelectedNodeChanged, {node: this._selectedDOMNode, focus: focus});
+ ElementsTreeOutline.Events.SelectedNodeChanged, {node: this._selectedDOMNode, focus: focus});
}
/**
* @param {!Array.<!SDK.DOMNode>} nodes
*/
_fireElementsTreeUpdated(nodes) {
- this.dispatchEventToListeners(Elements.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
+ this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
}
/**
@@ -654,7 +654,7 @@
return;
}
- if (element instanceof Elements.ElementsTreeOutline.ShortcutTreeElement) {
+ if (element instanceof ShortcutTreeElement) {
element.domModel().overlayModel().highlightInOverlay({deferredNode: element.deferredNode()}, 'all', showInfo);
}
}
@@ -897,7 +897,7 @@
treeElement.toggleEditAsHTML(editingFinished.bind(this), startEditing);
/**
- * @this {Elements.ElementsTreeOutline}
+ * @this {ElementsTreeOutline}
* @param {boolean} success
*/
function editingFinished(success) {
@@ -1046,7 +1046,7 @@
* @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 @@
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 @@
/**
* @param {!SDK.DOMNode} node
- * @return {?Elements.ElementsTreeOutline.UpdateRecord}
+ * @return {?UpdateRecord}
*/
_updateRecordForHighlight(node) {
if (!this._visible) {
@@ -1391,7 +1391,7 @@
return expandAllButtonElement;
/**
- * @this {Elements.ElementsTreeOutline}
+ * @this {ElementsTreeOutline}
* @param {!Event} event
*/
function handleLoadAllChildren(event) {
@@ -1540,7 +1540,7 @@
// 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 @@
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 @@
* @const
* @type {!Object.<string, string>}
*/
-Elements.ElementsTreeOutline.MappedCharToEntity = {
+export const MappedCharToEntity = {
'\xA0': 'nbsp',
'\x93': '#147', // <control>
'\xAD': 'shy',
@@ -1604,7 +1600,7 @@
/**
* @unrestricted
*/
-Elements.ElementsTreeOutline.UpdateRecord = class {
+export class UpdateRecord {
/**
* @param {string} attrName
*/
@@ -1686,12 +1682,12 @@
hasRemovedChildren() {
return !!this._hasRemovedChildren;
}
-};
+}
/**
* @implements {UI.Renderer}
*/
-Elements.ElementsTreeOutline.Renderer = class {
+export class Renderer {
/**
* @override
* @param {!Object} object
@@ -1712,7 +1708,7 @@
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 @@
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 @@
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 @@
}
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 2f897dd..0dcba06 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 @@
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 @@
/**
* @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 @@
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 @@
*/
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 @@
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 @@
_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 @@
.evaluate(
{
expression: 'self',
- objectGroup: Elements.EventListenersWidget._objectGroupName,
+ objectGroup: _objectGroupName,
includeCommandLineAPI: false,
silent: true,
returnByValue: false,
@@ -175,12 +171,24 @@
_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 900c89d..2b57de0 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<!SDK.OverlayModel>}
* @unrestricted
*/
-Elements.InspectElementModeController = class {
+export default class InspectElementModeController {
/**
* @suppressGlobalPropertiesCheck
*/
@@ -133,13 +134,13 @@
_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 @@
* @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 a39c9c7..8632af2 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 @@
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 e6a08e0..0d2d18f 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 @@
/**
* @param {?Map.<string, string>} style
- * @this {Elements.MetricsSidebarPane}
+ * @this {MetricsSidebarPane}
*/
function callback(style) {
if (!style || this.node() !== node) {
@@ -70,7 +70,7 @@
}
/**
* @param {?SDK.CSSModel.InlineStyleResult} inlineStyleResult
- * @this {Elements.MetricsSidebarPane}
+ * @this {MetricsSidebarPane}
*/
function inlineStyleCallback(inlineStyleResult) {
if (inlineStyleResult && this.node() === node) {
@@ -156,7 +156,7 @@
* @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 @@
/**
* @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 @@
/**
* @param {boolean} success
- * @this {Elements.MetricsSidebarPane}
+ * @this {MetricsSidebarPane}
*/
function callback(success) {
if (!success) {
@@ -478,4 +478,13 @@
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 1fb6dc2..d220c38 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 @@
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 @@
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 78ffdc0..d71d852 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 @@
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 186227f..3d23c66 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 @@
*/
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 @@
}
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 @@
}
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 91092f6..a94cb01 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 @@
],
{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 e9f521f..7c5736f 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 @@
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 @@
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 @@
* @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 @@
/**
* @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 @@
/**
* @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 @@
/**
* @param {string} moveDirection
- * @return {?Elements.StylePropertyTreeElement}
+ * @return {?StylePropertyTreeElement}
*/
_findSibling(moveDirection) {
let target = this;
@@ -996,7 +996,7 @@
* @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 @@
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.Context;
-Elements.StylePropertyTreeElement.ActiveSymbol = Symbol('ActiveSymbol');
diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
index d6e199d..215109b 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 @@
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 @@
this.contentElement.classList.add('styles-pane');
- /** @type {!Array<!Elements.SectionBlock>} */
+ /** @type {!Array<!SectionBlock>} */
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 @@
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 @@
}
/**
- * @param {!Elements.StylePropertiesSection} editedSection
+ * @param {!StylePropertiesSection} editedSection
* @param {!Elements.StylePropertyTreeElement=} editedTreeElement
*/
_refreshUpdate(editedSection, editedTreeElement) {
@@ -394,7 +394,7 @@
/**
* @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 @@
}
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 @@
/**
* @param {!SDK.CSSMatchedStyles} matchedStyles
- * @return {!Promise<!Array.<!Elements.SectionBlock>>}
+ * @return {!Promise<!Array.<!SectionBlock>>}
*/
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 @@
}
/**
- * @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 @@
}
/**
- * @param {!Elements.StylePropertiesSection} section
+ * @param {!StylePropertiesSection} section
*/
removeSection(section) {
for (const block of this._sectionBlocks) {
@@ -691,7 +691,7 @@
}
/**
- * @return {!Array<!Elements.StylePropertiesSection>}
+ * @return {!Array<!StylePropertiesSection>}
*/
allSections() {
let sections = [];
@@ -716,7 +716,7 @@
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 @@
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._maxLinkLength = 23;
+export const _maxLinkLength = 23;
-Elements.SectionBlock = class {
+export class SectionBlock {
/**
* @param {?Element} titleElement
*/
@@ -818,29 +818,29 @@
/**
* @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<!Elements.SectionBlock>}
+ * @return {!Promise<!SectionBlock>}
*/
static async _createInheritedNodeBlock(node) {
const separatorElement = createElement('div');
@@ -848,7 +848,7 @@
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 @@
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 @@
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 @@
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 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
firstSibling() {
const parent = this.element.parentElement;
@@ -1259,7 +1259,7 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
lastSibling() {
const parent = this.element.parentElement;
@@ -1279,7 +1279,7 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
nextSibling() {
let curElement = this.element;
@@ -1291,7 +1291,7 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
previousSibling() {
let curElement = this.element;
@@ -1430,7 +1430,7 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
nextEditableSibling() {
let curSection = this;
@@ -1449,7 +1449,7 @@
}
/**
- * @return {?Elements.StylePropertiesSection}
+ * @return {?StylePropertiesSection}
*/
previousEditableSibling() {
let curSection = this;
@@ -1525,8 +1525,7 @@
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 @@
/**
* @param {boolean} success
- * @this {Elements.StylePropertiesSection}
+ * @this {StylePropertiesSection}
*/
function userCallback(success) {
if (success) {
@@ -1867,7 +1866,7 @@
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 @@
}
/**
- * @this {Elements.StylePropertiesSection}
+ * @this {StylePropertiesSection}
*/
function headerTextCommitted() {
this._parentPane.setUserOperation(false);
@@ -1992,7 +1991,7 @@
* @param {!SDK.CSSStyleRule} rule
* @param {boolean} success
* @return {!Promise}
- * @this {Elements.StylePropertiesSection}
+ * @this {StylePropertiesSection}
*/
function onSelectorsUpdated(rule, success) {
if (!success) {
@@ -2003,7 +2002,7 @@
/**
* @param {!SDK.CSSStyleRule} rule
- * @this {Elements.StylePropertiesSection}
+ * @this {StylePropertiesSection}
*/
function updateSourceRanges(rule) {
const doesAffectSelectedNode = this._matchedStyles.matchingSelectors(rule).length > 0;
@@ -2026,7 +2025,7 @@
_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 @@
// 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 @@
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 @@
/**
* @param {?SDK.CSSStyleRule} newRule
* @return {!Promise}
- * @this {Elements.BlankStylePropertiesSection}
+ * @this {BlankStylePropertiesSection}
*/
function onRuleAdded(newRule) {
if (!newRule) {
@@ -2123,7 +2124,7 @@
/**
* @param {!SDK.CSSStyleRule} newRule
- * @this {Elements.BlankStylePropertiesSection}
+ * @this {BlankStylePropertiesSection}
*/
function onAddedToCascade(newRule) {
const doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors(newRule).length > 0;
@@ -2176,15 +2177,14 @@
_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 @@
_setHeaderText(rule, newContent) {
/**
* @param {boolean} success
- * @this {Elements.KeyframePropertiesSection}
+ * @this {KeyframePropertiesSection}
*/
function updateSourceRanges(success) {
if (!success) {
@@ -2263,9 +2263,9 @@
*/
_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 @@
/**
* @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 @@
* @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 @@
* @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 @@
return swatch;
}
}
-};
+}
-Elements.StylesSidebarPropertyRenderer = class {
+export class StylesSidebarPropertyRenderer {
/**
* @param {?SDK.CSSRule} rule
* @param {?SDK.DOMNode} node
@@ -2660,12 +2660,12 @@
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 @@
onNodeChanged.call(this);
/**
- * @this {Elements.StylesSidebarPane.ButtonProvider}
+ * @this {ButtonProvider}
*/
function onNodeChanged() {
let node = UI.context.flavor(SDK.DOMNode);
@@ -2690,14 +2690,14 @@
* @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 @@
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 0000000..57e1632
--- /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 9c7e200..7a7a28a 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",
