Web Inspector: Factor out object properties popup.
authormnaganov@chromium.org <mnaganov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 4 Oct 2011 16:17:43 +0000 (16:17 +0000)
committermnaganov@chromium.org <mnaganov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 4 Oct 2011 16:17:43 +0000 (16:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=69234

Also, for HTML elements, show a non-empty id value in the element name.

Reviewed by Pavel Feldman.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@96599 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/WebCore.gypi
Source/WebCore/WebCore.vcproj/WebCore.vcproj
Source/WebCore/inspector/front-end/ObjectPopoverHelper.js [new file with mode: 0644]
Source/WebCore/inspector/front-end/SourceFrame.js
Source/WebCore/inspector/front-end/WebKit.qrc
Source/WebCore/inspector/front-end/inspector.html

index 3718b18..72f8176 100644 (file)
@@ -1,3 +1,23 @@
+2011-10-04  Mikhail Naganov  <mnaganov@chromium.org>
+
+        Web Inspector: Factor out object properties popup.
+        https://bugs.webkit.org/show_bug.cgi?id=69234
+
+        Also, for HTML elements, show a non-empty id value in the element name.
+
+        Reviewed by Pavel Feldman.
+
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/front-end/ObjectPopoverHelper.js: Added.
+        * inspector/front-end/SourceFrame.js: Extracted from here.
+        (WebInspector.SourceFrame.prototype._initializeTextViewer):
+        (WebInspector.SourceFrame.prototype._mouseDown):
+        (WebInspector.SourceFrame.prototype._onShowPopover.showObjectPopover):
+        (WebInspector.SourceFrame.prototype._onShowPopover):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/inspector.html:
+
 2011-10-04  Pavel Feldman  <pfeldman@google.com>
 
         Web Inspector: compile text editor.
index b7f1a60..0abb9e3 100644 (file)
             'inspector/front-end/NetworkLog.js',
             'inspector/front-end/NetworkPanel.js',
             'inspector/front-end/Object.js',
+            'inspector/front-end/ObjectPopoverHelper.js',
             'inspector/front-end/ObjectPropertiesSection.js',
             'inspector/front-end/Panel.js',
             'inspector/front-end/PanelEnablerView.js',
index fb2b73c..ccb2af9 100755 (executable)
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\ObjectPopoverHelper.js"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\ObjectPropertiesSection.js"
                                        >
                                </File>
diff --git a/Source/WebCore/inspector/front-end/ObjectPopoverHelper.js b/Source/WebCore/inspector/front-end/ObjectPopoverHelper.js
new file mode 100644 (file)
index 0000000..5f91ae5
--- /dev/null
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectPopoverHelper = function(panelElement, getAnchor, queryObject, onHide, disableOnClick)
+{
+    WebInspector.PopoverHelper.call(this, panelElement, getAnchor, this._showObjectPopover.bind(this), onHide, disableOnClick);
+    this._queryObject = queryObject;
+    panelElement.addEventListener("scroll", this.hidePopover.bind(this), true);
+};
+
+WebInspector.ObjectPopoverHelper.prototype = {
+    _showObjectPopover: function(element, popover)
+    {
+        function showObjectPopover(result, wasThrown)
+        {
+            if (popover.disposed)
+                return;
+            if (wasThrown) {
+                this.hidePopover();
+                return;
+            }
+            var popoverContentElement = null;
+            if (result.type !== "object") {
+                popoverContentElement = document.createElement("span");
+                popoverContentElement.className = "monospace console-formatted-" + result.type;
+                popoverContentElement.style.whiteSpace = "pre";
+                popoverContentElement.textContent = result.description;
+                if (result.type === "string")
+                    popoverContentElement.textContent = "\"" + popoverContentElement.textContent + "\"";
+                popover.show(popoverContentElement, element);
+            } else {
+                popoverContentElement = document.createElement("div");
+
+                this._titleElement = document.createElement("div");
+                this._titleElement.className = "source-frame-popover-title monospace";
+                this._titleElement.textContent = result.description;
+                popoverContentElement.appendChild(this._titleElement);
+
+                var section = new WebInspector.ObjectPropertiesSection(result);
+                // For HTML DOM wrappers, append "#id" to title, if not empty.
+                if (result.description.substr(0, 4) === "HTML") {
+                    this._sectionUpdateProperties = section.updateProperties.bind(section);
+                    section.updateProperties = this._updateHTMLId.bind(this);
+                }
+                section.expanded = true;
+                section.element.addStyleClass("source-frame-popover-tree");
+                section.headerElement.addStyleClass("hidden");
+                popoverContentElement.appendChild(section.element);
+
+                const popoverWidth = 300;
+                const popoverHeight = 250;
+                popover.show(popoverContentElement, element, popoverWidth, popoverHeight);
+            }
+        }
+        this._queryObject(element, showObjectPopover.bind(this));
+    },
+
+    _updateHTMLId: function(properties, rootTreeElementConstructor, rootPropertyComparer)
+    {
+        for (var i = 0; i < properties.length; ++i) {
+            if (properties[i].name === "id") {
+                if (properties[i].value.description)
+                    this._titleElement.textContent += "#" + properties[i].value.description;
+                break;
+            }
+        }
+        this._sectionUpdateProperties(properties, rootTreeElementConstructor, rootPropertyComparer);
+    }
+}
+
+WebInspector.ObjectPopoverHelper.prototype.__proto__ = WebInspector.PopoverHelper.prototype;
index d6d24b0..4a6cb23 100644 (file)
@@ -294,10 +294,9 @@ WebInspector.SourceFrame.prototype = {
 
         var element = this._textViewer.element;
         if (this._delegate.debuggingSupported()) {
-            this._popoverHelper = new WebInspector.PopoverHelper(element,
+            this._popoverHelper = new WebInspector.ObjectPopoverHelper(element,
                 this._getPopoverAnchor.bind(this), this._onShowPopover.bind(this), this._onHidePopover.bind(this), true);
             element.addEventListener("mousedown", this._mouseDown.bind(this), true);
-            element.addEventListener("scroll", this._scroll.bind(this), true);
         }
 
         this._textViewer.beginUpdates();
@@ -647,16 +646,8 @@ WebInspector.SourceFrame.prototype = {
         return this._delegate.suggestedFileName();
     },
 
-    _scroll: function(event)
-    {
-        if (this._popoverHelper)
-            this._popoverHelper.hidePopover();
-    },
-
     _mouseDown: function(event)
     {
-        if (this._popoverHelper)
-            this._popoverHelper.hidePopover();
         if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey)
             return;
         var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
@@ -735,7 +726,7 @@ WebInspector.SourceFrame.prototype = {
         return container;
     },
 
-    _onShowPopover: function(element, popover)
+    _onShowPopover: function(element, showCallback)
     {
         if (!this._textViewer.readOnly) {
             this._popoverHelper.hidePopover();
@@ -745,39 +736,11 @@ WebInspector.SourceFrame.prototype = {
 
         function showObjectPopover(result, wasThrown)
         {
-            if (popover.disposed)
-                return;
-            if (wasThrown || !this._delegate.debuggerPaused()) {
+            if (!this._delegate.debuggerPaused()) {
                 this._popoverHelper.hidePopover();
                 return;
             }
-            var popoverContentElement = null;
-            if (result.type !== "object") {
-                popoverContentElement = document.createElement("span");
-                popoverContentElement.className = "monospace console-formatted-" + result.type;
-                popoverContentElement.style.whiteSpace = "pre";
-                popoverContentElement.textContent = result.description;
-                if (result.type === "string")
-                    popoverContentElement.textContent = "\"" + popoverContentElement.textContent + "\"";
-                popover.show(popoverContentElement, element);
-            } else {
-                var popoverContentElement = document.createElement("div");
-
-                var titleElement = document.createElement("div");
-                titleElement.className = "source-frame-popover-title monospace";
-                titleElement.textContent = result.description;
-                popoverContentElement.appendChild(titleElement);
-
-                var section = new WebInspector.ObjectPropertiesSection(result);
-                section.expanded = true;
-                section.element.addStyleClass("source-frame-popover-tree");
-                section.headerElement.addStyleClass("hidden");
-                popoverContentElement.appendChild(section.element);
-
-                const popoverWidth = 300;
-                const popoverHeight = 250;
-                popover.show(popoverContentElement, element, popoverWidth, popoverHeight);
-            }
+            showCallback(result, wasThrown);
             this._highlightElement.addStyleClass("source-frame-eval-expression");
         }
 
index 8c634f5..78331e9 100644 (file)
@@ -76,6 +76,7 @@
     <file>NetworkManager.js</file>
     <file>NetworkPanel.js</file>
     <file>Object.js</file>
+    <file>ObjectPopoverHelper.js</file>
     <file>ObjectPropertiesSection.js</file>
     <file>Panel.js</file>
     <file>PanelEnablerView.js</file>
index 399be99..c62b045 100644 (file)
@@ -89,6 +89,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="PropertiesSection.js"></script>
     <script type="text/javascript" src="RemoteObject.js"></script>
     <script type="text/javascript" src="ObjectPropertiesSection.js"></script>
+    <script type="text/javascript" src="ObjectPopoverHelper.js"></script>
     <script type="text/javascript" src="BreakpointsSidebarPane.js"></script>
     <script type="text/javascript" src="DOMBreakpointsSidebarPane.js"></script>
     <script type="text/javascript" src="CallStackSidebarPane.js"></script>