2009-11-26 Daniel Bates <dbates@webkit.org>
authoreric@webkit.org <eric@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Nov 2009 20:27:53 +0000 (20:27 +0000)
committereric@webkit.org <eric@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Nov 2009 20:27:53 +0000 (20:27 +0000)
        Reviewed by Pavel Feldman.

        https://bugs.webkit.org/show_bug.cgi?id=21554

        Tests that the tooltip text for an image is its dimensions.

        * inspector/elements-img-tooltip-expected.txt: Added.
        * inspector/elements-img-tooltip.html: Added.
2009-11-26  Daniel Bates  <dbates@webkit.org>

        Reviewed by Pavel Feldman.

        https://bugs.webkit.org/show_bug.cgi?id=21554

        Implements support for hovering over <img> src to display the height and width of that image
        in a tooltip. Displays both the displayable and natural dimensions of the image.

        Test: inspector/elements-img-tooltip.html

        * inspector/front-end/ElementsTreeOutline.js:
        (WebInspector.ElementsTreeElement.prototype.createTooltipForImageNode): Added.
        (WebInspector.ElementsTreeElement.prototype._updateTitle.callback):
        (WebInspector.ElementsTreeElement.prototype._updateTitle):
        (WebInspector.ElementsTreeElement.prototype._nodeTitleInfo):
        * inspector/front-end/ObjectProxy.js:
        (WebInspector.ObjectProxy.getPropertiesAsync): Added.
        * inspector/front-end/inspector.js:
        (WebInspector.linkifyURLAsNode): Added tooltipText argument.
        (WebInspector.linkifyURL): Ditto.

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

LayoutTests/ChangeLog
LayoutTests/inspector/elements-img-tooltip-expected.txt [new file with mode: 0644]
LayoutTests/inspector/elements-img-tooltip.html [new file with mode: 0644]
WebCore/ChangeLog
WebCore/inspector/front-end/ElementsTreeOutline.js
WebCore/inspector/front-end/ObjectProxy.js
WebCore/inspector/front-end/inspector.js

index 184a6565654e2887040851582b1e6e6d2de82a91..19329e992f3aca5b51f9cf508ce6cb61d538fafb 100644 (file)
@@ -1,3 +1,14 @@
+2009-11-26  Daniel Bates  <dbates@webkit.org>
+
+        Reviewed by Pavel Feldman.
+
+        https://bugs.webkit.org/show_bug.cgi?id=21554
+
+        Tests that the tooltip text for an image is its dimensions.
+
+        * inspector/elements-img-tooltip-expected.txt: Added.
+        * inspector/elements-img-tooltip.html: Added.
+
 2009-11-21  Holger Hans Peter Freyther  <zecke@selfish.org>
 
         Reviewed by Kenneth Rohde Christiansen.
