zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-03 02:21:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reland "Migrate elements/ to ESM"

Browse Source 
This reverts commit 9fd15ddbd0.

Reason for revert: Fixed browser tests loading behavior

Original change's description:
> Revert "Migrate elements/ to ESM"
>
> This reverts commit 8fefb2ca13.
>
> 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 <aerotwist@chromium.org>
> > Commit-Queue: Paul Lewis <aerotwist@chromium.org>
> > Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
>
> TBR=aerotwist@chromium.org,tvanderlippe@chromium.org
>
> # Not skipping CQ checks because original CL landed > 1 day ago.
>
> Bug: 1006759
> Change-Id: I16a1fd9851391a6080c5376ca35866402b0bc445
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1937027
> Reviewed-by: Yang Guo <yangguo@chromium.org>
> Commit-Queue: Yang Guo <yangguo@chromium.org>

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