Diff
Modified: trunk/Source/WebCore/ChangeLog (95620 => 95621)
--- trunk/Source/WebCore/ChangeLog 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/ChangeLog 2011-09-21 13:33:10 UTC (rev 95621)
@@ -1,3 +1,29 @@
+2011-09-21 Pavel Feldman <pfeld...@google.com>
+
+ Web Inspector: paint box model colors in Metrics sidebar at all times, do not draw box outlines.
+ https://bugs.webkit.org/show_bug.cgi?id=68240
+
+ Today we paint backgrounds in Metrics box model on hover only - should be painted at all
+ times for the reference. Outlining boxes is highlight is wrong since outlines are outside
+ the corresponding box regions. We've seen few reports on that + Firebug does not do borders
+ for that reason.
+
+ Reviewed by Yury Semikhatsky.
+
+ * inspector/DOMNodeHighlighter.cpp:
+ * inspector/DOMNodeHighlighter.h:
+ * inspector/Inspector.json:
+ * inspector/InspectorDOMAgent.cpp:
+ (WebCore::InspectorDOMAgent::setHighlightDataFromConfig):
+ * inspector/front-end/Color.js:
+ * inspector/front-end/MetricsSidebarPane.js:
+ (WebInspector.MetricsSidebarPane.prototype._highlightDOMNode):
+ (WebInspector.MetricsSidebarPane.prototype._updateMetrics):
+ * inspector/front-end/inspector.css:
+ (.metrics .label):
+ * inspector/front-end/inspector.js:
+ (WebInspector.buildHighlightConfig):
+
2011-09-21 Andreas Kling <kl...@webkit.org>
Protect against misuse of EventListenerIterator.
Modified: trunk/Source/WebCore/inspector/DOMNodeHighlighter.cpp (95620 => 95621)
--- trunk/Source/WebCore/inspector/DOMNodeHighlighter.cpp 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/DOMNodeHighlighter.cpp 2011-09-21 13:33:10 UTC (rev 95621)
@@ -99,51 +99,44 @@
context.fillPath(quadPath);
}
-void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, const Color& outlineColor)
+void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor)
{
context.save();
Path clipQuadPath = quadToPath(clipQuad);
context.clipOut(clipQuadPath);
- drawOutlinedQuad(context, quad, fillColor, outlineColor);
+ drawOutlinedQuad(context, quad, fillColor, Color::transparent);
context.restore();
}
void drawHighlightForBox(GraphicsContext& context, const FloatQuad& contentQuad, const FloatQuad& paddingQuad, const FloatQuad& borderQuad, const FloatQuad& marginQuad, HighlightData* highlightData)
{
- bool hasMargin = highlightData->margin != Color::transparent || highlightData->marginOutline != Color::transparent;
- bool hasBorder = highlightData->border != Color::transparent || highlightData->borderOutline != Color::transparent;
- bool hasPadding = highlightData->padding != Color::transparent || highlightData->paddingOutline != Color::transparent;
+ bool hasMargin = highlightData->margin != Color::transparent;
+ bool hasBorder = highlightData->border != Color::transparent;
+ bool hasPadding = highlightData->padding != Color::transparent;
bool hasContent = highlightData->content != Color::transparent || highlightData->contentOutline != Color::transparent;
FloatQuad clipQuad;
Color clipColor;
if (hasMargin && (!hasBorder || marginQuad != borderQuad)) {
- drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlightData->margin, highlightData->marginOutline);
+ drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlightData->margin);
clipQuad = borderQuad;
- clipColor = highlightData->marginOutline;
}
if (hasBorder && (!hasPadding || borderQuad != paddingQuad)) {
- drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlightData->border, highlightData->borderOutline);
+ drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlightData->border);
clipQuad = paddingQuad;
- clipColor = highlightData->borderOutline;
}
if (hasPadding && (!hasContent || paddingQuad != contentQuad)) {
- drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlightData->padding, highlightData->paddingOutline);
+ drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlightData->padding);
clipQuad = contentQuad;
- clipColor = highlightData->paddingOutline;
}
if (hasContent)
drawOutlinedQuad(context, contentQuad, highlightData->content, highlightData->contentOutline);
- else {
- if (clipColor.isValid())
- drawOutlinedQuadWithClip(context, clipQuad, clipQuad, clipColor, clipColor);
- }
}
void drawHighlightForLineBoxesOrSVGRenderer(GraphicsContext& context, const Vector<FloatQuad>& lineBoxQuads, HighlightData* highlightData)
{
for (size_t i = 0; i < lineBoxQuads.size(); ++i)
- drawOutlinedQuad(context, lineBoxQuads[i], highlightData->content, highlightData->contentOutline);
+ drawOutlinedQuad(context, lineBoxQuads[i], highlightData->content, Color::transparent);
}
inline LayoutSize frameToMainFrameOffset(Frame* frame)
Modified: trunk/Source/WebCore/inspector/DOMNodeHighlighter.h (95620 => 95621)
--- trunk/Source/WebCore/inspector/DOMNodeHighlighter.h 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/DOMNodeHighlighter.h 2011-09-21 13:33:10 UTC (rev 95621)
@@ -46,11 +46,8 @@
Color content;
Color contentOutline;
Color padding;
- Color paddingOutline;
Color border;
- Color borderOutline;
Color margin;
- Color marginOutline;
bool showInfo;
// Either of these must be 0.
Modified: trunk/Source/WebCore/inspector/Inspector.json (95620 => 95621)
--- trunk/Source/WebCore/inspector/Inspector.json 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/Inspector.json 2011-09-21 13:33:10 UTC (rev 95621)
@@ -890,18 +890,14 @@
"description": "A structure holding an RGBA color."
},
{
- "id": "BoxHighlightConfig",
+ "id": "HighlightConfig",
"type": "object",
"properties": [
{ "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
{ "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
- { "name": "contentOutlineColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight outline color (default: transparent)." },
{ "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
- { "name": "paddingOutlineColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight outline color (default: transparent)." },
{ "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
- { "name": "borderOutlineColor", "$ref": "RGBA", "optional": true, "description": "The border highlight outline color (default: transparent)." },
{ "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." },
- { "name": "marginOutlineColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight outline color (default: transparent)." }
],
"description": "Configuration data for the highlighting of page elements."
}
@@ -930,7 +926,7 @@
"returns": [
{ "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
],
- "description": "Executes <code>querySelector</code> on a given node. Setting <code>documentWide</code> to true starts selecting from the document node."
+ "description": "Executes <code>querySelector</code> on a given node."
},
{
"name": "querySelectorAll",
@@ -941,7 +937,7 @@
"returns": [
{ "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
],
- "description": "Executes <code>querySelectorAll</code> on a given node. Setting <code>documentWide</code> to true starts selecting from the document node."
+ "description": "Executes <code>querySelectorAll</code> on a given node."
},
{
"name": "setNodeName",
@@ -1064,7 +1060,7 @@
"hidden": true,
"parameters": [
{ "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
- { "name": "highlightConfig", "$ref": "BoxHighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+ { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
],
"description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
},
@@ -1084,7 +1080,7 @@
"name": "highlightNode",
"parameters": [
{ "name": "nodeId", "$ref": "NodeId", "description": "Identifier of the node to highlight." },
- { "name": "highlightConfig", "$ref": "BoxHighlightConfig", "description": "A descriptor for the highlight appearance." }
+ { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." }
],
"description": "Highlights DOM node with given id."
},
Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp (95620 => 95621)
--- trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2011-09-21 13:33:10 UTC (rev 95621)
@@ -1057,11 +1057,8 @@
m_highlightData->content = parseConfigColor("contentColor", highlightConfig);
m_highlightData->contentOutline = parseConfigColor("contentOutlineColor", highlightConfig);
m_highlightData->padding = parseConfigColor("paddingColor", highlightConfig);
- m_highlightData->paddingOutline = parseConfigColor("paddingOutlineColor", highlightConfig);
m_highlightData->border = parseConfigColor("borderColor", highlightConfig);
- m_highlightData->borderOutline = parseConfigColor("borderOutlineColor", highlightConfig);
m_highlightData->margin = parseConfigColor("marginColor", highlightConfig);
- m_highlightData->marginOutline = parseConfigColor("marginOutlineColor", highlightConfig);
return true;
}
Modified: trunk/Source/WebCore/inspector/front-end/Color.js (95620 => 95621)
--- trunk/Source/WebCore/inspector/front-end/Color.js 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/front-end/Color.js 2011-09-21 13:33:10 UTC (rev 95621)
@@ -684,11 +684,12 @@
WebInspector.Color.PageHighlight = {
Content: WebInspector.Color.fromRGBA(111, 168, 220, .66),
+ ContentLight: WebInspector.Color.fromRGBA(111, 168, 220, .5),
ContentOutline: WebInspector.Color.fromRGBA(9, 83, 148),
Padding: WebInspector.Color.fromRGBA(147, 196, 125, .55),
- PaddingOutline: WebInspector.Color.fromRGBA(55, 118, 28),
+ PaddingLight: WebInspector.Color.fromRGBA(147, 196, 125, .4),
Border: WebInspector.Color.fromRGBA(255, 229, 153, .66),
- BorderOutline: WebInspector.Color.fromRGBA(127, 96, 0),
+ BorderLight: WebInspector.Color.fromRGBA(255, 229, 153, .5),
Margin: WebInspector.Color.fromRGBA(246, 178, 107, .66),
- MarginOutline: WebInspector.Color.fromRGBA(180, 95, 4)
-}
\ No newline at end of file
+ MarginLight: WebInspector.Color.fromRGBA(246, 178, 107, .5)
+}
Modified: trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js (95620 => 95621)
--- trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js 2011-09-21 13:33:10 UTC (rev 95621)
@@ -101,74 +101,25 @@
_highlightDOMNode: function(showHighlight, mode, event)
{
- function enclosingOrSelfWithClassInArray(element, classNames)
- {
- for (var node = element; node && node !== element.ownerDocument; node = node.parentNode) {
- if (node.nodeType === Node.ELEMENT_NODE) {
- for (var i = 0; i < classNames.length; ++i) {
- if (node.hasStyleClass(classNames[i]))
- return node;
- }
- }
- }
- return null;
- }
-
- function getBoxRectangleElement(element)
- {
- if (!element)
- return null;
- return enclosingOrSelfWithClassInArray(element, ["metrics", "margin", "border", "padding", "content"]);
- }
-
event.stopPropagation();
- var fromElement = getBoxRectangleElement(event.fromElement);
- var toElement = getBoxRectangleElement(event.toElement);
-
- if (fromElement === toElement)
- return;
-
- function handleMouseOver(element)
- {
- element.addStyleClass("hovered");
-
- var bgColor;
- if (element.hasStyleClass("margin"))
- bgColor = WebInspector.Color.PageHighlight.Margin.toString("original");
- else if (element.hasStyleClass("border"))
- bgColor = WebInspector.Color.PageHighlight.Border.toString("original");
- else if (element.hasStyleClass("padding"))
- bgColor = WebInspector.Color.PageHighlight.Padding.toString("original");
- else if (element.hasStyleClass("content"))
- bgColor = WebInspector.Color.PageHighlight.Content.toString("original");
- if (bgColor)
- element.style.backgroundColor = bgColor;
- }
-
- function handleMouseOut(element)
- {
- element.style.backgroundColor = "";
- element.removeStyleClass("hovered");
- }
-
- if (showHighlight) {
- // Into element.
- if (this.node && toElement)
- handleMouseOver(toElement);
- var nodeId = this.node ? this.node.id : 0;
- } else {
- // Out of element.
- if (fromElement)
- handleMouseOut(fromElement);
- var nodeId = 0;
- }
+ var nodeId = showHighlight && this.node ? this.node.id : 0;
if (nodeId) {
if (this._highlightMode === mode)
return;
this._highlightMode = mode;
- } else
+ WebInspector.highlightDOMNode(nodeId, mode);
+ } else {
delete this._highlightMode;
- WebInspector.highlightDOMNode(nodeId, mode);
+ WebInspector.highlightDOMNode(0, "");
+ }
+
+ for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
+ var element = this._boxElements[i];
+ if (!nodeId || mode === "all" || element._name === mode)
+ element.style.backgroundColor = element._backgroundColor;
+ else
+ element.style.backgroundColor = "";
+ }
},
_updateMetrics: function(style)
@@ -248,8 +199,16 @@
};
var boxes = ["content", "padding", "border", "margin", "position"];
+ var boxColors = [
+ WebInspector.Color.PageHighlight.Content,
+ WebInspector.Color.PageHighlight.Padding,
+ WebInspector.Color.PageHighlight.Border,
+ WebInspector.Color.PageHighlight.Margin,
+ WebInspector.Color.fromRGBA(0, 0, 0, 0)
+ ];
var boxLabels = [WebInspector.UIString("content"), WebInspector.UIString("padding"), WebInspector.UIString("border"), WebInspector.UIString("margin"), WebInspector.UIString("position")];
var previousBox;
+ this._boxElements = [];
for (var i = 0; i < boxes.length; ++i) {
var name = boxes[i];
@@ -262,8 +221,11 @@
var boxElement = document.createElement("div");
boxElement.className = name;
+ boxElement._backgroundColor = boxColors[i].toString("original");
+ boxElement._name = name;
+ boxElement.style.backgroundColor = boxElement._backgroundColor;
boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
- boxElement.addEventListener("mouseout", this._highlightDOMNode.bind(this, false, ""), false);
+ this._boxElements.push(boxElement);
if (name === "content") {
var widthElement = document.createElement("span");
@@ -301,8 +263,7 @@
}
metricsElement.appendChild(previousBox);
- metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, ""), false);
- metricsElement.addEventListener("mouseout", this._highlightDOMNode.bind(this, false, ""), false);
+ metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false);
this.bodyElement.removeChildren();
this.bodyElement.appendChild(metricsElement);
},
@@ -455,10 +416,12 @@
self.inlineStyle = style;
if (!("originalPropertyData" in self))
self.originalPropertyData = self.previousPropertyDataCandidate;
- if ("_highlightMode" in self) {
+
+ if (typeof self._highlightMode !== "undefined") {
WebInspector.highlightDOMNode(0, "");
WebInspector.highlightDOMNode(self.node.id, self._highlightMode);
}
+
if (commitEditor) {
self.dispatchEventToListeners("metrics edited");
self.update();
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (95620 => 95621)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-09-21 13:33:10 UTC (rev 95621)
@@ -1869,19 +1869,13 @@
.metrics .label {
position: absolute;
- margin-top: -10px;
- font-size: 9px;
- color: grey;
- background-color: white;
+ font-size: 10px;
+ color: black;
margin-left: 3px;
padding-left: 2px;
padding-right: 2px;
}
-.metrics .hovered > .label {
- border: 1px solid black;
-}
-
.metrics .position {
border: 1px rgb(66%, 66%, 66%) dotted;
background-color: white;
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (95620 => 95621)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2011-09-21 13:14:57 UTC (rev 95620)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2011-09-21 13:33:10 UTC (rev 95621)
@@ -368,25 +368,17 @@
{
mode = mode || "all";
var highlightConfig = { showInfo: mode === "all" };
- if (mode === "all" || mode === "content") {
+ if (mode === "all" || mode === "content")
highlightConfig.contentColor = WebInspector.Color.PageHighlight.Content.toProtocolRGBA();
- highlightConfig.contentOutlineColor = WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA();
- }
- if (mode === "all" || mode === "padding") {
+ if (mode === "all" || mode === "padding")
highlightConfig.paddingColor = WebInspector.Color.PageHighlight.Padding.toProtocolRGBA();
- highlightConfig.paddingOutlineColor = WebInspector.Color.PageHighlight.PaddingOutline.toProtocolRGBA();
- }
- if (mode === "all" || mode === "border") {
+ if (mode === "all" || mode === "border")
highlightConfig.borderColor = WebInspector.Color.PageHighlight.Border.toProtocolRGBA();
- highlightConfig.borderOutlineColor = WebInspector.Color.PageHighlight.BorderOutline.toProtocolRGBA();
- }
- if (mode === "all" || mode === "margin") {
+ if (mode === "all" || mode === "margin")
highlightConfig.marginColor = WebInspector.Color.PageHighlight.Margin.toProtocolRGBA();
- highlightConfig.marginOutlineColor = WebInspector.Color.PageHighlight.MarginOutline.toProtocolRGBA();
- }
return highlightConfig;
},
@@ -398,9 +390,6 @@
delete this._hideDOMNodeHighlightTimeout;
}
- if (this._highlightedDOMNodeId === nodeId)
- return;
-
this._highlightedDOMNodeId = nodeId;
if (nodeId)
DOMAgent.highlightNode(nodeId, this.buildHighlightConfig(mode));