diff --git a/LayoutTests/inspector/elements-img-tooltip-expected.txt b/LayoutTests/inspector/elements-img-tooltip-expected.txt
new file mode 100644 (file)
index 0000000..1c80d6f
--- /dev/null
@@ -0,0 +1,5 @@
+Tests that the tooltip text for the image (below) is "215×174 pixels".
+
+
+PASSED, tooltip text is "215×174 pixels".
+
diff --git a/LayoutTests/inspector/elements-img-tooltip.html b/LayoutTests/inspector/elements-img-tooltip.html
new file mode 100644 (file)
index 0000000..8140e31
--- /dev/null
@@ -0,0 +1,66 @@
+<html>
+<head>
+
+<script src="inspector-test.js"></script>
+<script src="elements-tests.js"></script>
+<script>
+var EXPECTED_TOOLTIP_TEXT = "215\xd7174 pixels";
+function doit()
+{
+    function callback(tooltipText)
+    {
+        if (!tooltipText)
+            output("FAILED, tooltip text should have been \"" + EXPECTED_TOOLTIP_TEXT + "\". Was " + tooltipText + ".");
+        else if (tooltipText == EXPECTED_TOOLTIP_TEXT)
+            output("PASSED, tooltip text is \"" + EXPECTED_TOOLTIP_TEXT + "\".");
+        else
+            output("FAILED, tooltip text should have been \"" + EXPECTED_TOOLTIP_TEXT + "\". Was \"" + tooltipText + "\".");
+        notifyDone();
+    }
+    evaluateInWebInspector("frontend_dumpTooltip", callback);
+}
+
+// Frontend functions.
+
+function frontend_dumpTooltip(testController)
+{
+    testController.waitUntilDone();
+    frontend_expandDOMSubtree(WebInspector.domAgent.document);
+
+    testController.runAfterPendingDispatches(function() {
+        frontend_dumpTooltipContinuation(testController);
+    });
+}
+
+function frontend_dumpTooltipContinuation(testController)
+{
+    if (!WebInspector.ElementsTreeElement.prototype.createTooltipForImageNode) {
+        testController.notifyDone();
+        return;
+    }
+
+    function callback(tooltipText)
+    {
+        testController.notifyDone(tooltipText);
+    }
+
+    var innerMapping = WebInspector.domAgent._idToDOMNode;
+    for (var nodeId in innerMapping) {
+        if (innerMapping[nodeId].nodeName === "IMG") {
+            WebInspector.ElementsTreeElement.prototype.createTooltipForImageNode(innerMapping[nodeId], callback);
+            return;
+        }
+    }
+}
+</script>
+</head>
+
+<body onload="onload()">
+<p>
+Tests that the tooltip text for the image (below) is &quot;<script>document.write(EXPECTED_TOOLTIP_TEXT)</script>&quot;.
+</p>
+
+<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAACuCAIAAAAqMg/rAAAAAXNSR0IArs4c6QAAAU9JREFUeNrt0jERAAAIxDDAv+dHAxNLIqHXTlLwaiTAheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSF4EJcCC7EheBCXAguxIXgQlwILsSFEuBCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLgQX4kJwIS4EF+JCcCEuBBfiQnAhLoSDBZXqBFnkRyeqAAAAAElFTkSuQmCC"/>
+
+</body>
+</html>
index 771607ec83abcb52185325cebfb7c59c1a120a1f..713b1fcdd01c604f67a5044ae26e54c88985bee0 100644 (file)
@@ -1,3 +1,25 @@
+2009-11-26  Daniel Bates  <dbates@webkit.org>
+
+        Reviewed by Pavel Feldman.
+
+        https://bugs.webkit.org/show_bug.cgi?id=21554
+
+        Implements support for hovering over <img> src to display the height and width of that image
+        in a tooltip. Displays both the displayable and natural dimensions of the image.
+
+        Test: inspector/elements-img-tooltip.html
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement.prototype.createTooltipForImageNode): Added.
+        (WebInspector.ElementsTreeElement.prototype._updateTitle.callback):
+        (WebInspector.ElementsTreeElement.prototype._updateTitle):
+        (WebInspector.ElementsTreeElement.prototype._nodeTitleInfo):
+        * inspector/front-end/ObjectProxy.js:
+        (WebInspector.ObjectProxy.getPropertiesAsync): Added.
+        * inspector/front-end/inspector.js:
+        (WebInspector.linkifyURLAsNode): Added tooltipText argument.
+        (WebInspector.linkifyURL): Ditto.
+
 2009-11-26  Kevin Ollivier  <kevino@theolliviers.com>
 
         wx build fix after drawPattern API change.
index c93c50e1ef5d4d906afd57a14bb88cf07470bcb0..6c2d541fbfd499387fc11fabcbc126ee6aae00e5 100644 (file)
@@ -325,6 +325,26 @@ WebInspector.ElementsTreeElement.prototype = {
         }
     },
 
