<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[128590] trunk/Source/WebCore</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/128590">128590</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2012-09-14 05:05:44 -0700 (Fri, 14 Sep 2012)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Display Named Flows in the &quot;CSS Named Flows&quot; drawer
https://bugs.webkit.org/show_bug.cgi?id=90871

Patch by Andrei Poenaru &lt;poenaru@adobe.com&gt; on 2012-09-14
Reviewed by Alexander Pavlov.

Implemented CSS Regions support in WebInspector as a drawer. (feature is under an experimental flag)

* English.lproj/localizedStrings.js:
* WebCore.gypi:
* WebCore.vcproj/WebCore.vcproj:
* inspector/compile-front-end.py:
* inspector/front-end/CSSNamedFlowCollectionsView.js: Added.
(WebInspector.CSSNamedFlowCollectionsView):
(WebInspector.CSSNamedFlowCollectionsView.prototype.showInDrawer):
(WebInspector.CSSNamedFlowCollectionsView.prototype.reset):
(WebInspector.CSSNamedFlowCollectionsView.prototype._setDocument):
(WebInspector.CSSNamedFlowCollectionsView.prototype._documentUpdated):
(WebInspector.CSSNamedFlowCollectionsView.prototype._setSidebarHasContent):
(WebInspector.CSSNamedFlowCollectionsView.prototype._appendNamedFlow):
(WebInspector.CSSNamedFlowCollectionsView.prototype._removeNamedFlow):
(WebInspector.CSSNamedFlowCollectionsView.prototype._updateNamedFlow):
(WebInspector.CSSNamedFlowCollectionsView.prototype._resetNamedFlows):
(WebInspector.CSSNamedFlowCollectionsView.prototype._namedFlowCreated):
(WebInspector.CSSNamedFlowCollectionsView.prototype._namedFlowRemoved):
(WebInspector.CSSNamedFlowCollectionsView.prototype._regionLayoutUpdated):
(WebInspector.CSSNamedFlowCollectionsView.prototype._hashNamedFlow):
(WebInspector.CSSNamedFlowCollectionsView.prototype._showNamedFlow):
(WebInspector.CSSNamedFlowCollectionsView.prototype._selectNamedFlowInSidebar):
(WebInspector.CSSNamedFlowCollectionsView.prototype._selectedNodeChanged):
(WebInspector.CSSNamedFlowCollectionsView.prototype._showNamedFlowForNode):
(WebInspector.CSSNamedFlowCollectionsView.prototype.wasShown):
(WebInspector.CSSNamedFlowCollectionsView.prototype.willHide):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel.prototype._contextMenuEventFired.set get var):
(WebInspector.ElementsPanel.prototype._showNamedFlowCollections):
* inspector/front-end/Images/namedFlowOverflow.png: Added.
* inspector/front-end/Settings.js:
(WebInspector.ExperimentsSettings):
* inspector/front-end/WebKit.qrc:
* inspector/front-end/cssNamedFlows.css: Added.
(.css-named-flow-collections-view .split-view-sidebar-left):
(.css-named-flow-collections-view .tabbed-pane-header):
(.css-named-flow-collections-view .info):
(.css-named-flow-collections-view .split-view-sidebar-left .sidebar-content):
(.css-named-flow-collections-view .split-view-sidebar-left .selection):
(.css-named-flow-collections-view .split-view-contents .title):
(.css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreEnglishlprojlocalizedStringsjs">trunk/Source/WebCore/English.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebCoreWebCoregypi">trunk/Source/WebCore/WebCore.gypi</a></li>
<li><a href="#trunkSourceWebCoreWebCorevcprojWebCorevcproj">trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj</a></li>
<li><a href="#trunkSourceWebCoreinspectorcompilefrontendpy">trunk/Source/WebCore/inspector/compile-front-end.py</a></li>
<li><a href="#trunkSourceWebCoreinspectorfrontendElementsPaneljs">trunk/Source/WebCore/inspector/front-end/ElementsPanel.js</a></li>
<li><a href="#trunkSourceWebCoreinspectorfrontendSettingsjs">trunk/Source/WebCore/inspector/front-end/Settings.js</a></li>
<li><a href="#trunkSourceWebCoreinspectorfrontendWebKitqrc">trunk/Source/WebCore/inspector/front-end/WebKit.qrc</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreinspectorfrontendCSSNamedFlowCollectionsViewjs">trunk/Source/WebCore/inspector/front-end/CSSNamedFlowCollectionsView.js</a></li>
<li><a href="#trunkSourceWebCoreinspectorfrontendImagesnamedFlowOverflowpng">trunk/Source/WebCore/inspector/front-end/Images/namedFlowOverflow.png</a></li>
<li><a href="#trunkSourceWebCoreinspectorfrontendcssNamedFlowscss">trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/ChangeLog        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -1,3 +1,53 @@
</span><ins>+2012-09-14  Andrei Poenaru  &lt;poenaru@adobe.com&gt;
+
+        Web Inspector: Display Named Flows in the &quot;CSS Named Flows&quot; drawer
+        https://bugs.webkit.org/show_bug.cgi?id=90871
+
+        Reviewed by Alexander Pavlov.
+
+        Implemented CSS Regions support in WebInspector as a drawer. (feature is under an experimental flag)
+
+        * English.lproj/localizedStrings.js:
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/compile-front-end.py:
+        * inspector/front-end/CSSNamedFlowCollectionsView.js: Added.
+        (WebInspector.CSSNamedFlowCollectionsView):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype.showInDrawer):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype.reset):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._setDocument):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._documentUpdated):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._setSidebarHasContent):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._appendNamedFlow):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._removeNamedFlow):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._updateNamedFlow):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._resetNamedFlows):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._namedFlowCreated):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._namedFlowRemoved):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._regionLayoutUpdated):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._hashNamedFlow):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._showNamedFlow):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._selectNamedFlowInSidebar):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._selectedNodeChanged):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype._showNamedFlowForNode):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype.wasShown):
+        (WebInspector.CSSNamedFlowCollectionsView.prototype.willHide):
+        * inspector/front-end/ElementsPanel.js:
+        (WebInspector.ElementsPanel.prototype._contextMenuEventFired.set get var):
+        (WebInspector.ElementsPanel.prototype._showNamedFlowCollections):
+        * inspector/front-end/Images/namedFlowOverflow.png: Added.
+        * inspector/front-end/Settings.js:
+        (WebInspector.ExperimentsSettings):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/cssNamedFlows.css: Added.
+        (.css-named-flow-collections-view .split-view-sidebar-left):
+        (.css-named-flow-collections-view .tabbed-pane-header):
+        (.css-named-flow-collections-view .info):
+        (.css-named-flow-collections-view .split-view-sidebar-left .sidebar-content):
+        (.css-named-flow-collections-view .split-view-sidebar-left .selection):
+        (.css-named-flow-collections-view .split-view-contents .title):
+        (.css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before):
+
</ins><span class="cx"> 2012-09-14  Yoshifumi Inoue  &lt;yosin@chromium.org&gt;
</span><span class="cx"> 
</span><span class="cx">         Unreviewed fix for build break on Chromium-Linux Debug build.
</span></span></pre></div>
<a id="trunkSourceWebCoreEnglishlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/English.lproj/localizedStrings.js        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/English.lproj/localizedStrings.js        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -95,6 +95,8 @@
</span><span class="cx"> localizedStrings[&quot;COUNTERS&quot;] = &quot;COUNTERS&quot;;
</span><span class="cx"> localizedStrings[&quot;CPU PROFILES&quot;] = &quot;CPU PROFILES&quot;;
</span><span class="cx"> localizedStrings[&quot;CPU profiles show where the execution time is spent in your page's JavaScript functions.&quot;] = &quot;CPU profiles show where the execution time is spent in your page's JavaScript functions.&quot;;
</span><ins>+localizedStrings[&quot;CSS Named Flows&quot;] = &quot;CSS Named Flows&quot;;
+localizedStrings[&quot;CSS Named Flows...&quot;] = &quot;CSS Named Flows...&quot;;
</ins><span class="cx"> localizedStrings[&quot;CSS SELECTOR PROFILES&quot;] = &quot;CSS SELECTOR PROFILES&quot;;
</span><span class="cx"> localizedStrings[&quot;CSS selector profiles show how long the selector matching has taken in total and how many times a certain selector has matched DOM elements (the results are approximate due to matching algorithm optimizations.)&quot;] = &quot;CSS selector profiles show how long the selector matching has taken in total and how many times a certain selector has matched DOM elements (the results are approximate due to matching algorithm optimizations.)&quot;;
</span><span class="cx"> localizedStrings[&quot;Call Site stack&quot;] = &quot;Call Site stack&quot;;
</span><span class="lines">@@ -272,6 +274,7 @@
</span><span class="cx"> localizedStrings[&quot;Next/previous suggestion&quot;] = &quot;Next/previous suggestion&quot;;
</span><span class="cx"> localizedStrings[&quot;No Application Cache information available.&quot;] = &quot;No Application Cache information available.&quot;;
</span><span class="cx"> localizedStrings[&quot;No Breakpoints&quot;] = &quot;No Breakpoints&quot;;
</span><ins>+localizedStrings[&quot;No CSS Named Flows&quot;] = &quot;No CSS Named Flows&quot;;
</ins><span class="cx"> localizedStrings[&quot;No Event Listeners&quot;] = &quot;No Event Listeners&quot;;
</span><span class="cx"> localizedStrings[&quot;No Properties&quot;] = &quot;No Properties&quot;;
</span><span class="cx"> localizedStrings[&quot;No Variables&quot;] = &quot;No Variables&quot;;
</span><span class="lines">@@ -292,6 +295,7 @@
</span><span class="cx"> localizedStrings[&quot;Open Link in Resources Panel&quot;] = &quot;Open Link in Resources Panel&quot;;
</span><span class="cx"> localizedStrings[&quot;Open link in Resources panel&quot;] = &quot;Open link in Resources panel&quot;;
</span><span class="cx"> localizedStrings[&quot;Other&quot;] = &quot;Other&quot;;
</span><ins>+localizedStrings[&quot;Overflows.&quot;] = &quot;Overflows.&quot;;
</ins><span class="cx"> localizedStrings[&quot;Device metrics&quot;] = &quot;Device metrics&quot;;
</span><span class="cx"> localizedStrings[&quot;Paint&quot;] = &quot;Paint&quot;;
</span><span class="cx"> localizedStrings[&quot;Image Decode&quot;] = &quot;Image Decode&quot;;
</span></span></pre></div>
<a id="trunkSourceWebCoreWebCoregypi"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.gypi (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.gypi        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/WebCore.gypi        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -6468,6 +6468,7 @@
</span><span class="cx">             'inspector/front-end/auditsPanel.css',
</span><span class="cx">             'inspector/front-end/breadcrumbList.css',
</span><span class="cx">             'inspector/front-end/cm/codemirror.css',
</span><ins>+            'inspector/front-end/cssNamedFlows.css',
</ins><span class="cx">             'inspector/front-end/cmdevtools.css',
</span><span class="cx">             'inspector/front-end/dataGrid.css',
</span><span class="cx">             'inspector/front-end/elementsPanel.css',
</span><span class="lines">@@ -6494,6 +6495,7 @@
</span><span class="cx">             'inspector/front-end/webGLProfiler.css',
</span><span class="cx">         ],
</span><span class="cx">         'webinspector_elements_js_files': [
</span><ins>+            'inspector/front-end/CSSNamedFlowCollectionsView.js',
</ins><span class="cx">             'inspector/front-end/ElementsPanel.js',
</span><span class="cx">             'inspector/front-end/EventListenersSidebarPane.js',
</span><span class="cx">             'inspector/front-end/MetricsSidebarPane.js',
</span><span class="lines">@@ -6611,6 +6613,7 @@
</span><span class="cx">             'inspector/front-end/Images/checker.png',
</span><span class="cx">             'inspector/front-end/Images/closeButtons.png',
</span><span class="cx">             'inspector/front-end/Images/cookie.png',
</span><ins>+            'inspector/front-end/Images/namedFlowOverflow.png',
</ins><span class="cx">             'inspector/front-end/Images/database.png',
</span><span class="cx">             'inspector/front-end/Images/databaseTable.png',
</span><span class="cx">             'inspector/front-end/Images/debuggerContinue.png',
</span></span></pre></div>
<a id="trunkSourceWebCoreWebCorevcprojWebCorevcproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -76022,6 +76022,14 @@
</span><span class="cx">                                         &gt;
</span><span class="cx">                                 &lt;/File&gt;
</span><span class="cx">                                 &lt;File
</span><ins>+                                        RelativePath=&quot;..\inspector\front-end\CSSNamedFlowCollectionsView.js&quot;
+                                        &gt;
+                                &lt;/File&gt;
+                                &lt;File
+                                        RelativePath=&quot;..\inspector\front-end\cssNamedFlows.css&quot;
+                                        &gt;
+                                &lt;/File&gt;
+                                &lt;File
</ins><span class="cx">                                         RelativePath=&quot;..\inspector\front-end\CSSSelectorProfileView.js&quot;
</span><span class="cx">                                         &gt;
</span><span class="cx">                                 &lt;/File&gt;
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorcompilefrontendpy"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/compile-front-end.py (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/compile-front-end.py        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/inspector/compile-front-end.py        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -179,6 +179,7 @@
</span><span class="cx">         &quot;name&quot;: &quot;elements&quot;,
</span><span class="cx">         &quot;dependencies&quot;: [&quot;components&quot;],
</span><span class="cx">         &quot;sources&quot;: [
</span><ins>+            &quot;CSSNamedFlowCollectionsView.js&quot;,
</ins><span class="cx">             &quot;ElementsPanel.js&quot;,
</span><span class="cx">             &quot;ElementsPanelDescriptor.js&quot;,
</span><span class="cx">             &quot;EventListenersSidebarPane.js&quot;,
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendCSSNamedFlowCollectionsViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/inspector/front-end/CSSNamedFlowCollectionsView.js (0 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/CSSNamedFlowCollectionsView.js                                (rev 0)
+++ trunk/Source/WebCore/inspector/front-end/CSSNamedFlowCollectionsView.js        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -0,0 +1,340 @@
</span><ins>+/*
+ * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
+ * FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ * COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+ * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+ * OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.SplitView}
+ */
+WebInspector.CSSNamedFlowCollectionsView = function()
+{
+    WebInspector.SplitView.call(this, WebInspector.SplitView.SidebarPosition.Left);
+    this.registerRequiredCSS(&quot;cssNamedFlows.css&quot;);
+
+    this._namedFlows = {};
+    this._contentNodes = {};
+    this._regionNodes = {};
+
+    this.element.addStyleClass(&quot;css-named-flow-collections-view&quot;);
+    this.element.addStyleClass(&quot;fill&quot;);
+
+    this._statusElement = document.createElement(&quot;span&quot;);
+    this._statusElement.textContent = WebInspector.UIString(&quot;CSS Named Flows&quot;);
+
+    var sidebarHeader = this._leftElement.createChild(&quot;div&quot;, &quot;tabbed-pane-header selected sidebar-header&quot;)
+    var tab = sidebarHeader.createChild(&quot;div&quot;, &quot;tabbed-pane-header-tab&quot;);
+    tab.createChild(&quot;span&quot;, &quot;tabbed-pane-header-tab-title&quot;).textContent = WebInspector.UIString(&quot;CSS Named Flows&quot;);
+
+    this._sidebarContentElement = this._leftElement.createChild(&quot;div&quot;, &quot;sidebar-content outline-disclosure&quot;);
+    this._flowListElement = this._sidebarContentElement.createChild(&quot;ol&quot;);
+    this._flowTree = new TreeOutline(this._flowListElement);
+
+    this._emptyElement = document.createElement(&quot;div&quot;);
+    this._emptyElement.addStyleClass(&quot;info&quot;);
+    this._emptyElement.textContent = WebInspector.UIString(&quot;No CSS Named Flows&quot;);
+
+    this._tabbedPane = new WebInspector.TabbedPane();
+    this._tabbedPane.closeableTabs = true;
+    this._tabbedPane.show(this._rightElement);
+}
+
+WebInspector.CSSNamedFlowCollectionsView.prototype = {
+    showInDrawer: function()
+    {
+        WebInspector.showViewInDrawer(this._statusElement, this);
+    },
+
+    reset: function()
+    {
+        if (!this._document)
+            return;
+
+        WebInspector.cssModel.getNamedFlowCollectionAsync(this._document.id, this._resetNamedFlows.bind(this));
+    },
+
+    /**
+     * @param {WebInspector.DOMDocument} document
+     */
+    _setDocument: function(document)
+    {
+        this._document = document;
+        this.reset();
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _documentUpdated: function(event)
+    {
+        var document = /** @type {WebInspector.DOMDocument} */ event.data;
+        this._setDocument(document);
+    },
+
+    /**
+     * @param {boolean} hasContent
+     */
+    _setSidebarHasContent: function(hasContent)
+    {
+        if (hasContent) {
+            if (!this._emptyElement.parentNode)
+                return;
+
+            this._sidebarContentElement.removeChild(this._emptyElement);
+            this._sidebarContentElement.appendChild(this._flowListElement);
+        } else {
+            if (!this._flowListElement.parentNode)
+                return;
+
+            this._sidebarContentElement.removeChild(this._flowListElement);
+            this._sidebarContentElement.appendChild(this._emptyElement);
+        }
+    },
+
+    /**
+     * @param {WebInspector.NamedFlow} flow
+     */
+    _appendNamedFlow: function(flow)
+    {
+        var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
+        var flowContainer = { flow: flow, flowHash: flowHash };
+
+        for (var i = 0; i &lt; flow.content.length; ++i)
+            this._contentNodes[flow.content[i]] = flowHash;
+        for (var i = 0; i &lt; flow.regions.length; ++i)
+            this._regionNodes[flow.regions[i].nodeId] = flowHash;
+
+        var container = document.createElement(&quot;div&quot;);
+        container.createChild(&quot;div&quot;, &quot;selection&quot;);
+        container.createChild(&quot;span&quot;, &quot;title&quot;).createChild(&quot;span&quot;).textContent = flow.name;
+
+        var flowTreeElement = new TreeElement(container, flowContainer);
+        if (flow.overset)
+            flowTreeElement.title.addStyleClass(&quot;named-flow-overflow&quot;)
+
+        flowContainer.flowTreeElement = flowTreeElement;
+        this._namedFlows[flowHash] = flowContainer;
+
+        if (!this._flowTree.children.length)
+            this._setSidebarHasContent(true);
+        this._flowTree.appendChild(flowTreeElement);
+    },
+
+    /**
+     * @param {string} flowHash
+     */
+    _removeNamedFlow: function(flowHash)
+    {
+        var flowContainer = this._namedFlows[flowHash];
+
+        this._flowTree.removeChild(flowContainer.flowTreeElement);
+
+        var flow = flowContainer.flow;
+        for (var i = 0; i &lt; flow.content.length; ++i)
+            delete this._contentNodes[flow.content[i]];
+        for (var i = 0; i &lt; flow.regions.length; ++i)
+            delete this._regionNodes[flow.regions[i].nodeId];
+
+        delete this._namedFlows[flowHash];
+
+        if (!this._flowTree.children.length)
+            this._setSidebarHasContent(false);
+    },
+
+    /**
+     * @param {WebInspector.NamedFlow} flow
+     */
+    _updateNamedFlow: function(flow)
+    {
+        var flowHash = this._hashNamedFlow(flow.documentNodeId, flow.name);
+        var flowContainer = this._namedFlows[flowHash];
+
+        if (!flowContainer)
+            return;
+
+        var oldFlow = flowContainer.flow;
+        flowContainer.flow = flow;
+
+        for (var i = 0; i &lt; oldFlow.content.length; ++i)
+            delete this._contentNodes[oldFlow.content[i]];
+        for (var i = 0; i &lt; oldFlow.regions.length; ++i)
+            delete this._regionNodes[oldFlow.regions[i].nodeId];
+
+        for (var i = 0; i &lt; flow.content.length; ++i)
+            this._contentNodes[flow.content[i]] = flowHash;
+        for (var i = 0; i &lt; flow.regions.length; ++i)
+            this._regionNodes[flow.regions[i].nodeId] = flowHash;
+
+        if (flow.overset !== oldFlow.overset) {
+            if (flow.overset)
+                flowContainer.flowTreeElement.title.addStyleClass(&quot;named-flow-overflow&quot;);
+            else
+                flowContainer.flowTreeElement.title.removeStyleClass(&quot;named-flow-overflow&quot;);
+        }
+    },
+
+    /**
+     * @param {WebInspector.NamedFlowCollection} namedFlowCollection
+     */
+    _resetNamedFlows: function(namedFlowCollection)
+    {
+        for (var flowHash in this._namedFlows)
+            this._removeNamedFlow(flowHash);
+
+        var namedFlows = namedFlowCollection.namedFlowMap;
+        for (var flowName in namedFlows)
+            this._appendNamedFlow(namedFlows[flowName]);
+
+        if (!this._flowTree.children.length)
+            this._setSidebarHasContent(false);
+        else
+            this._showNamedFlowForNode(WebInspector.panel(&quot;elements&quot;).treeOutline.selectedDOMNode());
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _namedFlowCreated: function(event)
+    {
+        // FIXME: We only have support for Named Flows in the main document.
+        if (event.data.documentNodeId !== this._document.id)
+            return;
+
+        var flow = /** @type {WebInspector.NamedFlow} */ event.data;
+        this._appendNamedFlow(flow);
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _namedFlowRemoved: function(event)
+    {
+        // FIXME: We only have support for Named Flows in the main document.
+        if (event.data.documentNodeId !== this._document.id)
+            return;
+
+        this._removeNamedFlow(this._hashNamedFlow(event.data.documentNodeId, event.data.flowName));
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _regionLayoutUpdated: function(event)
+    {
+        // FIXME: We only have support for Named Flows in the main document.
+        if (event.data.documentNodeId !== this._document.id)
+            return;
+
+        var flow = /** @type {WebInspector.NamedFlow} */ event.data;
+        this._updateNamedFlow(flow);
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} documentNodeId
+     * @param {string} flowName
+     */
+    _hashNamedFlow: function(documentNodeId, flowName)
+    {
+        return documentNodeId + &quot;|&quot; + flowName;
+    },
+
+    /**
+     * @param {string} flowHash
+     */
+    _showNamedFlow: function(flowHash)
+    {
+        this._selectNamedFlowInSidebar(flowHash);
+    },
+
+    /**
+     * @param {string} flowHash
+     */
+    _selectNamedFlowInSidebar: function(flowHash)
+    {
+        this._namedFlows[flowHash].flowTreeElement.select(true);
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _selectedNodeChanged: function(event)
+    {
+        var node = /** @type {WebInspector.DOMNode} */ event.data;
+        this._showNamedFlowForNode(node);
+    },
+
+    /**
+     * @param {?WebInspector.DOMNode} node
+     */
+    _showNamedFlowForNode: function(node)
+    {
+        if (!node)
+            return;
+
+        if (this._regionNodes[node.id]) {
+            this._showNamedFlow(this._regionNodes[node.id]);
+            return;
+        }
+
+        while (node) {
+            if (this._contentNodes[node.id]) {
+                this._showNamedFlow(this._contentNodes[node.id]);
+                return;
+            }
+
+            node = node.parentNode;
+        }
+    },
+
+    wasShown: function()
+    {
+        WebInspector.SplitView.prototype.wasShown.call(this);
+
+        WebInspector.domAgent.requestDocument(this._setDocument.bind(this));
+
+        WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
+
+        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
+        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
+        WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
+
+        WebInspector.panel(&quot;elements&quot;).treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
+    },
+
+    willHide: function()
+    {
+        WebInspector.domAgent.removeEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdated, this);
+
+        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowCreated, this._namedFlowCreated, this);
+        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.NamedFlowRemoved, this._namedFlowRemoved, this);
+        WebInspector.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.RegionLayoutUpdated, this._regionLayoutUpdated, this);
+
+        WebInspector.panel(&quot;elements&quot;).treeOutline.removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
+    }
+}
+
+WebInspector.CSSNamedFlowCollectionsView.prototype.__proto__ = WebInspector.SplitView.prototype;
</ins></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendElementsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -28,6 +28,7 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><ins>+importScript(&quot;CSSNamedFlowCollectionsView.js&quot;);
</ins><span class="cx"> importScript(&quot;EventListenersSidebarPane.js&quot;);
</span><span class="cx"> importScript(&quot;MetricsSidebarPane.js&quot;);
</span><span class="cx"> importScript(&quot;PropertiesSidebarPane.js&quot;);
</span><span class="lines">@@ -336,12 +337,25 @@
</span><span class="cx"> 
</span><span class="cx">         var contextMenu = new WebInspector.ContextMenu();
</span><span class="cx">         var populated = this.treeOutline.populateContextMenu(contextMenu, event);
</span><ins>+
+        if (WebInspector.experimentsSettings.cssRegions.isEnabled()) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString(&quot;CSS Named Flows...&quot;), this._showNamedFlowCollections.bind(this));
+        }
+
</ins><span class="cx">         contextMenu.appendSeparator();
</span><span class="cx">         contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? &quot;Word wrap&quot; : &quot;Word Wrap&quot;), toggleWordWrap.bind(this), WebInspector.settings.domWordWrap.get());
</span><span class="cx"> 
</span><span class="cx">         contextMenu.show(event);
</span><span class="cx">     },
</span><span class="cx"> 
</span><ins>+    _showNamedFlowCollections: function()
+    {
+        if (!WebInspector.cssNamedFlowCollectionsView)
+            WebInspector.cssNamedFlowCollectionsView = new WebInspector.CSSNamedFlowCollectionsView();
+        WebInspector.cssNamedFlowCollectionsView.showInDrawer();
+    },
+
</ins><span class="cx">     _domWordWrapSettingChanged: function(event)
</span><span class="cx">     {
</span><span class="cx">         if (event.data)
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendImagesnamedFlowOverflowpng"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/inspector/front-end/Images/namedFlowOverflow.png (0 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/Images/namedFlowOverflow.png                                (rev 0)
+++ trunk/Source/WebCore/inspector/front-end/Images/namedFlowOverflow.png        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+\x89PNG
+
+ +IHDR
+
+\xF0\'. PLTE\xFF\xFF\xFF\xFFff\xFF33\xAF\xFA\xE00tRNS@\xE6\xD8fIDAT[c\xF8\xFF\xFF\x9E\xFF\x83Js-a\x80\xD0`\x80Hu\x8A\xF4_IEND\xAEB`\x82
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendSettingsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/front-end/Settings.js (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/Settings.js        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/inspector/front-end/Settings.js        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -197,6 +197,7 @@
</span><span class="cx">     this.deviceOrientationOverride = this._createExperiment(&quot;deviceOrientationOverride&quot;, &quot;Override Device Orientation&quot;);
</span><span class="cx">     this.sass = this._createExperiment(&quot;sass&quot;, &quot;Support for SASS&quot;);
</span><span class="cx">     this.codemirror = this._createExperiment(&quot;codemirror&quot;, &quot;Use CodeMirror editor&quot;);
</span><ins>+    this.cssRegions = this._createExperiment(&quot;cssRegions&quot;, &quot;CSS Regions Support&quot;);
</ins><span class="cx"> 
</span><span class="cx">     this._cleanUpSetting();
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendWebKitqrc"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/front-end/WebKit.qrc (128589 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/WebKit.qrc        2012-09-14 11:57:47 UTC (rev 128589)
+++ trunk/Source/WebCore/inspector/front-end/WebKit.qrc        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -31,6 +31,7 @@
</span><span class="cx">     &lt;file&gt;CPUProfileView.js&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;CSSCompletions.js&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;CSSKeywordCompletions.js&lt;/file&gt;
</span><ins>+    &lt;file&gt;CSSNamedFlowCollectionsView.js&lt;/file&gt;
</ins><span class="cx">     &lt;file&gt;CSSSelectorProfileView.js&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;CSSStyleModel.js&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;cm/codemirror.css&lt;/file&gt;
</span><span class="lines">@@ -215,6 +216,7 @@
</span><span class="cx">     &lt;file&gt;UglifyJS/parse-js.js&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;auditsPanel.css&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;breadcrumbList.css&lt;/file&gt;
</span><ins>+    &lt;file&gt;cssNamedFlows.css&lt;/file&gt;
</ins><span class="cx">     &lt;file&gt;dataGrid.css&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;cmdevtools.css&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;dialog.css&lt;/file&gt;
</span><span class="lines">@@ -288,6 +290,7 @@
</span><span class="cx">     &lt;file&gt;Images/indexedDBIndex.png&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;Images/localStorage.png&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;Images/navigatorShowHideButton.png&lt;/file&gt;
</span><ins>+    &lt;file&gt;Images/namedFlowOverflow.png&lt;/file&gt;
</ins><span class="cx">     &lt;file&gt;Images/paneAddButtons.png&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;Images/paneBottomGrow.png&lt;/file&gt;
</span><span class="cx">     &lt;file&gt;Images/paneBottomGrowActive.png&lt;/file&gt;
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorfrontendcssNamedFlowscss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css (0 => 128590)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css                                (rev 0)
+++ trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css        2012-09-14 12:05:44 UTC (rev 128590)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+/*
+ * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
+ * FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ * COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+ * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+ * OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.css-named-flow-collections-view .split-view-sidebar-left {
+    border-right: 1px solid rgb(163, 163, 163);
+    overflow-x: hidden;
+}
+
+.css-named-flow-collections-view .tabbed-pane-header {
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
+}
+
+.css-named-flow-collections-view .info {
+    font-style: italic;
+    font-size: 10px;
+    margin-top: -5px;
+    position: absolute;
+    top: 50%;
+    text-align: center;
+    width: 100%;
+}
+
+.css-named-flow-collections-view .split-view-sidebar-left .sidebar-content {
+    bottom: 0px;
+    left: 0px;
+    padding: 0px;
+    position: absolute;
+    right: 0px;
+    top: 23px;
+}
+
+.css-named-flow-collections-view .split-view-sidebar-left .selection {
+    margin-left: -12px;
+    z-index: 0;
+}
+
+.css-named-flow-collections-view .split-view-contents .title {
+    position: relative;
+}
+
+.css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before {
+    content: url(Images/namedFlowOverflow.png);
+    cursor: default;
+    float: left;
+    height: 10px;
+    margin: 2px 3px 0px -13px;
+    opacity: 0.75;
+    position: relative;
+    vertical-align: middle;
+    z-index: 1;
+}
</ins></span></pre>
</div>
</div>

</body>
</html>