Diff
Modified: trunk/Source/WebCore/ChangeLog (125881 => 125882)
--- trunk/Source/WebCore/ChangeLog 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/ChangeLog 2012-08-17 12:08:17 UTC (rev 125882)
@@ -1,3 +1,40 @@
+2012-08-17 Alexander Pavlov <[email protected]>
+
+ Web Inspector: hovering over an image link in Timeline popup kills popup
+ https://bugs.webkit.org/show_bug.cgi?id=94213
+
+ Reviewed by Pavel Feldman.
+
+ - Fixed bug with ElementsPanel PopoverHelper acting on the TimelinePanel (due to which the original issue occurs).
+ - Image preview added to resource entries popover in the timeline.
+ - Extracted the core image preview building code into UIUtils.js.
+ - Drive-by: fixed image centering in the preview element.
+
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel):
+ (WebInspector.ElementsPanel.prototype._showPopover.showPopover):
+ (WebInspector.ElementsPanel.prototype._showPopover):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype._showPopover.showCallback):
+ (WebInspector.TimelinePanel.prototype._showPopover):
+ * inspector/front-end/TimelinePresentationModel.js:
+ (WebInspector.TimelinePresentationModel.needsPreviewElement):
+ (WebInspector.TimelinePresentationModel.Record.prototype.generatePopupContent):
+ First build the image preview element if necessary, then do everything else.
+ (WebInspector.TimelinePresentationModel.Record.prototype._generatePopupContentWithImagePreview):
+ Original generatePopupContent() code plus the preview generation when necessary.
+ * inspector/front-end/UIUtils.js:
+ (WebInspector.buildImagePreviewContents.errorCallback):
+ (WebInspector.buildImagePreviewContents.buildContent):
+ (WebInspector.buildImagePreviewContents): Extracted from ElementsPanel. Enabled building of preview elements without the dimensions text data.
+ * inspector/front-end/elementsPanel.css:
+ (.image-preview-container):
+ (.image-preview-container img):
+ * inspector/front-end/timelinePanel.css:
+ (.image-preview-container): Fixed centering of the preview container contents.
+ (.image-preview-container img):
+ (.image-container):
+
2012-08-17 Andrey Kosyakov <[email protected]>
Web Inspector: decouple extension server from the Elements panel
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2012-08-17 12:08:17 UTC (rev 125882)
@@ -92,7 +92,7 @@
this._registerShortcuts();
- this._popoverHelper = new WebInspector.PopoverHelper(document.body, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+ this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
this._popoverHelper.setTimeout(0);
WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.NodeRemoved, this._nodeRemoved, this);
@@ -425,70 +425,22 @@
*/
_showPopover: function(anchor, popover)
{
- var listItem = anchor.enclosingNodeOrSelfWithNodeNameInArray(["li"]);
+ var listItem = anchor.enclosingNodeOrSelfWithNodeName("li");
if (listItem && listItem.treeElement)
- this._loadDimensionsForNode(listItem.treeElement, dimensionsCallback);
+ this._loadDimensionsForNode(listItem.treeElement, WebInspector.buildImagePreviewContents.bind(WebInspector, anchor.href, true, showPopover));
else
- dimensionsCallback();
+ WebInspector.buildImagePreviewContents(anchor.href, true, showPopover);
/**
- * @param {Object=} dimensions
+ * @param {Element=} contents
*/
- function dimensionsCallback(dimensions)
+ function showPopover(contents)
{
- var imageElement = document.createElement("img");
- imageElement.addEventListener("load", showPopover.bind(null, imageElement, dimensions), false);
- var resource = WebInspector.resourceTreeModel.resourceForURL(anchor.href);
- if (!resource)
+ if (!contents)
return;
-
- resource.populateImageSource(imageElement);
- }
-
- /**
- * @param {Object=} dimensions
- */
- function showPopover(imageElement, dimensions)
- {
- var contents = buildPopoverContents(imageElement, dimensions);
popover.setCanShrink(false);
popover.show(contents, anchor);
}
-
- /**
- * @param {Object=} nodeDimensions
- */
- 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()
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-08-17 12:08:17 UTC (rev 125882)
@@ -939,8 +939,13 @@
popover.show(WebInspector.TimelinePresentationModel.generatePopupContentForFrame(frame), anchor);
} else {
if (anchor.row && anchor.row._record)
- popover.show(anchor.row._record.generatePopupContent(), anchor);
+ anchor.row._record.generatePopupContent(showCallback);
}
+
+ function showCallback(popupContent)
+ {
+ popover.show(popupContent, anchor);
+ }
},
_closeRecordDetails: function()
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-08-17 12:08:17 UTC (rev 125882)
@@ -171,6 +171,27 @@
}
/**
+ * @param {string=} recordType
+ * @return {boolean}
+ */
+WebInspector.TimelinePresentationModel.needsPreviewElement = function(recordType)
+{
+ if (!recordType)
+ return false;
+ const recordTypes = WebInspector.TimelineModel.RecordType;
+ switch (recordType) {
+ case recordTypes.ScheduleResourceRequest:
+ case recordTypes.ResourceSendRequest:
+ case recordTypes.ResourceReceiveResponse:
+ case recordTypes.ResourceReceivedData:
+ case recordTypes.ResourceFinish:
+ return true;
+ default:
+ return false;
+ }
+}
+
+/**
* @param {string} recordType
* @param {string=} title
*/
@@ -637,10 +658,24 @@
return this.startTime <= time && time <= this.endTime;
},
- generatePopupContent: function()
+ /**
+ * @param {function(Element)} callback
+ */
+ generatePopupContent: function(callback)
{
+ if (WebInspector.TimelinePresentationModel.needsPreviewElement(this.type))
+ WebInspector.buildImagePreviewContents(this.url, false, this._generatePopupContentWithImagePreview.bind(this, callback));
+ else
+ this._generatePopupContentWithImagePreview(callback);
+ },
+
+ /**
+ * @param {function(Element)} callback
+ * @param {Element=} previewElement
+ */
+ _generatePopupContentWithImagePreview: function(callback, previewElement)
+ {
var contentHelper = new WebInspector.TimelinePresentationModel.PopupContentHelper(this.title);
-
var text = WebInspector.UIString("%s (at %s)", Number.secondsToString(this._lastChildEndTime - this.startTime, true),
Number.secondsToString(this._startTimeOffset));
contentHelper._appendTextRow(WebInspector.UIString("Duration"), text);
@@ -678,6 +713,8 @@
case recordTypes.ResourceReceivedData:
case recordTypes.ResourceFinish:
contentHelper._appendElementRow(WebInspector.UIString("Resource"), this._linkifyLocation(this.url));
+ if (previewElement)
+ contentHelper._appendElementRow(WebInspector.UIString("Preview"), previewElement);
if (this.data["requestMethod"])
contentHelper._appendTextRow(WebInspector.UIString("Request Method"), this.data["requestMethod"]);
if (typeof this.data["statusCode"] === "number")
@@ -720,7 +757,7 @@
if (this.stackTrace)
contentHelper._appendStackTrace(WebInspector.UIString("Call Stack"), this.stackTrace, this._linkifyCallFrame.bind(this));
- return contentHelper._contentTable;
+ callback(contentHelper._contentTable);
},
_refreshDetails: function()
@@ -860,6 +897,7 @@
/**
* @constructor
+ * @param {string} title
*/
WebInspector.TimelinePresentationModel.PopupContentHelper = function(title)
{
Modified: trunk/Source/WebCore/inspector/front-end/UIUtils.js (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/UIUtils.js 2012-08-17 12:08:17 UTC (rev 125882)
@@ -1039,6 +1039,54 @@
}
/**
+ * @param {string} imageURL
+ * @param {boolean} showDimensions
+ * @param {function(Element=)} userCallback
+ * @param {Object=} precomputedDimensions
+ */
+WebInspector.buildImagePreviewContents = function(imageURL, showDimensions, userCallback, precomputedDimensions)
+{
+ var resource = WebInspector.resourceTreeModel.resourceForURL(imageURL);
+ if (!resource) {
+ userCallback();
+ return;
+ }
+
+ var imageElement = document.createElement("img");
+ imageElement.addEventListener("load", buildContent, false);
+ imageElement.addEventListener("error", errorCallback, false);
+ resource.populateImageSource(imageElement);
+
+ function errorCallback()
+ {
+ // Drop the event parameter when invoking userCallback.
+ userCallback();
+ }
+
+ function buildContent()
+ {
+ var container = document.createElement("table");
+ container.className = "image-preview-container";
+ var naturalWidth = precomputedDimensions ? precomputedDimensions.naturalWidth : imageElement.naturalWidth;
+ var naturalHeight = precomputedDimensions ? precomputedDimensions.naturalHeight : imageElement.naturalHeight;
+ var offsetWidth = precomputedDimensions ? precomputedDimensions.offsetWidth : naturalWidth;
+ var offsetHeight = precomputedDimensions ? precomputedDimensions.offsetHeight : naturalHeight;
+ var description;
+ if (showDimensions) {
+ 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);
+ }
+
+ container.createChild("tr").createChild("td", "image-container").appendChild(imageElement);
+ if (description)
+ container.createChild("tr").createChild("td").createChild("span", "description").textContent = description;
+ userCallback(container);
+ }
+}
+
+/**
* @param {WebInspector.ContextMenu} contextMenu
* @param {Node} contextNode
* @param {Event} event
Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-08-17 12:08:17 UTC (rev 125882)
@@ -566,11 +566,12 @@
.image-preview-container {
background: transparent;
text-align: center;
- padding-left: 11px;
}
.image-preview-container img {
margin: 2px auto;
+ max-width: 100px;
+ max-height: 100px;
background-image: url(Images/checker.png);
-webkit-user-select: text;
-webkit-user-drag: auto;
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (125881 => 125882)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-08-17 12:06:27 UTC (rev 125881)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-08-17 12:08:17 UTC (rev 125882)
@@ -654,3 +654,21 @@
background-color: rgba(255, 255, 255, 0.75);
z-index: 350;
}
+
+.image-preview-container {
+ background: transparent;
+ text-align: left;
+ border-spacing: 0;
+}
+
+.image-preview-container img {
+ max-width: 100px;
+ max-height: 100px;
+ background-image: url(Images/checker.png);
+ -webkit-user-select: text;
+ -webkit-user-drag: auto;
+}
+
+.image-container {
+ padding: 0;
+}
