Log Message
Web Inspector: [CSS Regions] Display CSS Regions flow name in the inspector overlay https://bugs.webkit.org/show_bug.cgi?id=121794
Reviewed by Joseph Pecoraro. Source/WebCore: No new tests, the previous test for CSS Regions highlighting covers the flow name. This patch adds the "Flow" property in the inspector overlay. The region chain is already displayed with numbers, so it makes sense to have the flow name around when a CSS region is highlighted. I've consolidated the flow information into "elementInfo.flowInfo". Flow info has two properties: "name" and "regions". * inspector/InspectorOverlay.cpp: (WebCore::buildObjectForCSSRegionsHighlight): (WebCore::InspectorOverlay::buildObjectForHighlightedNode): * inspector/InspectorOverlayPage.css: (.css-property): Added the CSS property font color that the Inspector uses. * inspector/InspectorOverlayPage.html: Added a new element to be used to display the flow-from property. * inspector/InspectorOverlayPage.js: (_drawElementTitle): (drawNodeHighlight): LayoutTests: Updated the expected results after moving the regions to the elementInfo.flowInfo property. Also, the test is now logging the name of the flow container in the output. * http/tests/inspector/elements-test.js: * inspector/elements/highlight-node-regions-expected.txt:
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/http/tests/inspector/elements-test.js
- trunk/LayoutTests/inspector/elements/highlight-node-regions-expected.txt
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/inspector/InspectorOverlay.cpp
- trunk/Source/WebCore/inspector/InspectorOverlayPage.css
- trunk/Source/WebCore/inspector/InspectorOverlayPage.html
- trunk/Source/WebCore/inspector/InspectorOverlayPage.js
Diff
Modified: trunk/LayoutTests/ChangeLog (156291 => 156292)
--- trunk/LayoutTests/ChangeLog 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/LayoutTests/ChangeLog 2013-09-23 20:45:55 UTC (rev 156292)
@@ -1,3 +1,16 @@
+2013-09-23 Alexandru Chiculita <[email protected]>
+
+ Web Inspector: [CSS Regions] Display CSS Regions flow name in the inspector overlay
+ https://bugs.webkit.org/show_bug.cgi?id=121794
+
+ Reviewed by Joseph Pecoraro.
+
+ Updated the expected results after moving the regions to the elementInfo.flowInfo property.
+ Also, the test is now logging the name of the flow container in the output.
+
+ * http/tests/inspector/elements-test.js:
+ * inspector/elements/highlight-node-regions-expected.txt:
+
2013-09-23 ChangSeok Oh <[email protected]>
[Texmap] Reloading a webgl page doesn't work
Modified: trunk/LayoutTests/http/tests/inspector/elements-test.js (156291 => 156292)
--- trunk/LayoutTests/http/tests/inspector/elements-test.js 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/LayoutTests/http/tests/inspector/elements-test.js 2013-09-23 20:45:55 UTC (rev 156292)
@@ -620,9 +620,9 @@
}
// Reformat the string using JSON.stringify.
var json = JSON.parse(highlight);
- if (!json.regions) {
+ if (!json.elementInfo || !json.elementInfo.flowInfo) {
output("No highlighted regions.");
return;
}
- output(JSON.stringify(json.regions, null, 4));
+ output(JSON.stringify(json.elementInfo.flowInfo, null, 4));
}
Modified: trunk/LayoutTests/inspector/elements/highlight-node-regions-expected.txt (156291 => 156292)
--- trunk/LayoutTests/inspector/elements/highlight-node-regions-expected.txt 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/LayoutTests/inspector/elements/highlight-node-regions-expected.txt 2013-09-23 20:45:55 UTC (rev 156292)
@@ -1,286 +1,289 @@
This test verifies the position and size of the highlighted CSS Regions quads overlayed on the inspected div.
-[
- {
- "borderQuad": [
- {
- "x": 5,
- "y": 5
- },
- {
- "x": 255,
- "y": 5
- },
- {
- "x": 255,
- "y": 255
- },
- {
- "x": 5,
- "y": 255
- }
- ],
- "incomingQuad": [
- {
- "x": 0,
- "y": 15
- },
- {
- "x": 10,
- "y": 15
- },
- {
- "x": 10,
- "y": 25
- },
- {
- "x": 0,
- "y": 25
- }
- ],
- "outgoingQuad": [
- {
- "x": 250,
- "y": 235
- },
- {
- "x": 260,
- "y": 235
- },
- {
- "x": 260,
- "y": 245
- },
- {
- "x": 250,
- "y": 245
- }
- ]
- },
- {
- "borderQuad": [
- {
- "x": 265,
- "y": 5
- },
- {
- "x": 515,
- "y": 5
- },
- {
- "x": 515,
- "y": 255
- },
- {
- "x": 265,
- "y": 255
- }
- ],
- "incomingQuad": [
- {
- "x": 260,
- "y": 15
- },
- {
- "x": 270,
- "y": 15
- },
- {
- "x": 270,
- "y": 25
- },
- {
- "x": 260,
- "y": 25
- }
- ],
- "outgoingQuad": [
- {
- "x": 510,
- "y": 235
- },
- {
- "x": 520,
- "y": 235
- },
- {
- "x": 520,
- "y": 245
- },
- {
- "x": 510,
- "y": 245
- }
- ],
- "isHighlighted": true
- },
- {
- "borderQuad": [
- {
- "x": 525,
- "y": 5
- },
- {
- "x": 775,
- "y": 5
- },
- {
- "x": 775,
- "y": 255
- },
- {
- "x": 525,
- "y": 255
- }
- ],
- "incomingQuad": [
- {
- "x": 520,
- "y": 15
- },
- {
- "x": 530,
- "y": 15
- },
- {
- "x": 530,
- "y": 25
- },
- {
- "x": 520,
- "y": 25
- }
- ],
- "outgoingQuad": [
- {
- "x": 770,
- "y": 235
- },
- {
- "x": 780,
- "y": 235
- },
- {
- "x": 780,
- "y": 245
- },
- {
- "x": 770,
- "y": 245
- }
- ]
- },
- {
- "borderQuad": [
- {
- "x": 5,
- "y": 265
- },
- {
- "x": 205,
- "y": 265
- },
- {
- "x": 205,
- "y": 265
- },
- {
- "x": 5,
- "y": 265
- }
- ],
- "incomingQuad": [
- {
- "x": 0,
- "y": 260
- },
- {
- "x": 10,
- "y": 260
- },
- {
- "x": 10,
- "y": 270
- },
- {
- "x": 0,
- "y": 270
- }
- ],
- "outgoingQuad": [
- {
- "x": 200,
- "y": 260
- },
- {
- "x": 210,
- "y": 260
- },
- {
- "x": 210,
- "y": 270
- },
- {
- "x": 200,
- "y": 270
- }
- ]
- },
- {
- "borderQuad": [
- {
- "x": 215,
- "y": 265
- },
- {
- "x": 215,
- "y": 265
- },
- {
- "x": 215,
- "y": 265
- },
- {
- "x": 215,
- "y": 265
- }
- ],
- "incomingQuad": [
- {
- "x": 210,
- "y": 260
- },
- {
- "x": 220,
- "y": 260
- },
- {
- "x": 220,
- "y": 270
- },
- {
- "x": 210,
- "y": 270
- }
- ],
- "outgoingQuad": [
- {
- "x": 210,
- "y": 260
- },
- {
- "x": 220,
- "y": 260
- },
- {
- "x": 220,
- "y": 270
- },
- {
- "x": 210,
- "y": 270
- }
- ]
- }
-]
+{
+ "name": "flow",
+ "regions": [
+ {
+ "borderQuad": [
+ {
+ "x": 5,
+ "y": 5
+ },
+ {
+ "x": 255,
+ "y": 5
+ },
+ {
+ "x": 255,
+ "y": 255
+ },
+ {
+ "x": 5,
+ "y": 255
+ }
+ ],
+ "incomingQuad": [
+ {
+ "x": 0,
+ "y": 15
+ },
+ {
+ "x": 10,
+ "y": 15
+ },
+ {
+ "x": 10,
+ "y": 25
+ },
+ {
+ "x": 0,
+ "y": 25
+ }
+ ],
+ "outgoingQuad": [
+ {
+ "x": 250,
+ "y": 235
+ },
+ {
+ "x": 260,
+ "y": 235
+ },
+ {
+ "x": 260,
+ "y": 245
+ },
+ {
+ "x": 250,
+ "y": 245
+ }
+ ]
+ },
+ {
+ "borderQuad": [
+ {
+ "x": 265,
+ "y": 5
+ },
+ {
+ "x": 515,
+ "y": 5
+ },
+ {
+ "x": 515,
+ "y": 255
+ },
+ {
+ "x": 265,
+ "y": 255
+ }
+ ],
+ "incomingQuad": [
+ {
+ "x": 260,
+ "y": 15
+ },
+ {
+ "x": 270,
+ "y": 15
+ },
+ {
+ "x": 270,
+ "y": 25
+ },
+ {
+ "x": 260,
+ "y": 25
+ }
+ ],
+ "outgoingQuad": [
+ {
+ "x": 510,
+ "y": 235
+ },
+ {
+ "x": 520,
+ "y": 235
+ },
+ {
+ "x": 520,
+ "y": 245
+ },
+ {
+ "x": 510,
+ "y": 245
+ }
+ ],
+ "isHighlighted": true
+ },
+ {
+ "borderQuad": [
+ {
+ "x": 525,
+ "y": 5
+ },
+ {
+ "x": 775,
+ "y": 5
+ },
+ {
+ "x": 775,
+ "y": 255
+ },
+ {
+ "x": 525,
+ "y": 255
+ }
+ ],
+ "incomingQuad": [
+ {
+ "x": 520,
+ "y": 15
+ },
+ {
+ "x": 530,
+ "y": 15
+ },
+ {
+ "x": 530,
+ "y": 25
+ },
+ {
+ "x": 520,
+ "y": 25
+ }
+ ],
+ "outgoingQuad": [
+ {
+ "x": 770,
+ "y": 235
+ },
+ {
+ "x": 780,
+ "y": 235
+ },
+ {
+ "x": 780,
+ "y": 245
+ },
+ {
+ "x": 770,
+ "y": 245
+ }
+ ]
+ },
+ {
+ "borderQuad": [
+ {
+ "x": 5,
+ "y": 265
+ },
+ {
+ "x": 205,
+ "y": 265
+ },
+ {
+ "x": 205,
+ "y": 265
+ },
+ {
+ "x": 5,
+ "y": 265
+ }
+ ],
+ "incomingQuad": [
+ {
+ "x": 0,
+ "y": 260
+ },
+ {
+ "x": 10,
+ "y": 260
+ },
+ {
+ "x": 10,
+ "y": 270
+ },
+ {
+ "x": 0,
+ "y": 270
+ }
+ ],
+ "outgoingQuad": [
+ {
+ "x": 200,
+ "y": 260
+ },
+ {
+ "x": 210,
+ "y": 260
+ },
+ {
+ "x": 210,
+ "y": 270
+ },
+ {
+ "x": 200,
+ "y": 270
+ }
+ ]
+ },
+ {
+ "borderQuad": [
+ {
+ "x": 215,
+ "y": 265
+ },
+ {
+ "x": 215,
+ "y": 265
+ },
+ {
+ "x": 215,
+ "y": 265
+ },
+ {
+ "x": 215,
+ "y": 265
+ }
+ ],
+ "incomingQuad": [
+ {
+ "x": 210,
+ "y": 260
+ },
+ {
+ "x": 220,
+ "y": 260
+ },
+ {
+ "x": 220,
+ "y": 270
+ },
+ {
+ "x": 210,
+ "y": 270
+ }
+ ],
+ "outgoingQuad": [
+ {
+ "x": 210,
+ "y": 260
+ },
+ {
+ "x": 220,
+ "y": 260
+ },
+ {
+ "x": 220,
+ "y": 270
+ },
+ {
+ "x": 210,
+ "y": 270
+ }
+ ]
+ }
+ ]
+}
Modified: trunk/Source/WebCore/ChangeLog (156291 => 156292)
--- trunk/Source/WebCore/ChangeLog 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/Source/WebCore/ChangeLog 2013-09-23 20:45:55 UTC (rev 156292)
@@ -1,3 +1,29 @@
+2013-09-23 Alexandru Chiculita <[email protected]>
+
+ Web Inspector: [CSS Regions] Display CSS Regions flow name in the inspector overlay
+ https://bugs.webkit.org/show_bug.cgi?id=121794
+
+ Reviewed by Joseph Pecoraro.
+
+ No new tests, the previous test for CSS Regions highlighting covers the flow name.
+
+ This patch adds the "Flow" property in the inspector overlay. The region
+ chain is already displayed with numbers, so it makes sense to have the flow
+ name around when a CSS region is highlighted.
+
+ I've consolidated the flow information into "elementInfo.flowInfo".
+ Flow info has two properties: "name" and "regions".
+
+ * inspector/InspectorOverlay.cpp:
+ (WebCore::buildObjectForCSSRegionsHighlight):
+ (WebCore::InspectorOverlay::buildObjectForHighlightedNode):
+ * inspector/InspectorOverlayPage.css:
+ (.css-property): Added the CSS property font color that the Inspector uses.
+ * inspector/InspectorOverlayPage.html: Added a new element to be used to display the flow-from property.
+ * inspector/InspectorOverlayPage.js:
+ (_drawElementTitle):
+ (drawNodeHighlight):
+
2013-09-23 Simon Fraser <[email protected]>
Rapidly loading pages can result in !needsLayout() assertions in FrameView::paintContents() and RenderView::paint()
Modified: trunk/Source/WebCore/inspector/InspectorOverlay.cpp (156291 => 156292)
--- trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2013-09-23 20:45:55 UTC (rev 156292)
@@ -46,6 +46,7 @@
#include "RenderBoxModelObject.h"
#include "RenderFlowThread.h"
#include "RenderInline.h"
+#include "RenderNamedFlowThread.h"
#include "RenderObject.h"
#include "RenderRegion.h"
#include "RenderView.h"
@@ -396,19 +397,10 @@
return regionObject.release();
}
-static void buildObjectForCSSRegionsHighlight(Node* node, InspectorObject* highlightNodeObject)
+static PassRefPtr<InspectorArray> buildObjectForCSSRegionsHighlight(RenderRegion* region, RenderFlowThread* flowThread)
{
- RenderObject* renderer = node->renderer();
- if (!renderer || !renderer->isRenderRegion())
- return;
-
- RenderRegion* region = toRenderRegion(renderer);
- RenderFlowThread* flowThread = region->flowThread();
- if (!flowThread)
- return;
+ FrameView* mainFrameView = region->document().page()->mainFrame().view();
- FrameView* mainFrameView = node->document().page()->mainFrame().view();
-
RefPtr<InspectorArray> array = InspectorArray::create();
const RenderRegionList& regionList = flowThread->renderRegionList();
@@ -426,7 +418,7 @@
array->pushObject(regionHighlightObject.release());
}
- highlightNodeObject->setArray("regions", array.release());
+ return array.release();
}
static PassRefPtr<InspectorObject> buildObjectForSize(const IntSize& size)
@@ -481,9 +473,20 @@
RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0;
elementInfo->setString("nodeWidth", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width()));
elementInfo->setString("nodeHeight", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height()));
+
+ if (renderer->isRenderRegion()) {
+ RenderRegion* region = toRenderRegion(renderer);
+ RenderFlowThread* flowThread = region->flowThread();
+ if (flowThread && flowThread->isRenderNamedFlowThread()) {
+ RefPtr<InspectorObject> flowInfo = InspectorObject::create();
+ flowInfo->setString("name", toRenderNamedFlowThread(flowThread)->flowThreadName());
+ flowInfo->setArray("regions", buildObjectForCSSRegionsHighlight(region, flowThread));
+ elementInfo->setObject("flowInfo", flowInfo.release());
+ }
+ }
+
highlightObject->setObject("elementInfo", elementInfo.release());
}
- buildObjectForCSSRegionsHighlight(m_highlightNode.get(), highlightObject.get());
return highlightObject.release();
}
Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.css (156291 => 156292)
--- trunk/Source/WebCore/inspector/InspectorOverlayPage.css 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.css 2013-09-23 20:45:55 UTC (rev 156292)
@@ -66,6 +66,10 @@
color: rgb(153, 69, 0);
}
+.css-property {
+ color: rgb(170, 13, 145);
+}
+
#right-gutter {
display: none;
right: 0;
Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.html (156291 => 156292)
--- trunk/Source/WebCore/inspector/InspectorOverlayPage.html 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.html 2013-09-23 20:45:55 UTC (rev 156292)
@@ -38,6 +38,7 @@
<div id="element-title">
<span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span>
<span id="node-width"></span><span class="px">px</span><span class="px"> × </span><span id="node-height"></span><span class="px">px</span>
+ <span id="flow-name"><br><span class="css-property">Flow</span>: <span id="flow-name-value"></span></span>
</div>
<div id="right-gutter"></div>
<div id="bottom-gutter"></div>
Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.js (156291 => 156292)
--- trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2013-09-23 20:43:17 UTC (rev 156291)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2013-09-23 20:45:55 UTC (rev 156292)
@@ -261,6 +261,12 @@
document.getElementById("class-name").textContent = className || "";
document.getElementById("node-width").textContent = elementInfo.nodeWidth;
document.getElementById("node-height").textContent = elementInfo.nodeHeight;
+ var flowNameElement = document.getElementById("flow-name");
+ if (elementInfo.flowInfo) {
+ flowNameElement.style.display = "";
+ document.getElementById("flow-name-value").textContent = elementInfo.flowInfo.name || "";
+ } else
+ flowNameElement.style.display = "none";
var elementTitle = document.getElementById("element-title");
var marginQuad = highlight.quads[0];
@@ -500,8 +506,8 @@
_drawGrid(highlight, rulerAtRight, rulerAtBottom);
_drawRulers(highlight, rulerAtRight, rulerAtBottom);
- if (highlight.regions)
- _drawRegionsHighlight(highlight.regions, highlight.scrollX, highlight.scrollY);
+ if (highlight.elementInfo && highlight.elementInfo.flowInfo)
+ _drawRegionsHighlight(highlight.elementInfo.flowInfo.regions, highlight.scrollX, highlight.scrollY);
_drawElementTitle(highlight);
context.restore();
_______________________________________________ webkit-changes mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-changes
