Changeset 95621 in webkit

Timestamp:

Sep 21, 2011 6:33:10 AM (13 years ago)

Author:

pfeldman@chromium.org

Message:

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):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/DOMNodeHighlighter.cpp (modified) (4 diffs)
• inspector/DOMNodeHighlighter.h (modified) (1 diff)
• inspector/Inspector.json (modified) (5 diffs)
• inspector/InspectorDOMAgent.cpp (modified) (1 diff)
• inspector/front-end/Color.js (modified) (1 diff)
• inspector/front-end/MetricsSidebarPane.js (modified) (5 diffs)
• inspector/front-end/inspector.css (modified) (1 diff)
• inspector/front-end/inspector.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2011-09-21  Pavel Feldman  <pfeldman@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  <kling@webkit.org>
 

trunk/Source/WebCore/inspector/DOMNodeHighlighter.cpp

@@ -100 +100 @@
 }
 
-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();
 }
@@ -111 +111 @@
 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;
 
@@ -119 +119 @@
     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);
-    }
 }
 
@@ -144 +137 @@
 {
     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);
 }
 

trunk/Source/WebCore/inspector/DOMNodeHighlighter.h

@@ -47 +47 @@
     Color contentOutline;
     Color padding;
-    Color paddingOutline;
     Color border;
-    Color borderOutline;
     Color margin;
-    Color marginOutline;
     bool showInfo;
 

trunk/Source/WebCore/inspector/Inspector.json

@@ -891 +891 @@
             },
             {
-                "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."
@@ -931 +927 @@
                     { "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."
             },
             {
@@ -942 +938 @@
                     { "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."
             },
             {
@@ -1065 +1061 @@
                 "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."
@@ -1085 +1081 @@
                 "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."

trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp

@@ -1058 +1058 @@
     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;
 }

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

@@ -685 +685 @@
 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)
+    MarginLight: WebInspector.Color.fromRGBA(246, 178, 107, .5)
 }

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

@@ -102 +102 @@
     _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 = "";
+        }
     },
 
@@ -249 +200 @@
 
         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];
@@ -263 +222 @@
             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") {
@@ -302 +264 @@
 
         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);
@@ -456 +417 @@
             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");

trunk/Source/WebCore/inspector/front-end/inspector.css

@@ -1870 +1870 @@
 .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;
 }
 

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

@@ -369 +369 @@
         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 +390 @@
             delete this._hideDOMNodeHighlightTimeout;
         }
-
-        if (this._highlightedDOMNodeId === nodeId)
-            return;
 
         this._highlightedDOMNodeId = nodeId;