Changeset 51420 in webkit

Timestamp:

Nov 26, 2009 12:27:53 PM (14 years ago)

Author:

eric@webkit.org

Message:

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-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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/elements-img-tooltip-expected.txt (added)
• LayoutTests/inspector/elements-img-tooltip.html (added)
• WebCore/ChangeLog (modified) (1 diff)
• WebCore/inspector/front-end/ElementsTreeOutline.js (modified) (3 diffs)
• WebCore/inspector/front-end/ObjectProxy.js (modified) (1 diff)
• WebCore/inspector/front-end/inspector.js (modified) (3 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+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>
 

trunk/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

@@ -326 +326 @@
     },
 
+    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)
     {
@@ -788 +808 @@
             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();
-    },
-
-    _nodeTitleInfo: function(node, hasChildren, linkify)
+        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, tooltipText)
     {
         var info = {title: "", hasChildren: hasChildren};
@@ -815 +845 @@
                         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();

trunk/WebCore/inspector/front-end/ObjectProxy.js

@@ -46 +46 @@
 }
 
+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)
 {

trunk/WebCore/inspector/front-end/inspector.js

@@ -1499 +1499 @@
 }
 
-WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal)
+WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText)
 {
     if (!linkText)
@@ -1509 +1509 @@
     a.href = url;
     a.className = classes;
-    a.title = url;
+    a.title = tooltipText || url;
     a.target = "_blank";
     a.textContent = linkText;
@@ -1516 +1516 @@
 }
 
-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;
 }