Upstream version 10.38.208.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / Source / devtools / front_end / elements / ElementsPanel.js
index 35e65ad..f43abb3 100644 (file)
  * 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}
@@ -48,9 +37,7 @@ importScript("StylesSidebarPane.js");
 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);
@@ -119,6 +106,8 @@ WebInspector.ElementsPanel = function()
     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 = {
@@ -134,9 +123,6 @@ 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();
@@ -147,13 +133,10 @@ WebInspector.ElementsPanel.prototype = {
      */
     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);
     },
 
     /**
@@ -258,7 +241,7 @@ WebInspector.ElementsPanel.prototype = {
         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();
 
@@ -390,7 +373,10 @@ WebInspector.ElementsPanel.prototype = {
 
         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();
     },
 
     /**
@@ -409,22 +395,35 @@ WebInspector.ElementsPanel.prototype = {
 
         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)
@@ -446,8 +445,7 @@ WebInspector.ElementsPanel.prototype = {
         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.
     },
@@ -468,15 +466,20 @@ WebInspector.ElementsPanel.prototype = {
         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)
@@ -484,11 +487,10 @@ WebInspector.ElementsPanel.prototype = {
 
             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;
     },
 
     /**
@@ -578,15 +580,11 @@ WebInspector.ElementsPanel.prototype = {
 
     _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;
         }
@@ -597,19 +595,19 @@ WebInspector.ElementsPanel.prototype = {
          */
         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();
@@ -621,13 +619,13 @@ WebInspector.ElementsPanel.prototype = {
 
     _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();
     },
@@ -1145,12 +1143,13 @@ WebInspector.ElementsPanel.prototype = {
     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;
             }
@@ -1158,17 +1157,21 @@ WebInspector.ElementsPanel.prototype = {
             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;
         }
@@ -1176,18 +1179,57 @@ WebInspector.ElementsPanel.prototype = {
         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);
     },
 
     /**
@@ -1218,20 +1260,15 @@ WebInspector.ElementsPanel.prototype = {
      */
     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);
     },
 
@@ -1424,7 +1461,20 @@ WebInspector.ElementsPanel.DOMNodeRevealer.prototype = {
             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);
+        }
     }
 }
 
@@ -1460,7 +1510,7 @@ WebInspector.ElementsPanel.NodeRemoteObjectRevealer.prototype = {
         function selectNode(remoteObject, node)
         {
             if (node) {
-                node.reveal();
+                WebInspector.Revealer.reveal(node);
                 return;
             }
             if (!remoteObject || remoteObject.description !== "#text" || !remoteObject.isNode())
@@ -1478,3 +1528,69 @@ WebInspector.ElementsPanel.NodeRemoteObjectRevealer.prototype = {
         }
     }
 }
+
+/**
+ * @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;
+        }
+    }
+}