* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-importScript("Spectrum.js");
-importScript("DOMSyntaxHighlighter.js");
-importScript("ElementsTreeOutline.js");
-importScript("EventListenersSidebarPane.js");
-importScript("MetricsSidebarPane.js");
-importScript("OverridesView.js");
-importScript("PlatformFontsSidebarPane.js");
-importScript("PropertiesSidebarPane.js");
-importScript("RenderingOptionsView.js");
-importScript("StylesSidebarPane.js");
-
/**
* @constructor
* @implements {WebInspector.Searchable}
WebInspector.ElementsPanel = function()
{
WebInspector.Panel.call(this, "elements");
- this.registerRequiredCSS("breadcrumbList.css");
this.registerRequiredCSS("elementsPanel.css");
- this.registerRequiredCSS("suggestBox.css");
this.setHideOnDetach();
this._splitView = new WebInspector.SplitView(true, true, "elementsPanelSplitViewState", 325, 325);
this._targetToTreeOutline = new Map();
WebInspector.targetManager.observeTargets(this);
WebInspector.settings.showUAShadowDOM.addChangeListener(this._showUAShadowDOMChanged.bind(this));
+ WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
+ WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
}
WebInspector.ElementsPanel.prototype = {
this._treeOutlines.push(treeOutline);
this._targetToTreeOutline.put(target, treeOutline);
- target.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
- target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
-
// Perform attach if necessary.
if (this.isShowing())
this.wasShown();
*/
targetRemoved: function(target)
{
- var treeOutline = this._targetToTreeOutline.get(target);
+ var treeOutline = this._targetToTreeOutline.remove(target);
treeOutline.unwireFromDOMModel();
this._treeOutlines.remove(treeOutline);
treeOutline.element.remove();
-
- target.domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
- target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
},
/**
if (!node || !node.target().cssModel.forcePseudoState(node, pseudoClass, enable))
return;
- this._targetToTreeOutline.get(node.target()).updateOpenCloseTags(node);
+ this._treeOutlineForNode(node).updateOpenCloseTags(node);
this._metricsPaneEdited();
this._stylesPaneEdited();
delete this._currentSearchResultIndex;
delete this._searchResults;
- WebInspector.domModel.cancelSearch();
+
+ var targets = WebInspector.targetManager.targets();
+ for (var i = 0; i < targets.length; ++i)
+ targets[i].domModel.cancelSearch();
},
/**
this._searchQuery = query;
+ var targets = WebInspector.targetManager.targets();
+ var promises = [];
+ for (var i = 0; i < targets.length; ++i)
+ promises.push(targets[i].domModel.performSearchPromise(whitespaceTrimmedQuery, WebInspector.settings.showUAShadowDOM.get()));
+ Promise.all(promises).then(resultCountCallback.bind(this));
+
/**
- * @param {number} resultCount
+ * @param {!Array.<number>} resultCounts
* @this {WebInspector.ElementsPanel}
*/
- function resultCountCallback(resultCount)
+ function resultCountCallback(resultCounts)
{
- this._searchableView.updateSearchMatchesCount(resultCount);
- if (!resultCount)
+ /**
+ * @type {!Array.<{target: !WebInspector.Target, index: number, node: (?WebInspector.DOMNode|undefined)}>}
+ */
+ this._searchResults = [];
+ for (var i = 0; i < resultCounts.length; ++i) {
+ var resultCount = resultCounts[i];
+ for (var j = 0; j < resultCount; ++j)
+ this._searchResults.push({target: targets[i], index: j, node: undefined});
+ }
+ this._searchableView.updateSearchMatchesCount(this._searchResults.length);
+ if (!this._searchResults.length)
return;
-
this._currentSearchResultIndex = -1;
- this._searchResults = new Array(resultCount);
+
if (shouldJump)
this._jumpToSearchResult(jumpBackwards ? -1 : 0);
}
- WebInspector.domModel.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this));
},
_contextMenuEventFired: function(event)
if (!selectedNode)
return;
- var treeOutline = this._targetToTreeOutline.get(selectedNode.target());
- var treeElement = treeOutline.findTreeElement(selectedNode);
+ var treeElement = this._treeElementForNode(selectedNode);
if (treeElement)
treeElement.updateSelection(); // Recalculate selection highlight dimensions.
},
pane.populateNodeContextMenu(node, contextMenu);
},
- _getPopoverAnchor: function(element)
+ /**
+ * @param {!Element} element
+ * @param {!Event} event
+ * @return {!Element|!AnchorBox|undefined}
+ */
+ _getPopoverAnchor: function(element, event)
{
var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");
if (!anchor || !anchor.href)
- return null;
+ return;
var treeOutlineElement = anchor.enclosingNodeOrSelfWithClass("elements-tree-outline");
if (!treeOutlineElement)
- return null;
+ return;
for (var i = 0; i < this._treeOutlines.length; ++i) {
if (this._treeOutlines[i].element !== treeOutlineElement)
var resource = this._treeOutlines[i].target().resourceTreeModel.resourceForURL(anchor.href);
if (!resource || resource.type !== WebInspector.resourceTypes.Image)
- return null;
+ return;
anchor.removeAttribute("title");
return anchor;
}
- return null;
},
/**
_highlightCurrentSearchResult: function()
{
- var treeOutline = this._firstTreeOutlineDeprecated();
- if (!treeOutline)
- return;
-
var index = this._currentSearchResultIndex;
var searchResults = this._searchResults;
var searchResult = searchResults[index];
- if (searchResult === null) {
+ if (searchResult.node === null) {
this._searchableView.updateCurrentMatchIndex(index);
return;
}
*/
function searchCallback(node)
{
- searchResults[index] = node;
+ searchResult.node = node;
this._highlightCurrentSearchResult();
}
- if (typeof searchResult === "undefined") {
+ if (typeof searchResult.node === "undefined") {
// No data for slot, request it.
- WebInspector.domModel.searchResult(index, searchCallback.bind(this));
+ searchResult.target.domModel.searchResult(searchResult.index, searchCallback.bind(this));
return;
}
this._searchableView.updateCurrentMatchIndex(index);
- var treeElement = treeOutline.findTreeElement(searchResult);
+ var treeElement = this._treeElementForNode(searchResult.node);
if (treeElement) {
treeElement.highlightSearchResults(this._searchQuery);
treeElement.reveal();
_hideSearchHighlights: function()
{
- if (!this._searchResults)
+ if (!this._searchResults || !this._searchResults.length || this._currentSearchResultIndex < 0)
return;
var searchResult = this._searchResults[this._currentSearchResultIndex];
- if (!searchResult)
+ if (!searchResult.node)
return;
- var treeOutline = this._targetToTreeOutline.get(searchResult.target());
- var treeElement = treeOutline.findTreeElement(searchResult);
+ var treeOutline = this._targetToTreeOutline.get(searchResult.target);
+ var treeElement = treeOutline.findTreeElement(searchResult.node);
if (treeElement)
treeElement.hideSearchHighlights();
},
handleShortcut: function(event)
{
/**
+ * @param {!WebInspector.ElementsTreeOutline} treeOutline
* @this {WebInspector.ElementsPanel}
*/
- function handleUndoRedo()
+ function handleUndoRedo(treeOutline)
{
if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key
- WebInspector.domModel.undo(this._updateSidebars.bind(this));
+ treeOutline.target().domModel.undo(this._updateSidebars.bind(this));
event.handled = true;
return;
}
var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && event.keyIdentifier === "U+005A" : // Z key
event.ctrlKey && event.keyIdentifier === "U+0059"; // Y key
if (isRedoKey) {
- WebInspector.domModel.redo(this._updateSidebars.bind(this));
+ treeOutline.target().domModel.redo(this._updateSidebars.bind(this));
event.handled = true;
}
}
- var treeOutline = this._firstTreeOutlineDeprecated();
+ var treeOutline = null;
+ for (var i = 0; i < this._treeOutlines.length; ++i) {
+ if (this._treeOutlines[i].selectedDOMNode() === this._lastValidSelectedNode)
+ treeOutline = this._treeOutlines[i];
+ }
if (!treeOutline)
return;
if (!treeOutline.editing()) {
- handleUndoRedo.call(this);
+ handleUndoRedo.call(this, treeOutline);
if (event.handled)
return;
}
treeOutline.handleShortcut(event);
},
+ /**
+ * @param {?WebInspector.DOMNode} node
+ * @return {?WebInspector.ElementsTreeOutline}
+ */
+ _treeOutlineForNode: function(node)
+ {
+ if (!node)
+ return null;
+ return this._targetToTreeOutline.get(node.target()) || null;
+ },
+
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {?WebInspector.ElementsTreeElement}
+ */
+ _treeElementForNode: function(node)
+ {
+ var treeOutline = this._treeOutlineForNode(node);
+ return /** @type {?WebInspector.ElementsTreeElement} */ (treeOutline.findTreeElement(node));
+ },
+
+ /**
+ * @param {!Event} event
+ */
handleCopyEvent: function(event)
{
- var currentFocusElement = WebInspector.currentFocusElement();
- if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+ if (!WebInspector.currentFocusElement().enclosingNodeOrSelfWithClass("elements-tree-outline"))
return;
+ var treeOutline = this._treeOutlineForNode(this.selectedDOMNode());
+ if (treeOutline)
+ treeOutline.handleCopyOrCutKeyboardEvent(false, event);
+ },
- // Don't prevent the normal copy if the user has a selection.
- if (!window.getSelection().isCollapsed)
- return;
- event.clipboardData.clearData();
- event.preventDefault();
- this.selectedDOMNode().copyNode();
+ /**
+ * @param {!Event} event
+ */
+ handleCutEvent: function(event)
+ {
+ var treeOutline = this._treeOutlineForNode(this.selectedDOMNode());
+ if (treeOutline)
+ treeOutline.handleCopyOrCutKeyboardEvent(true, event);
+ },
+
+ /**
+ * @param {!Event} event
+ */
+ handlePasteEvent: function(event)
+ {
+ var treeOutline = this._treeOutlineForNode(this.selectedDOMNode());
+ if (treeOutline)
+ treeOutline.handlePasteKeyboardEvent(event);
},
/**
*/
appendApplicableItems: function(event, contextMenu, object)
{
- var commandCallback;
- if (object instanceof WebInspector.RemoteObject) {
- var remoteObject = /** @type {!WebInspector.RemoteObject} */ (object);
- if (remoteObject.isNode())
- commandCallback = remoteObject.reveal.bind(remoteObject);
- } else if (object instanceof WebInspector.DOMNode) {
- var domNode = /** @type {!WebInspector.DOMNode} */ (object);
- commandCallback = domNode.reveal.bind(domNode);
- }
- if (!commandCallback)
+ if (!(object instanceof WebInspector.RemoteObject && (/** @type {!WebInspector.RemoteObject} */ (object)).isNode())
+ && !(object instanceof WebInspector.DOMNode)
+ && !(object instanceof WebInspector.DeferredDOMNode)) {
return;
+ }
// Skip adding "Reveal..." menu item for our own tree outline.
if (this.element.isAncestor(/** @type {!Node} */ (event.target)))
return;
+ var commandCallback = WebInspector.Revealer.reveal.bind(WebInspector.Revealer, object);
contextMenu.appendItem(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Elements panel" : "Reveal in Elements Panel", commandCallback);
},
WebInspector.inspectElementModeController.disable();
}
- /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).revealAndSelectNode(/** @type {!WebInspector.DOMNode} */ (node));
+ var panel = /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements"));
+ if (node instanceof WebInspector.DOMNode)
+ panel.revealAndSelectNode(/** @type {!WebInspector.DOMNode} */ (node));
+ else if (node instanceof WebInspector.DeferredDOMNode)
+ (/** @type {!WebInspector.DeferredDOMNode} */ (node)).resolve(onNodeResolved);
+
+ /**
+ * @param {?WebInspector.DOMNode} resolvedNode
+ */
+ function onNodeResolved(resolvedNode)
+ {
+ if (resolvedNode)
+ panel.revealAndSelectNode(resolvedNode);
+ }
}
}
function selectNode(remoteObject, node)
{
if (node) {
- node.reveal();
+ WebInspector.Revealer.reveal(node);
return;
}
if (!remoteObject || remoteObject.description !== "#text" || !remoteObject.isNode())
}
}
}
+
+/**
+ * @constructor
+ */
+WebInspector.ElementsPanel.NodeRemoteObjectInspector = function()
+{
+}
+
+WebInspector.ElementsPanel.NodeRemoteObjectInspector.prototype = {
+ /**
+ * @param {!Object} object
+ */
+ inspectNodeObject: function(object)
+ {
+ var remoteObject = /** @type {!WebInspector.RemoteObject} */ (object);
+ if (!remoteObject.isNode()) {
+ remoteObject.release();
+ return;
+ }
+ var elementsPanel = /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements"));
+ revealElement(remoteObject);
+
+ /**
+ * @param {?WebInspector.RemoteObject} remoteObject
+ */
+ function revealElement(remoteObject)
+ {
+ if (!remoteObject)
+ return;
+ remoteObject.pushNodeToFrontend(selectNode.bind(null, remoteObject));
+ elementsPanel.omitDefaultSelection();
+ WebInspector.inspectorView.setCurrentPanel(elementsPanel);
+ }
+
+ /**
+ * @param {!WebInspector.RemoteObject} remoteObject
+ * @param {?WebInspector.DOMNode} node
+ */
+ function selectNode(remoteObject, node)
+ {
+ elementsPanel.stopOmittingDefaultSelection();
+ if (node) {
+ WebInspector.Revealer.reveal(node);
+ if (!WebInspector._notFirstInspectElement && !WebInspector.inspectorView.drawerVisible())
+ InspectorFrontendHost.inspectElementCompleted();
+ WebInspector._notFirstInspectElement = true;
+ remoteObject.release();
+ return;
+ }
+ if (remoteObject.description !== "#text" || !remoteObject.isNode()) {
+ remoteObject.release();
+ return;
+ }
+ remoteObject.callFunction(parentElement, undefined, revealElement);
+ }
+
+ /**
+ * @suppressReceiverCheck
+ * @this {Element}
+ */
+ function parentElement()
+ {
+ return this.parentElement;
+ }
+ }
+}