+    createTooltipForImageNode: function(node, callback)
+    {
+        function createTooltipThenCallback(properties)
+        {
+            if (!properties) {
+                callback();
+                return;
+            }
+
+            var tooltipText = null;
+            if (properties.offsetHeight === properties.naturalHeight && properties.offsetWidth === properties.naturalWidth)
+                tooltipText = WebInspector.UIString("%d\u00d7%d pixels", properties.offsetWidth, properties.offsetHeight);
+            else
+                tooltipText = WebInspector.UIString("%d\u00d7%d pixels (Natural: %d\u00d7%d pixels)", properties.offsetWidth, properties.offsetHeight, properties.naturalWidth, properties.naturalHeight);
+            callback(tooltipText);
+        }
+        var objectProxy = new WebInspector.ObjectProxy(node.id);
+        WebInspector.ObjectProxy.getPropertiesAsync(objectProxy, ["naturalHeight", "naturalWidth", "offsetHeight", "offsetWidth"], createTooltipThenCallback);
+    },
+
     toggleNewAttributeButton: function(visible)
     {
         function removeAddAttributeSpan()
@@ -787,14 +807,24 @@ WebInspector.ElementsTreeElement.prototype = {
         if (this._editing)
             return;
 
-        var title = this._nodeTitleInfo(this.representedObject, this.hasChildren, WebInspector.linkifyURL).title;
-        this.title = "<span class=\"highlight\">" + title + "</span>";
-        delete this.selectionElement;
-        this.updateSelection();
-        this._preventFollowingLinksOnDoubleClick();
+        var self = this;
+        function callback(tooltipText)
+        {
+            var title = self._nodeTitleInfo(self.representedObject, self.hasChildren, WebInspector.linkifyURL, tooltipText).title;
+            self.title = "<span class=\"highlight\">" + title + "</span>";
+            delete self.selectionElement;
+            self.updateSelection();
+            self._preventFollowingLinksOnDoubleClick();
+        };
+
+        // TODO: Replace with InjectedScriptAccess.getBasicProperties(obj, [names]).
+        if (this.representedObject.nodeName.toLowerCase() !== "img")
+            callback();
+        else
+            this.createTooltipForImageNode(this.representedObject, callback);
     },
 
-    _nodeTitleInfo: function(node, hasChildren, linkify)
+    _nodeTitleInfo: function(node, hasChildren, linkify, tooltipText)
     {
         var info = {title: "", hasChildren: hasChildren};
         
@@ -814,7 +844,7 @@ WebInspector.ElementsTreeElement.prototype = {
                         var value = attr.value;
                         if (linkify && (attr.name === "src" || attr.name === "href")) {
                             var value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
-                            info.title += linkify(attr.value, value, "webkit-html-attribute-value", node.nodeName.toLowerCase() == "a");
+                            info.title += linkify(attr.value, value, "webkit-html-attribute-value", node.nodeName.toLowerCase() == "a", tooltipText);
                         } else {
                             var value = value.escapeHTML();
                             value = value.replace(/([\/;:\)\]\}])/g, "$1&#8203;");
index bb4afa591898dfaa086a39b682dc8915bab4cad5..f4a59a73bfdae753d4382a454e4863a3b0d311f4 100644 (file)
@@ -45,6 +45,24 @@ WebInspector.ObjectProxy.wrapPrimitiveValue = function(value)
     return proxy;
 }
 
+WebInspector.ObjectProxy.getPropertiesAsync = function(objectProxy, propertiesToQueryFor, callback)
+{
+    function createPropertiesMapThenCallback(propertiesPayload)
+    {
+        if (!propertiesPayload) {
+            callback();
+            return;
+        }
+
+        var result = [];
+        for (var i = 0; i < propertiesPayload.length; ++i)
+            if (propertiesToQueryFor.indexOf(propertiesPayload[i].name) !== -1)
+                result[propertiesPayload[i].name] = propertiesPayload[i].value.description;
+        callback(result);
+    };
+    InjectedScriptAccess.getProperties(objectProxy, true, createPropertiesMapThenCallback);
+}
+
 WebInspector.ObjectPropertyProxy = function(name, value)
 {
     this.name = name;
index 0f8ec12f6433b65d73bc62482d94c87a3a029f01..0a4a595bfce0c8be1c19d1ee3c24ee264e7c3695 100644 (file)
@@ -1498,7 +1498,7 @@ WebInspector.showProfileForURL = function(url)
     WebInspector.panels.profiles.showProfileForURL(url);
 }
 
-WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal)
+WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText)
 {
     if (!linkText)
         linkText = url;
@@ -1508,18 +1508,18 @@ WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal)
     var a = document.createElement("a");
     a.href = url;
     a.className = classes;
-    a.title = url;
+    a.title = tooltipText || url;
     a.target = "_blank";
     a.textContent = linkText;
 
     return a;
 }
 
-WebInspector.linkifyURL = function(url, linkText, classes, isExternal)
+WebInspector.linkifyURL = function(url, linkText, classes, isExternal, tooltipText)
 {
     // Use the DOM version of this function so as to avoid needing to escape attributes.
     // FIXME:  Get rid of linkifyURL entirely.
-    return WebInspector.linkifyURLAsNode(url, linkText, classes, isExternal).outerHTML;
+    return WebInspector.linkifyURLAsNode(url, linkText, classes, isExternal, tooltipText).outerHTML;
 }
 
 WebInspector.addMainEventListeners = function(doc)