Diff
Modified: trunk/LayoutTests/ChangeLog (107704 => 107705)
--- trunk/LayoutTests/ChangeLog 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/LayoutTests/ChangeLog 2012-02-14 12:45:59 UTC (rev 107705)
@@ -1,3 +1,13 @@
+2012-02-14 Alexander Pavlov <[email protected]>
+
+ Elements panel needs to be able to preview images
+ https://bugs.webkit.org/show_bug.cgi?id=21570
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/elements/elements-img-tooltip-expected.txt:
+ * inspector/elements/elements-img-tooltip.html:
+
2012-02-14 Csaba Osztrogonác <[email protected]>
[Qt] Unreviewed gardening.
Modified: trunk/LayoutTests/inspector/elements/elements-img-tooltip-expected.txt (107704 => 107705)
--- trunk/LayoutTests/inspector/elements/elements-img-tooltip-expected.txt 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/LayoutTests/inspector/elements/elements-img-tooltip-expected.txt 2012-02-14 12:45:59 UTC (rev 107705)
@@ -1,5 +1,5 @@
Tests the tooltip for the image on hover.
-PASSED, tooltip text is "215 × 174 pixels".
+PASSED, image dimensions for tooltip: 215x174.
Modified: trunk/LayoutTests/inspector/elements/elements-img-tooltip.html (107704 => 107705)
--- trunk/LayoutTests/inspector/elements/elements-img-tooltip.html 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/LayoutTests/inspector/elements/elements-img-tooltip.html 2012-02-14 12:45:59 UTC (rev 107705)
@@ -9,26 +9,36 @@
{
WebInspector.inspectorView.setCurrentPanel(WebInspector.panels.elements);
+ var treeElement;
InspectorTest.nodeWithId("image", step1);
function step1(node)
{
- var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
- treeElement._createTooltipForNode();
- InspectorTest.runAfterPendingDispatches(step2.bind(this, treeElement));
+ treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
+ WebInspector.panels.elements._loadDimensionsForNode(treeElement, step2);
}
- function step2(treeElement)
+ function step2(dimensions)
{
- const EXPECTED_TOOLTIP_TEXT = "215 \xd7 174 pixels";
+ const EXPECTED_WIDTH = 215;
+ const EXPECTED_HEIGHT = 174;
- var tooltipText = treeElement.tooltip;
- if (tooltipText === EXPECTED_TOOLTIP_TEXT)
- InspectorTest.addResult("PASSED, tooltip text is \"" + EXPECTED_TOOLTIP_TEXT + "\".");
- else
- InspectorTest.addResult("FAILED, tooltip text should have been \"" + EXPECTED_TOOLTIP_TEXT + "\". Was \"" + tooltipText + "\".");
+ if (!dimensions)
+ InspectorTest.addResult("FAILED, no dimensions on treeElement.");
+ else {
+ if (dimensions.offsetWidth === dimensions.naturalWidth && dimensions.offsetHeight == dimensions.naturalHeight
+ && dimensions.offsetWidth === EXPECTED_WIDTH && dimensions.offsetHeight === EXPECTED_HEIGHT)
+ InspectorTest.addResult("PASSED, image dimensions for tooltip: " + EXPECTED_WIDTH + "x" + EXPECTED_HEIGHT + ".");
+ else
+ InspectorTest.addResult("FAILED, image dimensions for tooltip: " + formatDimensions(dimensions) + " (should be " + EXPECTED_WIDTH + "x" + EXPECTED_HEIGHT + ").");
+ }
InspectorTest.completeTest();
}
+
+ function formatDimensions(dimensions)
+ {
+ return dimensions.offsetWidth + "x" + dimensions.offsetHeight + " (natural: " + dimensions.naturalWidth + "x" + dimensions.naturalHeight + ")";
+ }
}
</script>
Modified: trunk/Source/WebCore/ChangeLog (107704 => 107705)
--- trunk/Source/WebCore/ChangeLog 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/Source/WebCore/ChangeLog 2012-02-14 12:45:59 UTC (rev 107705)
@@ -1,3 +1,30 @@
+2012-02-14 Alexander Pavlov <[email protected]>
+
+ Elements panel needs to be able to preview images
+ https://bugs.webkit.org/show_bug.cgi?id=21570
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel):
+ (WebInspector.ElementsPanel.prototype.willHide):
+ (WebInspector.ElementsPanel.prototype._getPopoverAnchor):
+ (WebInspector.ElementsPanel.prototype._loadDimensionsForNode.resolvedNode.dimensions):
+ (WebInspector.ElementsPanel.prototype._loadDimensionsForNode.resolvedNode):
+ (WebInspector.ElementsPanel.prototype._loadDimensionsForNode):
+ (WebInspector.ElementsPanel.prototype._showPopover.dimensionsCallback):
+ (WebInspector.ElementsPanel.prototype._showPopover.showPopover):
+ (WebInspector.ElementsPanel.prototype._showPopover.buildPopoverContents):
+ (WebInspector.ElementsPanel.prototype._showPopover):
+ * inspector/front-end/ElementsTreeOutline.js:
+ (WebInspector.ElementsTreeOutline.prototype._onmousemove):
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylePropertyTreeElement.prototype.updateTitle.get g):
+ (WebInspector.StylePropertyTreeElement.prototype.updateTitle):
+ * inspector/front-end/elementsPanel.css:
+ (.image-preview-container):
+ (.image-preview-container img):
+
2012-02-14 Pavel Feldman <[email protected]>
Web Inspector: List expansion arrows is pointing down even
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (107704 => 107705)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2012-02-14 12:45:59 UTC (rev 107705)
@@ -96,6 +96,9 @@
this._registerShortcuts();
+ this._popoverHelper = new WebInspector.PopoverHelper(document.body, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+ this._popoverHelper.setTimeout(0);
+
WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemoved, this._nodeRemoved, this);
WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.InspectElementRequested, this._inspectElementRequested, this);
@@ -146,6 +149,7 @@
WebInspector.domAgent.hideDOMNodeHighlight();
this.setSearchingForNode(false);
this.treeOutline.setVisible(false);
+ this._popoverHelper.hidePopover();
// Detach heavy component on hide
this.contentElement.removeChild(this.treeOutline.element);
@@ -332,6 +336,114 @@
}
},
+ _getPopoverAnchor: function(element)
+ {
+ var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");
+ if (anchor) {
+ if (!anchor.href)
+ return null;
+
+ var resource = WebInspector.resourceTreeModel.resourceForURL(anchor.href);
+ if (!resource || resource.type !== WebInspector.Resource.Type.Image)
+ return null;
+
+ anchor.removeAttribute("title");
+ }
+ return anchor;
+ },
+
+ _loadDimensionsForNode: function(treeElement, callback)
+ {
+ // We get here for CSS properties, too, so bail out early for non-DOM treeElements.
+ if (treeElement.treeOutline !== this.treeOutline) {
+ callback();
+ return;
+ }
+
+ var node = /** @type {WebInspector.DOMNode} */ treeElement.representedObject;
+
+ if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
+ callback();
+ return;
+ }
+
+ WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
+
+ function resolvedNode(object)
+ {
+ if (!object) {
+ callback();
+ return;
+ }
+
+ object.callFunctionJSON(dimensions, callback);
+ object.release();
+
+ function dimensions()
+ {
+ return { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight, naturalWidth: this.naturalWidth, naturalHeight: this.naturalHeight };
+ }
+ }
+ },
+
+ _showPopover: function(anchor, popover)
+ {
+ var listItem = anchor.enclosingNodeOrSelfWithNodeNameInArray(["li"]);
+ if (listItem && listItem.treeElement)
+ this._loadDimensionsForNode(listItem.treeElement, dimensionsCallback);
+ else
+ dimensionsCallback();
+
+ function dimensionsCallback(dimensions)
+ {
+ var imageElement = document.createElement("img");
+ imageElement.addEventListener("load", showPopover.bind(null, imageElement, dimensions), false);
+ var resource = WebInspector.resourceTreeModel.resourceForURL(anchor.href);
+ if (!resource)
+ return;
+
+ resource.populateImageSource(imageElement);
+ }
+
+ function showPopover(imageElement, dimensions)
+ {
+ var contents = buildPopoverContents(imageElement, dimensions);
+ popover.show(contents, anchor);
+ }
+
+ function buildPopoverContents(imageElement, nodeDimensions)
+ {
+ const maxImageWidth = 100;
+ const maxImageHeight = 100;
+ var container = document.createElement("table");
+ container.className = "image-preview-container";
+ var naturalWidth = nodeDimensions ? nodeDimensions.naturalWidth : imageElement.naturalWidth;
+ var naturalHeight = nodeDimensions ? nodeDimensions.naturalHeight : imageElement.naturalHeight;
+ var offsetWidth = nodeDimensions ? nodeDimensions.offsetWidth : naturalWidth;
+ var offsetHeight = nodeDimensions ? nodeDimensions.offsetHeight : naturalHeight;
+ var description;
+ if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
+ description = WebInspector.UIString("%d \xd7 %d pixels", offsetWidth, offsetHeight);
+ else
+ description = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)", offsetWidth, offsetHeight, naturalWidth, naturalHeight);
+
+ if (naturalWidth > naturalHeight) {
+ if (naturalWidth > maxImageWidth) {
+ imageElement.style.width = maxImageWidth + "px";
+ imageElement.style.height = (naturalHeight * maxImageWidth / naturalWidth) + "px";
+ }
+ } else {
+ if (naturalHeight > maxImageHeight) {
+ imageElement.style.width = (naturalWidth * maxImageHeight / naturalHeight) + "px";
+ imageElement.style.height = maxImageHeight + "px";
+ }
+ }
+ container.createChild("tr").createChild("td", "image-container").appendChild(imageElement);
+ container.createChild("tr").createChild("td").createChild("span", "description").textContent = description;
+ return container;
+ }
+ },
+
jumpToNextSearchResult: function()
{
if (!this._searchResults)
Modified: trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js (107704 => 107705)
--- trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-02-14 12:45:59 UTC (rev 107705)
@@ -292,10 +292,6 @@
if (element) {
element.hovered = true;
this._previousHoveredElement = element;
-
- // Lazily compute tag-specific tooltips.
- if (element.representedObject && !element.tooltip)
- element._createTooltipForNode();
}
WebInspector.domAgent.highlightDOMNode(element ? element.representedObject.id : 0);
@@ -705,48 +701,6 @@
return this.expandedChildCount > index;
},
- _createTooltipForNode: function()
- {
- var node = /** @type {WebInspector.DOMNode} */ this.representedObject;
- if (!node.nodeName() || node.nodeName().toLowerCase() !== "img")
- return;
-
- function setTooltip(result)
- {
- if (!result || result.type !== "string")
- return;
-
- try {
- var properties = JSON.parse(result.description);
- var offsetWidth = properties[0];
- var offsetHeight = properties[1];
- var naturalWidth = properties[2];
- var naturalHeight = properties[3];
- if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
- this.tooltip = WebInspector.UIString("%d \xd7 %d pixels", offsetWidth, offsetHeight);
- else
- this.tooltip = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)", offsetWidth, offsetHeight, naturalWidth, naturalHeight);
- } catch (e) {
- console.error(e);
- }
- }
-
- function resolvedNode(object)
- {
- if (!object)
- return;
-
- function dimensions()
- {
- return "[" + this.offsetWidth + "," + this.offsetHeight + "," + this.naturalWidth + "," + this.naturalHeight + "]";
- }
-
- object.callFunction(dimensions, setTooltip.bind(this));
- object.release();
- }
- WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
- },
-
updateSelection: function()
{
var listItemElement = this.listItemElement;
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (107704 => 107705)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-14 12:45:59 UTC (rev 107705)
@@ -1606,6 +1606,7 @@
var nameElement = document.createElement("span");
nameElement.className = "webkit-css-property";
nameElement.textContent = this.name;
+ nameElement.title = this.property.propertyText;
this.nameElement = nameElement;
var valueElement = document.createElement("span");
@@ -1786,8 +1787,6 @@
}
if (this.property.inactive)
this.listItemElement.addStyleClass("inactive");
-
- this.tooltip = this.property.propertyText;
},
_updatePane: function(userCallback)
Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (107704 => 107705)
--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-14 12:36:08 UTC (rev 107704)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-14 12:45:59 UTC (rev 107705)
@@ -485,3 +485,16 @@
.event-bars .event-bar.expanded .header::before {
content: url(Images/treeDownTriangleBlack.png) !important;
}
+
+.image-preview-container {
+ background: transparent;
+ text-align: center;
+ padding-left: 11px;
+}
+
+.image-preview-container img {
+ margin: 2px auto;
+ background-image: url(Images/checker.png);
+ -webkit-user-select: text;
+ -webkit-user-drag: auto;
+}
