Web Inspector: Make CSS files load upon View demand; split inspector.css into views.
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 24 Oct 2011 10:01:42 +0000 (10:01 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 24 Oct 2011 10:01:42 +0000 (10:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=70694

Patch by Pavel Feldman <pfeldman@chromium.org> on 2011-10-24
Reviewed by Yury Semikhatsky.

* WebCore.gypi:
* WebCore.vcproj/WebCore.vcproj:
* inspector/front-end/AuditsPanel.js:
(WebInspector.AuditsPanel):
* inspector/front-end/DataGrid.js:
(WebInspector.DataGrid):
* inspector/front-end/ElementsPanel.js:
* inspector/front-end/NetworkPanel.js:
(WebInspector.NetworkLogView):
* inspector/front-end/PanelEnablerView.js:
* inspector/front-end/ProfilesPanel.js:
* inspector/front-end/ResourceView.js:
(WebInspector.ResourceView):
* inspector/front-end/ResourcesPanel.js:
* inspector/front-end/ScriptsPanel.js:
* inspector/front-end/TextViewer.js:
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel):
* inspector/front-end/WebKit.qrc:
* inspector/front-end/WelcomeView.js:
(WebInspector.WelcomeView):
* inspector/front-end/auditsPanel.css: Renamed from Source/WebCore/inspector/front-end/audits.css.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@98228 268f45cc-cd09-0410-ab3c-d52691b4dbfc

28 files changed:
Source/WebCore/ChangeLog
Source/WebCore/WebCore.gypi
Source/WebCore/WebCore.vcproj/WebCore.vcproj
Source/WebCore/inspector/front-end/AuditsPanel.js
Source/WebCore/inspector/front-end/DataGrid.js
Source/WebCore/inspector/front-end/ElementsPanel.js
Source/WebCore/inspector/front-end/NetworkPanel.js
Source/WebCore/inspector/front-end/PanelEnablerView.js
Source/WebCore/inspector/front-end/ProfilesPanel.js
Source/WebCore/inspector/front-end/ResourceView.js
Source/WebCore/inspector/front-end/ResourcesPanel.js
Source/WebCore/inspector/front-end/ScriptsPanel.js
Source/WebCore/inspector/front-end/TextViewer.js
Source/WebCore/inspector/front-end/TimelinePanel.js
Source/WebCore/inspector/front-end/WebKit.qrc
Source/WebCore/inspector/front-end/WelcomeView.js
Source/WebCore/inspector/front-end/auditsPanel.css [moved from Source/WebCore/inspector/front-end/audits.css with 100% similarity]
Source/WebCore/inspector/front-end/elementsPanel.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/inspector.css
Source/WebCore/inspector/front-end/inspector.html
Source/WebCore/inspector/front-end/networkLogView.css
Source/WebCore/inspector/front-end/networkPanel.css
Source/WebCore/inspector/front-end/panelEnablerView.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/profilesPanel.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/resourceView.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/resourcesPanel.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/scriptsPanel.css [new file with mode: 0644]
Source/WebCore/inspector/front-end/timelinePanel.css [new file with mode: 0644]

index 0a4a1d2..5827052 100755 (executable)
@@ -1,5 +1,35 @@
 2011-10-24  Pavel Feldman  <pfeldman@chromium.org>
 
+        Web Inspector: Make CSS files load upon View demand; split inspector.css into views.
+        https://bugs.webkit.org/show_bug.cgi?id=70694
+
+        Reviewed by Yury Semikhatsky.
+
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/front-end/AuditsPanel.js:
+        (WebInspector.AuditsPanel):
+        * inspector/front-end/DataGrid.js:
+        (WebInspector.DataGrid):
+        * inspector/front-end/ElementsPanel.js:
+        * inspector/front-end/NetworkPanel.js:
+        (WebInspector.NetworkLogView):
+        * inspector/front-end/PanelEnablerView.js:
+        * inspector/front-end/ProfilesPanel.js:
+        * inspector/front-end/ResourceView.js:
+        (WebInspector.ResourceView):
+        * inspector/front-end/ResourcesPanel.js:
+        * inspector/front-end/ScriptsPanel.js:
+        * inspector/front-end/TextViewer.js:
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/WelcomeView.js:
+        (WebInspector.WelcomeView):
+        * inspector/front-end/auditsPanel.css: Renamed from Source/WebCore/inspector/front-end/audits.css.
+
+2011-10-24  Pavel Feldman  <pfeldman@chromium.org>
+
         Web Inspector: make view load CSS files upon show.
         https://bugs.webkit.org/show_bug.cgi?id=70696
 
index 3ef9e4b..297c2a0 100644 (file)
             'inspector/front-end/WelcomeView.js',
             'inspector/front-end/WorkerManager.js',
             'inspector/front-end/WorkersSidebarPane.js',
-            'inspector/front-end/audits.css',
             'inspector/front-end/goToLineDialog.css',
-            'inspector/front-end/heapProfiler.css',
             'inspector/front-end/helpScreen.css',
             'inspector/front-end/inspector.css',
             'inspector/front-end/inspectorSyntaxHighlight.css',
-            'inspector/front-end/networkPanel.css',
             'inspector/front-end/popover.css',
-            'inspector/front-end/textViewer.css',
             '<@(webinspector_standalone_css_files)',
             '<@(webinspector_extension_api_files)',
         ],
         'webinspector_standalone_css_files': [
+            'inspector/front-end/auditsPanel.css',
             'inspector/front-end/dataGrid.css',
-            'inspector/front-end/inspectorCommon.css',
+            'inspector/front-end/elementsPanel.css',
+            'inspector/front-end/heapProfiler.css',
             'inspector/front-end/networkLogView.css',
+            'inspector/front-end/networkPanel.css',
+            'inspector/front-end/panelEnablerView.css',
+            'inspector/front-end/profilesPanel.css',
+            'inspector/front-end/resourceView.css',
+            'inspector/front-end/resourcesPanel.css',
+            'inspector/front-end/scriptsPanel.css',
+            'inspector/front-end/textViewer.css',
+            'inspector/front-end/timelinePanel.css',
         ],
         'webinspector_extension_api_files': [
             'inspector/front-end/ExtensionAPI.js',
index 926a921..e821a7a 100755 (executable)
                                        >
                                </File>
                                <File
-                                       RelativePath="..\inspector\front-end\audits.css"
+                                       RelativePath="..\inspector\front-end\auditsPanel.css"
                                        >
                                </File>
                                <File
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\elementsPanel.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\ElementsTreeOutline.js"
                                        >
                                </File>
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\panelEnablerView.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\Placard.js"
                                        >
                                </File>
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\resourcesPanel.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\ResourceTimingView.js"
                                        >
                                </File>
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\resourceView.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\ScopeChainSidebarPane.js"
                                        >
                                </File>
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\scriptsPanel.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\ScriptsSearchScope.js"
                                        >
                                </File>
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\timelinePanel.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\Toolbar.js"
                                        >
                                </File>
index 92b531f..3d9e3f9 100644 (file)
@@ -35,6 +35,7 @@
 WebInspector.AuditsPanel = function()
 {
     WebInspector.Panel.call(this, "audits");
+    this.registerRequiredCSS("auditsPanel.css");
 
     this.createSidebar();
     this.auditsTreeElement = new WebInspector.SidebarSectionTreeElement("", {}, true);
index ceb4b64..74b2ef3 100644 (file)
@@ -32,6 +32,7 @@
 WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("dataGrid.css");
 
     this.element.className = "data-grid";
     this.element.tabIndex = 0;
index c80b676..73b148d 100644 (file)
@@ -35,6 +35,7 @@
 WebInspector.ElementsPanel = function()
 {
     WebInspector.Panel.call(this, "elements");
+    this.registerRequiredCSS("elementsPanel.css");
     this.setHideOnDetach();
 
     this.contentElement = document.createElement("div");
index a774700..23eb7bb 100644 (file)
@@ -35,6 +35,7 @@
 WebInspector.NetworkLogView = function()
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("networkLogView.css");
 
     this._allowResourceSelection = false;
     this._resources = [];
@@ -1214,6 +1215,7 @@ WebInspector.NetworkLogView.EventTypes = {
 WebInspector.NetworkPanel = function()
 {
     WebInspector.Panel.call(this, "network");
+    this.registerRequiredCSS("networkPanel.css");
 
     this.createSidebar();
     this._networkLogView = new WebInspector.NetworkLogView();
index 3ef0c0c..5e762b8 100644 (file)
@@ -30,6 +30,7 @@
 WebInspector.PanelEnablerView = function(identifier, headingText, disclaimerText, buttonTitle)
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("panelEnablerView.css");
 
     this.element.addStyleClass("panel-enabler-view");
     this.element.addStyleClass(identifier);
index e4ab929..8175b45 100644 (file)
@@ -91,6 +91,8 @@ WebInspector.ProfileType.prototype = {
 WebInspector.ProfilesPanel = function()
 {
     WebInspector.Panel.call(this, "profiles");
+    this.registerRequiredCSS("heapProfiler.css");
+    this.registerRequiredCSS("profilesPanel.css");
 
     this.createSidebar();
 
index 5a95011..1a8ec7e 100644 (file)
@@ -34,6 +34,8 @@
 WebInspector.ResourceView = function(resource)
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("resourceView.css");
+
     this.element.addStyleClass("resource-view");
     this.resource = resource;
 }
index 5380f26..f198a73 100644 (file)
@@ -34,6 +34,7 @@
 WebInspector.ResourcesPanel = function(database)
 {
     WebInspector.Panel.call(this, "resources");
+    this.registerRequiredCSS("resourcesPanel.css");
 
     WebInspector.settings.resourcesLastSelectedItem = WebInspector.settings.createSetting("resourcesLastSelectedItem", {});
 
index 70679d0..a77f3d4 100644 (file)
@@ -31,6 +31,7 @@
 WebInspector.ScriptsPanel = function(presentationModel)
 {
     WebInspector.Panel.call(this, "scripts");
+    this.registerRequiredCSS("scriptsPanel.css");
 
     WebInspector.settings.pauseOnExceptionStateString = WebInspector.settings.createSetting("pauseOnExceptionStateString", WebInspector.ScriptsPanel.PauseOnExceptionsState.DontPauseOnExceptions);
 
index 325e638..6c9d905 100644 (file)
@@ -36,6 +36,7 @@
 WebInspector.TextViewer = function(textModel, platform, url, delegate)
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("textViewer.css");
 
     this._textModel = textModel;
     this._textModel.changeListener = this._textChanged.bind(this);
index 6742255..1e1a20c 100644 (file)
@@ -35,6 +35,7 @@
 WebInspector.TimelinePanel = function()
 {
     WebInspector.Panel.call(this, "timeline");
+    this.registerRequiredCSS("timelinePanel.css");
 
     this.element.appendChild(this._createTopPane());
     this.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
index 277274c..bdc4d6a 100644 (file)
     <file>WorkerManager.js</file>
     <file>WorkersSidebarPane.js</file>
     <file>UglifyJS/parse-js.js</file>
-    <file>audits.css</file>
+    <file>auditsPanel.css</file>
     <file>dataGrid.css</file>
+    <file>elementsPanel.css</file>
     <file>goToLineDialog.css</file>
     <file>heapProfiler.css</file>
     <file>helpScreen.css</file>
     <file>inspectorSyntaxHighlight.css</file>
     <file>networkLogView.css</file>
     <file>networkPanel.css</file>
+    <file>panelEnablerView.css</file>
     <file>popover.css</file>
+    <file>profilesPanel.css</file>
+    <file>resourceView.css</file>
+    <file>resourcesPanel.css</file>
+    <file>scriptsPanel.css</file>
     <file>textViewer.css</file>
+    <file>timelinePanel.css</file>
     <file>Images/applicationCache.png</file>
     <file>Images/back.png</file>
     <file>Images/breakpointBorder.png</file>
index 4bc56c6..176b8d4 100644 (file)
@@ -34,6 +34,7 @@
 WebInspector.WelcomeView = function(identifier, headingText, instructionsText)
 {
     WebInspector.View.call(this);
+    this.registerRequiredCSS("panelEnablerView.css");
 
     this.element.addStyleClass("panel-enabler-view");
     this.element.addStyleClass(identifier);
diff --git a/Source/WebCore/inspector/front-end/elementsPanel.css b/Source/WebCore/inspector/front-end/elementsPanel.css
new file mode 100644 (file)
index 0000000..33f34ff
--- /dev/null
@@ -0,0 +1,494 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+#elements-content {
+    display: block;
+    overflow: auto;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 325px;
+    bottom: 0;
+}
+
+#elements-content.nowrap {
+    white-space: nowrap;
+}
+
+#elements-content > ol {
+    display: inline-block;
+}
+
+#elements-sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 325px;
+    border-left: 1px solid rgb(64%, 64%, 64%);
+    cursor: default;
+    overflow: auto;
+}
+
+.crumbs {
+    display: inline-block;
+    font-size: 11px;
+    line-height: 19px;
+    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+    color: rgb(20, 20, 20);
+    margin-left: -1px;
+    padding-right: 12px;
+}
+
+.crumbs .crumb {
+    height: 24px;
+    border-width: 0 12px 0 2px;
+    -webkit-border-image: url(Images/segment.png) 0 12 0 2;
+    margin-right: -12px;
+    padding-left: 18px;
+    padding-right: 2px;
+    white-space: nowrap;
+    line-height: 23px;
+    float: right;
+}
+
+.crumbs .crumb.collapsed > * {
+    display: none;
+}
+
+.crumbs .crumb.collapsed::before {
+    content: "\2026";
+    font-weight: bold;
+}
+
+.crumbs .crumb.compact .extra {
+    display: none;
+}
+
+.crumbs .crumb.dimmed {
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.crumbs .crumb.start {
+    padding-left: 7px;
+}
+
+.crumbs .crumb.end {
+    border-width: 0 2px 0 2px;
+    padding-right: 6px;
+    -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2;
+}
+
+.crumbs .crumb.selected {
+    -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
+    color: black;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+}
+
+.crumbs .crumb.selected:hover {
+    -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
+}
+
+.crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
+    -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2;
+}
+
+.crumbs .crumb:hover {
+    -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
+    color: black;
+}
+
+.crumbs .crumb.dimmed:hover {
+    -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
+    color: rgba(0, 0, 0, 0.75);
+}
+
+.crumbs .crumb.end:hover {
+    -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2;
+}
+
+.metrics {
+    padding: 8px;
+    font-size: 10px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.metrics .label {
+    position: absolute;
+    font-size: 10px;
+    color: black;
+    margin-left: 3px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.metrics .position {
+    border: 1px rgb(66%, 66%, 66%) dotted;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    padding: 3px;
+    margin: 3px;
+}
+
+.metrics .margin {
+    border: 1px dashed;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.metrics .border {
+    border: 1px black solid;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.metrics .padding {
+    border: 1px grey dashed;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.metrics .content {
+    position: static;
+    border: 1px gray solid;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+    min-width: 80px;
+    text-align: center;
+    overflow: visible;
+}
+
+.metrics .content span {
+    display: inline-block;
+}
+
+.metrics .editing {
+    position: relative;
+    z-index: 100;
+}
+
+.metrics .left {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.metrics .right {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.metrics .top {
+    display: inline-block;
+}
+
+.metrics .bottom {
+    display: inline-block;
+}
+
+
+.styles-section {
+    padding: 2px 2px 4px 4px;
+    min-height: 18px;
+    white-space: nowrap;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+    -webkit-user-select: text;
+}
+
+.styles-section:not(.first-styles-section) {
+    border-top: 1px solid rgb(191, 191, 191);
+}
+
+.styles-section.read-only {
+    background-color: rgb(240, 240, 240);
+}
+
+.styles-section .properties li.not-parsed-ok {
+    margin-left: 0px;
+}
+
+.styles-section .properties li.not-parsed-ok::before {
+    content: url(Images/warningIcon.png);
+    opacity: 0.75;
+    float: left;
+    width: 8px;
+    height: 8px;
+    margin-top: 0;
+    padding-right: 5px;
+    vertical-align: sub;
+    -webkit-user-select: none;
+    cursor: default;
+}
+
+.styles-section .header {
+    white-space: nowrap;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+}
+
+.styles-section .header .title {
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.styles-section .header .subtitle {
+    color: rgb(85, 85, 85);
+    float: right;
+    margin-left: 5px;
+    max-width: 65%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.styles-section .header .subtitle a {
+    color: inherit;
+}
+
+.styles-section .properties {
+    display: none;
+    margin: 0;
+    padding: 2px 4px 0 8px;
+    list-style: none;
+}
+
+.styles-section.no-affect .properties li {
+    opacity: 0.5;
+}
+
+.styles-section.no-affect .properties li.editing {
+    opacity: 1.0;
+}
+
+.styles-section.expanded .properties {
+    display: block;
+}
+
+.styles-section .properties li {
+    margin-left: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: auto;
+}
+
+.styles-section .properties li.parent {
+    margin-left: 1px;
+}
+
+.styles-section .properties li.child-editing {
+    word-wrap: break-word !important;
+    white-space: normal !important;
+}
+
+.styles-section .properties ol {
+    display: none;
+    margin: 0;
+    -webkit-padding-start: 12px;
+    list-style: none;
+}
+
+.styles-section .properties ol.expanded {
+    display: block;
+}
+
+.styles-section .properties li.parent::before {
+    content: url(Images/treeRightTriangleBlack.png);
+    opacity: 0.75;
+    float: left;
+    width: 8px;
+    height: 8px;
+    margin-top: 0;
+    padding-right: 3px;
+    -webkit-user-select: none;
+    cursor: default;
+}
+
+.styles-section .properties li.parent.expanded::before {
+    content: url(Images/treeDownTriangleBlack.png);
+    margin-top: 1px;
+}
+
+.styles-section .properties li .info {
+    padding-top: 4px;
+    padding-bottom: 3px;
+}
+
+.styles-section:hover .properties .enabled-button {
+    display: block;
+}
+
+.styles-section .properties li.disabled .enabled-button {
+    display: block;
+}
+
+.styles-section .properties .enabled-button {
+    display: none;
+    float: right;
+    font-size: 10px;
+    margin: 0 0 0 4px;
+    vertical-align: top;
+    position: relative;
+    z-index: 1;
+}
+
+.styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled {
+    text-decoration: line-through;
+}
+
+.styles-section.computed-style .properties .disabled {
+    text-decoration: none;
+    opacity: 0.5;
+}
+
+.styles-section .properties .implicit, .styles-section .properties .inherited {
+    opacity: 0.5;
+}
+
+.styles-element-state-pane {
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    margin-top: -38px;
+    -webkit-transition: margin-top 0.1s ease-in-out;
+    padding-left: 2px;
+}
+
+.styles-element-state-pane.expanded {
+    border-bottom: 1px solid rgb(189, 189, 189);
+    margin-top: 0;
+}
+
+.styles-element-state-pane > table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.styles-element-state-pane input {
+    margin: 2px;
+    vertical-align: -2px;
+}
+
+.styles-sidebar-separator {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
+    padding: 0 5px;
+    border-top: 1px solid rgb(189, 189, 189);
+    border-bottom: 1px solid rgb(189, 189, 189);
+    color: rgb(110, 110, 110);
+    text-shadow: white 0 1px 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 11px;
+}
+
+.styles-selector {
+    cursor: text;
+}
+
+.body .styles-section .properties .inherited {
+    display: none;
+}
+
+.body.show-inherited .styles-section .properties .inherited {
+    display: block;
+}
+
+.add-attribute {
+    margin-left: 1px;
+    margin-right: 1px;
+    white-space: nowrap;
+}
+
+.section .event-bars {
+    display: none;
+}
+
+.section.expanded .event-bars {
+    display: block;
+}
+
+.event-bar {
+    position: relative;
+    margin-left: 10px;
+}
+
+.event-bar:first-child {
+    margin-top: 1px;
+}
+
+.event-bars .event-bar .header {
+    padding: 0 8px 0 18px;
+    min-height: 16px;
+    opacity: 1.0;
+    white-space: nowrap;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+}
+
+.event-bars .event-bar .header .title {
+    font-weight: normal;
+    color: black;
+    text-shadow: white 0 1px 0;
+}
+
+.event-bars .event-bar .header .subtitle {
+    color: rgba(90, 90, 90, 0.75);
+}
+
+.event-bars .event-bar .header::before {
+    position: absolute;
+    top: 2px;
+    left: 7px;
+    width: 8px;
+    height: 8px;
+    opacity: 0.75;
+    content: url(Images/treeRightTriangleBlack.png);
+}
+
+.event-bars .event-bar.expanded .header::before {
+    content: url(Images/treeDownTriangleBlack.png);
+}
index f5a7176..f87b467 100644 (file)
@@ -963,210 +963,6 @@ iframe.panel.extension {
     height: 100%
 }
 
-.resource-view {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    overflow: auto;
-}
-
-.resource-view.visible {
-    display: block;
-}
-
-.resource-view.font {
-    font-size: 60px;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    text-align: center;
-    padding: 15px;
-}
-
-.resource-view.image > .image {
-    padding: 20px 20px 10px 20px;
-    text-align: center;
-}
-
-.resource-view.image > .info {
-    padding-bottom: 10px;
-    font-size: 11px;
-    -webkit-user-select: text;
-}
-
-.resource-view.image img.resource-image-view {
-    max-width: 100%;
-    max-height: 1000px;
-    background-image: url(Images/checker.png);
-    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
-    -webkit-user-select: text;
-    -webkit-user-drag: auto;
-}
-
-.resource-url {
-    vertical-align: middle;
-}
-
-.resource-status-image {
-    margin-top: -3px;
-    vertical-align: middle;
-}
-
-.resource-view.image .title {
-    text-align: center;
-    font-size: 13px;
-}
-
-.resource-view.image .infoList {
-    margin: 0;
-}
-
-.resource-view.image .infoList dt {
-    font-weight: bold;
-    display: inline-block;
-    width: 50%;
-    text-align: right;
-    color: rgb(76, 76, 76);
-}
-
-.resource-view.image .infoList dd {
-    display: inline-block;
-    padding-left: 8px;
-    width: 50%;
-    text-align: left;
-    margin: 0;
-}
-
-.resource-view.image .infoList dd::after {
-    white-space: pre;
-    content: "\A";
-}
-
-.resource-timing-row {
-    position: relative;
-    height: 12px;
-}
-
-.resource-timing-bar {
-    position: absolute;
-    background-color: red;
-    border-left: 1px solid red;
-    opacity: 0.4;
-}
-
-.resource-timing-bar-title {
-    position: absolute;
-}
-
-#elements-content {
-    display: block;
-    overflow: auto;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 325px;
-    bottom: 0;
-}
-
-#elements-content.nowrap {
-    white-space: nowrap;
-}
-
-#elements-content > ol {
-    display: inline-block;
-}
-
-#elements-sidebar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 325px;
-    border-left: 1px solid rgb(64%, 64%, 64%);
-    cursor: default;
-    overflow: auto;
-}
-
-.crumbs {
-    display: inline-block;
-    font-size: 11px;
-    line-height: 19px;
-    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
-    color: rgb(20, 20, 20);
-    margin-left: -1px;
-    padding-right: 12px;
-}
-
-.crumbs .crumb {
-    height: 24px;
-    border-width: 0 12px 0 2px;
-    -webkit-border-image: url(Images/segment.png) 0 12 0 2;
-    margin-right: -12px;
-    padding-left: 18px;
-    padding-right: 2px;
-    white-space: nowrap;
-    line-height: 23px;
-    float: right;
-}
-
-.crumbs .crumb.collapsed > * {
-    display: none;
-}
-
-.crumbs .crumb.collapsed::before {
-    content: "\2026";
-    font-weight: bold;
-}
-
-.crumbs .crumb.compact .extra {
-    display: none;
-}
-
-.crumbs .crumb.dimmed {
-    color: rgba(0, 0, 0, 0.45);
-}
-
-.crumbs .crumb.start {
-    padding-left: 7px;
-}
-
-.crumbs .crumb.end {
-    border-width: 0 2px 0 2px;
-    padding-right: 6px;
-    -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2;
-}
-
-.crumbs .crumb.selected {
-    -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
-    color: black;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-}
-
-.crumbs .crumb.selected:hover {
-    -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
-}
-
-.crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
-    -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2;
-}
-
-.crumbs .crumb:hover {
-    -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
-    color: black;
-}
-
-.crumbs .crumb.dimmed:hover {
-    -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
-    color: rgba(0, 0, 0, 0.75);
-}
-
-.crumbs .crumb.end:hover {
-    -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2;
-}
-
 .outline-disclosure li.hovered:not(.selected) .selection {
     display: block;
     left: 3px;
@@ -1245,10 +1041,6 @@ iframe.panel.extension {
     text-indent: -2px;
 }
 
-.resources .outline-disclosure li {
-    text-indent: -1px;
-}
-
 .outline-disclosure ol:focus li.selected {
     color: white;
 }
@@ -1298,12 +1090,6 @@ iframe.panel.extension {
     display: block;
 }
 
-.add-attribute {
-    margin-left: 1px;
-    margin-right: 1px;
-    white-space: nowrap;
-}
-
 .placard {
     position: relative;
     margin-top: 1px;
@@ -1372,10 +1158,6 @@ body.inactive .placard.selected {
     border-top: 1px solid rgb(191, 191, 191);
 }
 
-.event-bar:first-child {
-    margin-top: 1px;
-}
-
 .section .header {
     color: black;
     padding: 0 8px 0 18px;
@@ -1519,52 +1301,6 @@ body.inactive .placard.selected {
     left: -1px;
 }
 
-.section .event-bars {
-    display: none;
-}
-
-.section.expanded .event-bars {
-    display: block;
-}
-
-.event-bar {
-    position: relative;
-    margin-left: 10px;
-}
-
-.event-bars .event-bar .header {
-    padding: 0 8px 0 18px;
-    min-height: 16px;
-    opacity: 1.0;
-    white-space: nowrap;
-    -webkit-background-origin: padding;
-    -webkit-background-clip: padding;
-}
-
-.event-bars .event-bar .header .title {
-    font-weight: normal;
-    color: black;
-    text-shadow: white 0 1px 0;
-}
-
-.event-bars .event-bar .header .subtitle {
-    color: rgba(90, 90, 90, 0.75);
-}
-
-.event-bars .event-bar .header::before {
-    position: absolute;
-    top: 2px;
-    left: 7px;
-    width: 8px;
-    height: 8px;
-    opacity: 0.75;
-    content: url(Images/treeRightTriangleBlack.png);
-}
-
-.event-bars .event-bar.expanded .header::before {
-    content: url(Images/treeDownTriangleBlack.png);
-}
-
 .editing {
     -webkit-user-select: text;
     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
@@ -1872,102 +1608,6 @@ body.platform-windows .sidebar-pane-subtitle {
     vertical-align: bottom;
 }
 
-.metrics {
-    padding: 8px;
-    font-size: 10px;
-    text-align: center;
-    white-space: nowrap;
-}
-
-.metrics .label {
-    position: absolute;
-    font-size: 10px;
-    color: black;
-    margin-left: 3px;
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-.metrics .position {
-    border: 1px rgb(66%, 66%, 66%) dotted;
-    background-color: white;
-    display: inline-block;
-    text-align: center;
-    padding: 3px;
-    margin: 3px;
-}
-
-.metrics .margin {
-    border: 1px dashed;
-    background-color: white;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.metrics .border {
-    border: 1px black solid;
-    background-color: white;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.metrics .padding {
-    border: 1px grey dashed;
-    background-color: white;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.metrics .content {
-    position: static;
-    border: 1px grey solid;
-    background-color: white;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-    min-width: 80px;
-    text-align: center;
-    overflow: visible;
-}
-
-.metrics .content span {
-    display: inline-block;
-}
-
-.metrics .editing {
-    position: relative;
-    z-index: 100;
-}
-
-.metrics .left {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.metrics .right {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.metrics .top {
-    display: inline-block;
-}
-
-.metrics .bottom {
-    display: inline-block;
-}
-
 .sidebar {
     position: absolute;
     top: 0;
@@ -1984,1717 +1624,475 @@ body.inactive .sidebar {
     background-color: rgb(232, 232, 232);
 }
 
-.frame-storage-tree-item .icon {
-    content: url(Images/frame.png);
+.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
+    color: rgb(6, 6, 6);
+    background-color: transparent;
+    border: 1px solid rgb(165, 165, 165);
+    background-color: rgb(237, 237, 237);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
+    -webkit-border-radius: 12px;
+    -webkit-appearance: none;
 }
 
-.database-storage-tree-item .icon {
-    content: url(Images/database.png);
+button.show-all-nodes {
+    font-size: 13px;
+    margin: 0;
+    padding: 0 20px;
+    height: 20px;
 }
 
-.database-table-storage-tree-item .icon {
-    content: url(Images/databaseTable.png);
+.pane button {
+    margin: 6px 0 6px 3px;
+    padding: 2px 9px;
 }
 
-.domstorage-storage-tree-item.local-storage .icon {
-    content: url(Images/localStorage.png);
-}
-
-.domstorage-storage-tree-item.session-storage .icon {
-    content: url(Images/sessionStorage.png);
-}
-
-.cookie-storage-tree-item .icon {
-    content: url(Images/cookie.png);
-}
-
-.application-cache-storage-tree-item .icon {
-    content: url(Images/applicationCache.png);
-}
-
-/* FIXME: Make separate png for file-system */
-.file-system-storage-tree-item .icon {
-    content: url(Images/applicationCache.png);
-}
-
-#storage-views {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 200px;
-    bottom: 0;
-}
-
-.resources.panel .sidebar {
-    padding-left: 0;
-    z-index: 10;
-}
-
-.resources.panel .sidebar li {
-    height: 17px;
-    white-space: nowrap;
-    text-indent: 0;
-    margin-left: -2px;
-}
-
-.resources.panel .sidebar li.parent {
-    text-indent: 0;
-    margin-left: -12px;
-}
-
-.resources.panel .sidebar li.selected {
-    color: white;
-    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
-    font-weight: bold;
-}
-
-.resources.panel .sidebar li.selected .selection {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
-    border-top: 1px solid #979797;
-    height: 17px;
+.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
+    background-color: rgb(215, 215, 215);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
 }
 
-.resources.panel .sidebar :focus li.selected .selection {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
-    border-top: 1px solid rgb(68, 128, 200);
+body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
+    color: rgb(130, 130, 130);
+    border-color: rgb(212, 212, 212);
+    background-color: rgb(239, 239, 239);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
 }
 
-body.inactive .resources.panel .sidebar li.selected .selection {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
-    border-top: 1px solid rgb(151, 151, 151);
+button.enable-toggle-status-bar-item .glyph {
+    -webkit-mask-position: -192px 0;
 }
 
-.resources.panel .sidebar .icon {
-    width: 16px;
-    height: 16px;
-    float: left;
+button.enable-toggle-status-bar-item.toggled-on .glyph {
+    -webkit-mask-position: -96px -24px;
 }
 
-.resources.panel .base-storage-tree-element-title {
-    overflow: hidden;
-    position: relative;
-    text-overflow: ellipsis;
-    padding-left: 2px;
-    top: 1px;
+button.edit-source-status-bar-item .glyph {
+    -webkit-mask-position: -64px -48px;
 }
 
-li.selected .base-storage-tree-element-subtitle {
-    color: white;
+button.edit-source-status-bar-item.toggled-on .glyph {
+    background-color: rgb(66, 129, 235);
 }
 
-.base-storage-tree-element-subtitle {
-    padding-left: 2px;
-    color: rgb(80, 80, 80);
-    text-shadow: none;
+#console-messages.console-filter-top {
+    margin-top: 23px;
 }
 
-.resources.panel .status {
-    float: right;
-    height: 16px;
+#console-filter {
     margin-top: 1px;
-    margin-left: 4px;
-    line-height: 1em;
-}
-
-.resources.panel li .status .bubble {
-    height: 13px;
-    padding-top: 0;
-}
-
-.storage-view {
-    display: none;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.storage-view.visible {
-    display: block;
 }
 
-.storage-view {
-    overflow: hidden;
-}
-
-.storage-view .data-grid {
-    border: none;
+.tabbed-pane {
+    -webkit-box-orient: vertical;
     height: 100%;
 }
 
-.storage-empty-view, .storage-view .storage-table-error {
-    position: absolute;
-    top: 0;
-    bottom: 25%;
-    left: 0;
-    right: 0;
-    font-size: 24px;
-    color: rgb(75%, 75%, 75%);
-    margin-top: auto;
-    margin-bottom: auto;
-    height: 50px;
-    line-height: 26px;
-    text-align: center;
-    font-weight: bold;
-    padding: 10px;
-    white-space: pre-wrap;
-}
-
-.storage-view .storage-table-error {
-    color: rgb(66%, 33%, 33%);
-}
-
-.storage-view.query {
-    padding: 2px 0;
-    overflow-y: overlay;
-    overflow-x: hidden;
-    -webkit-text-size-adjust: auto;
-}
-
-.database-query-prompt {
-    position: relative;
-    padding: 1px 22px 1px 24px;
-    min-height: 16px;
-    white-space: pre-wrap;
-    -webkit-user-modify: read-write-plaintext-only;
-    -webkit-user-select: text;
-}
-
-.database-user-query::before, .database-query-prompt::before, .database-query-result::before {
-    position: absolute;
-    display: block;
-    content: "";
-    left: 7px;
-    top: 0.8em;
-    width: 10px;
-    height: 10px;
-    margin-top: -5px;
-    -webkit-user-select: none;
-}
-
-.database-query-prompt::before {
-    background-image: url(Images/userInputIcon.png);
-}
-
-.database-user-query {
-    position: relative;
-    border-bottom: 1px solid rgb(245, 245, 245);
-    padding: 1px 22px 1px 24px;
-    min-height: 16px;
-}
-
-.database-user-query::before {
-    background-image: url(Images/userInputPreviousIcon.png);
-}
-
-.database-query-text {
-    color: rgb(0, 128, 255);
-    -webkit-user-select: text;
-}
-
-.database-query-result {
+.tabbed-pane-content {
+    -webkit-box-flex: 1;
     position: relative;
-    padding: 1px 22px 1px 24px;
-    min-height: 16px;
-    margin-left: -24px;
-    padding-right: 0;
-}
-
-.database-query-result.error {
-    color: red;
-    -webkit-user-select: text;
-}
-
-.database-query-result.error::before {
-    background-image: url(Images/errorIcon.png);
-}
-
-.panel-enabler-view {
-    z-index: 1000;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: white;
-    font-size: 13px;
-    text-align: center;
-    overflow-x: hidden;
-    overflow-y: overlay;
-    display: none;
-}
-
-.panel-enabler-view.visible {
-    display: block;
-}
-
-.panel-enabler-view .panel-enabler-view-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: 390px;
-    margin: auto;
-    white-space: nowrap;
-}
-
-.panel-enabler-view h1 {
-    color: rgb(110, 116, 128);
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: normal;
-    margin-top: 0;
-}
-
-.panel-enabler-disclaimer {
-    font-size: 10px;
-    color: rgb(110, 116, 128);
-    margin-bottom: 12px;
-    margin-left: 20px;
-}
-
-.panel-enabler-disclaimer:empty {
-    display: none;
 }
 
-.panel-enabler-view img, div.welcome-instructions-aligner {
-    height: 100%;
-    min-height: 200px;
-    max-width: 100%;
-    top: 0;
-    bottom: 0;
-    padding: 20px 0 20px 20px;
-    margin: auto;
-    vertical-align: middle;
-}
-
-.panel-enabler-view img.hidden {
-    display: initial !important;
-    width: 0;
+.tabbed-pane-header {
+    height: 23px;
+    padding: 0 10px;
+    border-bottom: 1px solid rgb(163, 163, 163);
 }
 
-.panel-enabler-view form {
+.tabbed-pane-header li {
     display: inline-block;
+    margin-top: 2px;
+    font-size: 11px;
+    font-weight: bold;
+    color: rgb(46, 46, 46);
+    background: transparent;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     vertical-align: middle;
-    width: 330px;
-    margin: 0;
-    padding: 15px;
-    white-space: normal;
-}
-
-.panel-enabler-view label {
-    position: relative;
-    display: block;
-    text-align: left;
-    word-break: break-word;
-    margin: 0 0 5px 20px;
-}
-
-.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
-    color: rgb(6, 6, 6);
-    background-color: transparent;
-    border: 1px solid rgb(165, 165, 165);
-    background-color: rgb(237, 237, 237);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
-    -webkit-border-radius: 12px;
-    -webkit-appearance: none;
-}
-
-.panel-enabler-view button:not(.status-bar-item) {
-    font-size: 13px;
-    margin: 6px 0 0 0;
-    padding: 3px 20px;
-    height: 24px;
+    padding: 3px 7px 2px;
+    height: 21px;
+    border: 1px solid transparent;
+    border-bottom: none;
 }
 
-button.show-all-nodes {
-    font-size: 13px;
-    margin: 0;
-    padding: 0 20px;
-    height: 20px;
+.tabbed-pane-header li.selected {
+    background-color: white;
+    border: 1px solid rgb(163, 163, 163);
+    border-bottom: none;
 }
 
-.panel-enabler-view.welcome {
-    z-index: auto;
+.scope-bar {
+    height: 23px;
+    padding: 2px 10px 0;
+    overflow: hidden;
 }
 
-.panel-enabler-view.welcome div.welcome-instructions-aligner {
-    display: inline-block;
-    width: 0;
-}
-
-.panel-enabler-view.welcome .instructions {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0;
-    white-space: normal;
-    line-height: 175%;
-}
-
-.panel-enabler-view.welcome .message {
-    margin-bottom: 2ex;
-}
-
-.panel-enabler-view.welcome button.status-bar-item {
-    background-image: none;
-    vertical-align: top;
-}
-
-.pane button {
-    margin: 6px 0 6px 3px;
-    padding: 2px 9px;
-}
-
-.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
-    background-color: rgb(215, 215, 215);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
-}
-
-body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
-    color: rgb(130, 130, 130);
-    border-color: rgb(212, 212, 212);
-    background-color: rgb(239, 239, 239);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
-}
-
-.panel-enabler-view input {
-    height: 17px;
-    width: 17px;
-    border: 1px solid rgb(165, 165, 165);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
-    -webkit-border-radius: 8px;
-    -webkit-appearance: none;
-    vertical-align: middle;
-    margin: 0 5px 5px 0;
-}
-
-.panel-enabler-view input:active {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
-}
-
-.panel-enabler-view input:checked {
-    background: url(Images/radioDot.png) center no-repeat,
-                -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
-}
-
-.panel-enabler-view.scripts img {
-    content: url(Images/scriptsSilhouette.png);
-}
-
-.panel-enabler-view.profiles img {
-    content: url(Images/profilesSilhouette.png);
-}
-
-button.enable-toggle-status-bar-item .glyph {
-    -webkit-mask-position: -192px 0;
-}
-
-button.enable-toggle-status-bar-item.toggled-on .glyph {
-    -webkit-mask-position: -96px -24px;
-}
-
-button.edit-source-status-bar-item .glyph {
-    -webkit-mask-position: -64px -48px;
-}
-
-button.edit-source-status-bar-item.toggled-on .glyph {
-    background-color: rgb(66, 129, 235);
-}
-
-.scripts-pause-on-exceptions-status-bar-item .glyph {
-    -webkit-mask-position: -256px 0;
-}
-
-.scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph {
-    background-color: rgb(66, 129, 235);
-}
-
-.scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph {
-    background-color: purple;
-}
-
-.scripts-toggle-pretty-print-status-bar-item .glyph {
-    -webkit-mask-position: -256px -24px;
-}
-
-.scripts-toggle-pretty-print-status-bar-item.toggled .glyph {
-    background-color: rgb(66, 129, 235);
-}
-
-#scripts-status-bar {
-    position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
-    height: 24px;
-}
-
-#scripts-files {
-    max-width: 250px;
-}
-
-#scripts-files option.extension-script {
-    color: rgb(70, 134, 240);
-}
-
-#scripts-functions {
-    max-width: 150px;
-}
-
-#scripts-status-bar .status-bar-item img {
-    margin-top: 2px;
-}
-
-#scripts-back img {
-    content: url(Images/back.png);
-}
-
-#scripts-forward img {
-    content: url(Images/forward.png);
-}
-
-#scripts-pause img {
-    content: url(Images/debuggerPause.png);
-}
-
-#scripts-pause.paused img {
-    content: url(Images/debuggerContinue.png);
-}
-
-#scripts-step-over img {
-    content: url(Images/debuggerStepOver.png);
-}
-
-#scripts-step-into img {
-    content: url(Images/debuggerStepInto.png);
-}
-
-#scripts-step-out img {
-    content: url(Images/debuggerStepOut.png);
-}
-
-.toggle-breakpoints .glyph {
-    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
-    -webkit-mask-position: -32px 0;
-    background-color: rgb(96, 96, 96) !important;
-}
-
-.toggle-breakpoints.toggled-on .glyph {
-    -webkit-mask-position: 0 -24px;
-}
-
-#scripts-debugger-status {
-    position: absolute;
-    line-height: 24px;
-    top: 0;
-    right: 8px;
-}
-
-#scripts-sidebar-resizer-widget {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 225px;
-    width: 16px;
-    cursor: ew-resize;
-    background-image: url(Images/statusbarResizerHorizontal.png);
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-#scripts-sidebar-buttons {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 225px;
-    overflow: hidden;
-    border-left: 1px solid rgb(64%, 64%, 64%);
-}
-
-#script-resource-views {
-    display: block;
-    padding: 0;
-    position: absolute;
-    top: 23px;
-    left: 0;
-    right: 225px;
-    bottom: 0;
-}
-
-.script-view {
-    display: none;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.script-view.visible {
-    display: block;
-}
-
-#scripts-sidebar {
-    position: absolute;
-    top: 23px;
-    right: 0;
-    bottom: 0;
-    width: 225px;
-    border-left: 1px solid rgb(64%, 64%, 64%);
-    cursor: default;
-    overflow: auto;
-}
-
-.resources-larger-resources-status-bar-item .glyph {
-    -webkit-mask-position: -224px 0;
-}
-
-#resources-filter, #console-filter.console-filter-top {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
-    border-bottom: 1px solid rgb(64%, 64%, 64%);
-    width: 100%;
-}
-
-#console-messages.console-filter-top {
-    margin-top: 23px;
-}
-
-#console-filter {
-    margin-top: 1px;
-}
-
-.tabbed-pane {
-    -webkit-box-orient: vertical;
-    height: 100%;
-}
-
-.tabbed-pane-content {
-    -webkit-box-flex: 1;
-    position: relative;
-}
-
-.tabbed-pane-header {
-    height: 23px;
-    padding: 0 10px;
-    border-bottom: 1px solid rgb(163, 163, 163);
-}
-
-.tabbed-pane-header li {
-    display: inline-block;
-    margin-top: 2px;
-    font-size: 11px;
-    font-weight: bold;
-    color: rgb(46, 46, 46);
-    background: transparent;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    vertical-align: middle;
-    padding: 3px 7px 2px;
-    height: 21px;
-    border: 1px solid transparent;
-    border-bottom: none;
-}
-
-.tabbed-pane-header li.selected {
-    background-color: white;
-    border: 1px solid rgb(163, 163, 163);
-    border-bottom: none;
-}
-
-.scope-bar {
-    height: 23px;
-    padding: 2px 10px 0;
-    overflow: hidden;
-}
-
-.scope-bar li {
+.scope-bar li {
     display: inline-block;
     margin: 1px 2px 0 0;
     padding: 1px 7px 3px;
     font-size: 11px;
-    line-height: 12px;
-    font-weight: bold;
-    color: rgb(46, 46, 46);
-    background: transparent;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    -webkit-border-radius: 8px;
-    vertical-align: middle;
-}
-
-.scope-bar-divider {
-    margin: 1px 9px 0 8px;
-    background-color: rgba(0, 0, 0, 0.4);
-    height: 16px;
-    width: 1px;
-    vertical-align: middle;
-    display: inline-block;
-}
-
-.scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
-    color: white;
-    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
-}
-
-.scope-bar li:hover {
-    background: rgba(0, 0, 0, 0.2);
-}
-
-.scope-bar li.selected {
-    background: rgba(0, 0, 0, 0.3);
-    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-.scope-bar li:active {
-    background: rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-#resources-container {
-    position: absolute;
-    top: 23px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-right: 0 none transparent;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-#resources-container.viewing-resource {
-    right: auto;
-    width: 200px;
-    border-right: 1px solid rgb(64%, 64%, 64%);
-}
-
-#resources-container.viewing-resource #resources-sidebar {
-    width: 100%;
-    border-right: 0 none transparent;
-}
-
-#resources-sidebar {
-    min-height: 100%;
-    bottom: auto;
-    overflow: visible;
-}
-
-#resources-container-content {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 200px;
-    min-height: 100%;
-}
-
-.memory-graph-label {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    font-size: 9px;
-    color: rgb(50%, 50%, 50%);
-    white-space: nowrap;
-}
-
-.console-warning-level, .console-error-level, .console-log-level {
-    display: none;
-}
-
-.filter-all .console-warning-level, .filter-warnings .console-warning-level,
-.filter-all .console-error-level, .filter-errors .console-error-level,
-.filter-all .console-log-level, .filter-logs .console-log-level {
-    display: block;
-}
-
-.console-user-command-result {
-    display: block;
-}
-
-#resource-views {
-    position: absolute;
-    top: 23px;
-    right: 0;
-    left: 200px;
-    bottom: 0;
-}
-
-.source-view-frame {
-    width: 100%;
-    height: 100%;
-}
-
-.sidebar-resizer-vertical {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 5px;
-    z-index: 500;
-    cursor: ew-resize;
-}
-
-.resources .sidebar-resizer-vertical {
-    top: 23px;
-}
-
-.sidebar-tree, .sidebar-tree .children {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    font-size: 11px;
-}
-
-.sidebar-tree-section {
-    position: relative;
-    height: 18px;
-    padding: 4px 10px 6px 10px;
-    white-space: nowrap;
-    margin-top: 1px;
-    color: rgb(92, 110, 129);
-    font-weight: bold;
-    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
-}
-
-.sidebar-tree-item {
-    position: relative;
-    height: 36px;
-    padding: 0 5px 0 5px;
-    white-space: nowrap;
-    margin-top: 1px;
-    line-height: 34px;
-    border-top: 1px solid transparent;
-}
-
-.sidebar-tree .children {
-    display: none;
-}
-
-.sidebar-tree .children.expanded {
-    display: block;
-}
-
-.sidebar-tree-section + .children > .sidebar-tree-item {
-    padding-left: 10px !important;
-}
-
-.sidebar-tree-section + .children.small > .sidebar-tree-item {
-    padding-left: 17px !important;
-}
-
-.sidebar-tree > .children > .sidebar-tree-item {
-    padding-left: 37px;
-}
-
-.sidebar-tree > .children > .children > .sidebar-tree-item {
-    padding-left: 37px;
-}
-
-.sidebar-tree.hide-disclosure-buttons > .children {
-    display: none;
-}
-
-.sidebar-tree > .children.hide-disclosure-buttons > .children {
-    display: none;
-}
-
-.sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
-    margin-left: 16px;
-}
-
-.sidebar-tree-item .disclosure-button {
-    float: left;
-    width: 16px;
-    height: 100%;
-    border: 0;
-    background-color: transparent;
-    background-image: url(Images/disclosureTriangleSmallRight.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    -webkit-apearance: none;
-}
-
-.sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
-    display: none;
-}
-
-body.inactive .sidebar-tree-item .disclosure-button {
-    background-image: url(Images/disclosureTriangleSmallRightBlack.png);
-}
-
-body.inactive .sidebar-tree-item.expanded .disclosure-button {
-    background-image: url(Images/disclosureTriangleSmallDownBlack.png);
-}
-
-body.inactive .sidebar-tree-item .disclosure-button:active {
-    background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
-}
-
-.sidebar-tree-item.selected .disclosure-button {
-    background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
-}
-
-.sidebar-tree-item.expanded .disclosure-button {
-    background-image: url(Images/disclosureTriangleSmallDown.png);
-}
-
-.sidebar-tree-item.selected.expanded .disclosure-button {
-    background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
-}
-
-.sidebar-tree-item.selected .disclosure-button:active {
-    background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
-}
-
-.sidebar-tree-item .disclosure-button:active {
-    background-image: url(Images/disclosureTriangleSmallRightDown.png);
-}
-
-.sidebar-tree-item .icon {
-    float: left;
-    width: 32px;
-    height: 32px;
-    margin-top: 1px;
-    margin-right: 3px;
-}
-
-li .status {
-    float: right;
-    height: 16px;
-    margin-top: 9px;
-    margin-left: 4px;
-    line-height: 1em;
-}
-
-li .status:empty {
-    display: none;
-}
-
-li .status .bubble {
-    display: inline-block;
-    height: 14px;
-    min-width: 16px;
-    margin-top: 1px;
-    background-color: rgb(128, 151, 189);
-    vertical-align: middle;
-    white-space: nowrap;
-    padding: 1px 4px;
-    text-align: center;
-    font-size: 11px;
-    line-height: normal;
-    font-family: Helvetica, Arial, sans-serif;
-    font-weight: bold;
-    text-shadow: none;
-    color: white;
-    -webkit-border-radius: 7px;
-}
-
-li .status .bubble:empty {
-    display: none;
-}
-
-li.selected .status .bubble {
-    background-color: white !important;
-    color: rgb(132, 154, 190) !important;
-}
-
-:focus li.selected .status .bubble {
-    color: rgb(36, 98, 172) !important;
-}
-
-body.inactive li.selected .status .bubble {
-    color: rgb(159, 159, 159) !important;
-}
-
-.sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
-    height: 20px;
-}
-
-.sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
-    width: 16px;
-    height: 16px;
-}
-
-.sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
-    margin-top: 1px;
-}
-
-.sidebar-tree-item.selected {
-    color: white;
-    border-top: 1px solid rgb(145, 160, 192);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
-    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
-    font-weight: bold;
-    -webkit-background-origin: padding;
-    -webkit-background-clip: padding;
-}
-
-:focus .sidebar-tree-item.selected {
-    border-top: 1px solid rgb(68, 128, 200);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
-}
-
-body.inactive .sidebar-tree-item.selected {
-    border-top: 1px solid rgb(151, 151, 151);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
-}
-
-.sidebar-tree-item .titles {
-    position: relative;
-    top: 5px;
-    line-height: 11px;
-    padding-bottom: 1px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.sidebar-tree-item .titles.no-subtitle {
-    top: 10px;
-}
-
-.sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
-    top: 2px;
-    line-height: normal;
-}
-
-.sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
-    content: "\A";
-    white-space: pre;
-}
-
-.sidebar-tree-item .subtitle {
-    font-size: 9px;
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
-    display: none;
-}
-
-.sidebar-tree-item.selected .subtitle {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-#resources-graphs {
-    position: absolute;
-    left: 0;
-    right: 0;
-    max-height: 100%;
-    top: 112px;
-}
-
-.resources-graph-side {
-    position: relative;
-    height: 36px;
-    padding: 0 5px;
-    white-space: nowrap;
-    margin-top: 1px;
-    border-top: 1px solid transparent;
-    overflow: hidden;
-}
-
-.resources-graph-bar-area {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 8px;
-    left: 9px;
-}
-
-.resources-time-graph-sidebar-item .icon {
-    content: url(Images/resourcesTimeGraphIcon.png);
-}
-
-.resources-size-graph-sidebar-item .icon {
-    content: url(Images/resourcesSizeGraphIcon.png);
-}
-
-.resources-size-graph-sidebar-item .icon {
-    content: url(Images/resourcesSizeGraphIcon.png);
-}
-
-.resource-sidebar-tree-item .icon {
-    content: url(Images/resourcePlainIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item .icon {
-    content: url(Images/resourcePlainIconSmall.png);
-}
-
-.resource-sidebar-tree-item.resources-category-documents .icon {
-    content: url(Images/resourceDocumentIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-documents .icon {
-    content: url(Images/resourceDocumentIconSmall.png);
-}
-
-.resource-sidebar-tree-item.resources-category-stylesheets .icon {
-    content: url(Images/resourceCSSIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
-    content: url(Images/resourceDocumentIconSmall.png);
-}
-
-.resource-sidebar-tree-item.resources-category-images .icon {
-    position: relative;
-    background-image: url(Images/resourcePlainIcon.png);
-    background-repeat: no-repeat;
-    content: "";
-}
-
-.resources-category-images .image-resource-icon-preview {
-    position: absolute;
-    margin: auto;
-    top: 3px;
-    bottom: 4px;
-    left: 5px;
-    right: 5px;
-    max-width: 18px;
-    max-height: 21px;
-    min-width: 1px;
-    min-height: 1px;
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-images .icon {
-    background-image: url(Images/resourcePlainIconSmall.png);
-    content: "";
-}
-
-.children.small .resources-category-images .image-resource-icon-preview {
-    top: 2px;
-    bottom: 1px;
-    left: 3px;
-    right: 3px;
-    max-width: 8px;
-    max-height: 11px;
-}
-
-.resource-sidebar-tree-item.resources-category-fonts .icon {
-    content: url(Images/resourcePlainIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
-    content: url(Images/resourcePlainIconSmall.png);
-}
-
-.resource-sidebar-tree-item.resources-category-scripts .icon {
-    content: url(Images/resourceJSIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
-    content: url(Images/resourceDocumentIconSmall.png);
-}
-
-.resource-sidebar-tree-item.resources-category-xhr .icon {
-    content: url(Images/resourcePlainIcon.png);
-}
-
-.children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
-    content: url(Images/resourceDocumentIconSmall.png);
-}
-
-.bubble.debug, .console-debug-level .bubble {
-    background-color: rgb(0, 0, 255) !important;
-}
-
-.bubble.warning, .console-warning-level .bubble {
-    background-color: rgb(232, 164, 0) !important;
-}
-
-.bubble.error, .console-error-level .bubble {
-    background-color: rgb(216, 35, 35) !important;
-}
-
-.bubble.search-matches {
-    background-image: url(Images/searchSmallWhite.png);
-    background-repeat: no-repeat;
-    background-position: 3px 2px;
-    padding-left: 13px !important;
-}
-
-li.selected .bubble.search-matches {
-    background-image: url(Images/searchSmallBlue.png);
-}
-
-:focus li.selected .bubble.search-matches {
-    background-image: url(Images/searchSmallBrightBlue.png);
-}
-
-body.inactive li.selected .bubble.search-matches {
-    background-image: url(Images/searchSmallGray.png);
-}
-
-/* Timeline Style */
-
-#timeline-overview-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 80px;
-}
-
-#timeline-overview-panel .timeline-graph-bar {
-    pointer-events: none;
-}
-
-.timeline-sidebar-background {
-    top: 90px;
-    bottom: 0;
-}
-
-.timeline .sidebar {
-    overflow-y: hidden;
-    z-index: 100;
-    min-height: 100%;
-    bottom: auto;
-}
-
-#timeline-overview-separator {
-    position: absolute;
-    top: 80px;
-    left: 0;
-    right: 0;
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
-    border-top: 1px solid rgb(140, 140, 140);
-    border-bottom: 1px solid rgb(115, 115, 115);
-    height: 10px;
-}
-
-#timeline-overview-sidebar {
-    position: absolute;
-    width: 200px;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    padding-top: 2px;
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
-    border-right: 1px solid rgb(163, 163, 163);
-}
-
-#timeline-overview-grid {
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 200px;
-    right: 0px;
-    background-color: rgb(255, 255, 255);
-}
-
-.timeline-window-selector {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(125, 173, 217, 0.5);
-    z-index: 250;
-}
-
-#timeline-overview-window {
-    background-color: white;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 60px;
-    z-index: 150;
-}
-
-.timeline-overview-dividers-background {
-    left: 0%;
-    right: 0%;
-    top: 0px;
-    bottom: 60px;
-    background-color: black;
-    position: absolute;
-}
-
-.timeline-overview-window-rulers {
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    opacity: 0.2;
-    border-right: 1px solid black;
-    border-left: 1px solid black;
-    z-index: 150;
-}
-
-.timeline-window-resizer {
-    position: absolute;
-    top: 0px;
-    bottom: 60px;
-    width: 5px;
-    margin-left: -3px;
-    margin-right: -2px;
-    background-color: rgb(153, 153, 153);
-    z-index: 500;
-    cursor: ew-resize;
-    -webkit-border-radius: 2px;
-    -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
-}
-
-#timeline-overview-grid #resources-graphs {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 80px;
-}
-
-#timeline-container {
-    position: absolute;
-    top: 90px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-right: 0 none transparent;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.timeline-category-statusbar-item {
-    height: 24px;
-    line-height: 24px;
-    padding-left: 6px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-weight: bold;
-}
-
-.timeline-category-statusbar-item .timeline-category-checkbox {
-    width: 10px;
-    height: 11px;
-    margin: 0 3px 0 5px;
-    padding: 0;
-    background-image: url(Images/timelineCheckmarks.png);
-    background-repeat: no-repeat;
-    background-position: 0 -66px;
-    vertical-align: -1px;
-    -webkit-appearance: none;
-}
-
-.timeline-category-statusbar-item .timeline-category-checkbox:checked {
-    background-position-x: -10px;
-}
-
-.timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
-    background-position-y: 0;
-}
-
-.timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
-    background-position-y: -33px;
-}
-
-.timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
-    background-position-y: -11px;
-}
-
-.timeline-tree-item {
-    height: 18px;
-    line-height: 15px;
-    padding-right: 5px;
-    padding-left: 10px;
-    padding-top: 2px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.timeline-expandable {
-    position: absolute;
-    border-left: 1px solid rgb(163, 163, 163);
-}
-
-.timeline-expandable-left {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 3px;
-    border-top: 1px solid rgb(163, 163, 163);
-    border-bottom: 1px solid rgb(163, 163, 163);
-}
-
-.timeline-expandable-collapsed {
-    background-image: url(Images/disclosureTriangleSmallRightBlack.png);
-    background-position-x: 1px;
-    background-position-y: 2px;
-    background-repeat: no-repeat;
-}
-
-.timeline-expandable-expanded {
-    background-image: url(Images/disclosureTriangleSmallDownBlack.png);
-    background-position-x: 1px;
-    background-position-y: 3px;
-    background-repeat: no-repeat;
-}
-
-.timeline-tree-item .type {
-    padding-left: 14px;
-}
-
-.timeline-tree-item .count {
-    font-family: Helvetica, Arial, sans-serif;
-    font-weight: bold;
-}
-
-.timeline-tree-item .timeline-tree-icon {
-    background-image: url(Images/timelineDots.png);
-    margin-top: 2px;
-    width: 12px;
-    height: 12px;
-    position: absolute;
+    line-height: 12px;
+    font-weight: bold;
+    color: rgb(46, 46, 46);
+    background: transparent;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    -webkit-border-radius: 8px;
+    vertical-align: middle;
 }
 
-.timeline-tree-item.even {
-    background-color: rgba(0, 0, 0, 0.05);
+.scope-bar-divider {
+    margin: 1px 9px 0 8px;
+    background-color: rgba(0, 0, 0, 0.4);
+    height: 16px;
+    width: 1px;
+    vertical-align: middle;
+    display: inline-block;
 }
 
-.timeline-tree-item .data.dimmed {
-    color: rgba(0, 0, 0, 0.7);
+.scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
+    color: white;
+    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
 }
 
-#timeline-overview-timelines,
-#timeline-overview-memory {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 20px;
-    z-index: 160;
+.scope-bar li:hover {
+    background: rgba(0, 0, 0, 0.2);
 }
 
-#timeline-overview-memory > canvas {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 5px;
+.scope-bar li.selected {
+    background: rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
-
-#timeline-graphs {
-    position: absolute;
-    left: 0;
-    right: 0;
-    max-height: 100%;
-    top: 19px;
+.scope-bar li:active {
+    background: rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
-.timeline-graph-side {
-    position: relative;
-    height: 18px;
-    padding: 0 5px;
-    white-space: nowrap;
-    margin-top: 0px;
-    border-top: 1px solid transparent;
-    overflow: hidden;
-    pointer-events: none;
+.console-warning-level, .console-error-level, .console-log-level {
+    display: none;
 }
 
-.timeline-overview-graph-side {
-    height: 20px;
-    z-index: 170;
-    pointer-events: none;
+.filter-all .console-warning-level, .filter-warnings .console-warning-level,
+.filter-all .console-error-level, .filter-errors .console-error-level,
+.filter-all .console-log-level, .filter-logs .console-log-level {
+    display: block;
 }
 
-.timeline-overview-graph-side .timeline-graph-bar {
-    height: 13px;
+.console-user-command-result {
+    display: block;
 }
 
-.timeline-graph-bar-area {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 3px;
-    pointer-events: none;
+.source-view-frame {
+    width: 100%;
+    height: 100%;
 }
 
-.timeline-graph-bar {
+.sidebar-resizer-vertical {
     position: absolute;
     top: 0;
     bottom: 0;
-    margin: auto -2px;
-    border-width: 4px 4px 5px;
-    height: 9px;
-    min-width: 5px;
-    opacity: 0.8;
-    -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
-    z-index: 180;
-    pointer-events: visibleFill;
-}
-
-.timeline-graph-bar.with-children {
-    opacity: 0.2;
+    width: 5px;
+    z-index: 500;
+    cursor: ew-resize;
 }
 
-.timeline-graph-bar.cpu {
-    opacity: 0.6;
+.sidebar-tree, .sidebar-tree .children {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: 11px;
 }
 
-.timeline-graph-side.even {
-    background-color: rgba(0, 0, 0, 0.05);
+.sidebar-tree-section {
+    position: relative;
+    height: 18px;
+    padding: 4px 10px 6px 10px;
+    white-space: nowrap;
+    margin-top: 1px;
+    color: rgb(92, 110, 129);
+    font-weight: bold;
+    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 }
 
-.timeline-category-loading .timeline-graph-bar {
-    -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
+.sidebar-tree-item {
+    position: relative;
+    height: 36px;
+    padding: 0 5px 0 5px;
+    white-space: nowrap;
+    margin-top: 1px;
+    line-height: 34px;
+    border-top: 1px solid transparent;
 }
 
-.timeline-category-scripting .timeline-graph-bar {
-    -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
+.sidebar-tree .children {
+    display: none;
 }
 
-.timeline-category-rendering .timeline-graph-bar {
-    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
+.sidebar-tree .children.expanded {
+    display: block;
 }
 
-.timeline-aggregated-category {
-    display: inline-block;
-    height: 11px;
-    margin-right: 2px;
-    margin-left: 6px;
-    position: relative;
-    top: 2px;
-    width: 10px;
+.sidebar-tree-section + .children > .sidebar-tree-item {
+    padding-left: 10px !important;
 }
 
-.timeline-loading {
-    -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
+.sidebar-tree-section + .children.small > .sidebar-tree-item {
+    padding-left: 17px !important;
 }
 
-.timeline-scripting {
-    -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
+.sidebar-tree > .children > .sidebar-tree-item {
+    padding-left: 37px;
 }
 
-.timeline-rendering {
-    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
+.sidebar-tree > .children > .children > .sidebar-tree-item {
+    padding-left: 37px;
 }
 
-.popover .timeline-aggregated-category.timeline-loading {
-    margin-left: 0px;
+.sidebar-tree.hide-disclosure-buttons > .children {
+    display: none;
 }
 
-.timeline-category-loading .timeline-tree-icon {
-    background-position-y: 0px;
+.sidebar-tree > .children.hide-disclosure-buttons > .children {
+    display: none;
 }
 
-.timeline-category-scripting .timeline-tree-icon {
-    background-position-y: 48px;
+.sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
+    margin-left: 16px;
 }
 
-.timeline-category-rendering .timeline-tree-icon {
-    background-position-y: 72px;
+.sidebar-tree-item .disclosure-button {
+    float: left;
+    width: 16px;
+    height: 100%;
+    border: 0;
+    background-color: transparent;
+    background-image: url(Images/disclosureTriangleSmallRight.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    -webkit-apearance: none;
 }
 
-.timeline-details {
-    -webkit-user-select: text;
-    vertical-align: top;
+.sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
+    display: none;
 }
 
-.timeline-function-name {
-    text-align: right;
+body.inactive .sidebar-tree-item .disclosure-button {
+    background-image: url(Images/disclosureTriangleSmallRightBlack.png);
 }
 
-.timeline-stacktrace-title {
-    padding-top: 4px;
+body.inactive .sidebar-tree-item.expanded .disclosure-button {
+    background-image: url(Images/disclosureTriangleSmallDownBlack.png);
 }
 
-.timeline-details-row-title {
-    font-weight: bold;
-    text-align: right;
-    white-space: nowrap;
+body.inactive .sidebar-tree-item .disclosure-button:active {
+    background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
 }
 
-.timeline-details-row-data {
-    white-space: nowrap;
+.sidebar-tree-item.selected .disclosure-button {
+    background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
 }
 
-.timeline-details-title {
-    border-bottom: 1px solid #B8B8B8;
-    font-size: 11px;
-    font-weight: bold;
-    padding-bottom: 5px;
-    padding-top: 0px;
-    white-space: nowrap;
+.sidebar-tree-item.expanded .disclosure-button {
+    background-image: url(Images/disclosureTriangleSmallDown.png);
 }
 
-.timeline-filter-status-bar-item .glyph {
-    -webkit-mask-position: -32px -48px;
+.sidebar-tree-item.selected.expanded .disclosure-button {
+    background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
 }
 
-.timeline-filter-status-bar-item.toggled-on .glyph {
-    background-color: rgb(66, 129, 235) !important;
+.sidebar-tree-item.selected .disclosure-button:active {
+    background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
 }
 
-.garbage-collect-status-bar-item .glyph {
-    -webkit-mask-position: -128px -24px;
+.sidebar-tree-item .disclosure-button:active {
+    background-image: url(Images/disclosureTriangleSmallRightDown.png);
 }
 
-.timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
-    font-size: 11px;
-    text-shadow: white 0 1px 0;
+.sidebar-tree-item .icon {
+    float: left;
+    width: 32px;
+    height: 32px;
+    margin-top: 1px;
+    margin-right: 3px;
 }
 
-#main-status-bar > .timeline-records-counter {
+li .status {
     float: right;
-    margin-top: 4px;
-    margin-right: 25px;
+    height: 16px;
+    margin-top: 9px;
+    margin-left: 4px;
+    line-height: 1em;
 }
 
-#counters > .timeline-records-counter {
-    float: left;
-    margin-top: -2px;
+li .status:empty {
+    display: none;
 }
 
-.storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
-    margin-bottom: -3px;
-    margin-left: 5px;
+li .status .bubble {
+    display: inline-block;
+    height: 14px;
+    min-width: 16px;
+    margin-top: 1px;
+    background-color: rgb(128, 151, 189);
     vertical-align: middle;
+    white-space: nowrap;
+    padding: 1px 4px;
+    text-align: center;
+    font-size: 11px;
+    line-height: normal;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    text-shadow: none;
+    color: white;
+    -webkit-border-radius: 7px;
 }
 
-.status-bar-divider {
-    margin-left: 7px;
-    border-right: 1px solid #CCC;
+li .status .bubble:empty {
+    display: none;
 }
 
-.storage-application-cache-status, .storage-application-cache-connectivity {
-    position: relative;
-    top: 4px;
+li.selected .status .bubble {
+    background-color: white !important;
+    color: rgb(132, 154, 190) !important;
 }
 
-/* Profiler Style */
-
-#profile-views {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 200px;
-    bottom: 0;
+:focus li.selected .status .bubble {
+    color: rgb(36, 98, 172) !important;
 }
 
-.status-bar-items {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 200px;
-    overflow: hidden;
-    border-left: 1px solid rgb(184, 184, 184);
-    margin-left: -1px;
+body.inactive li.selected .status .bubble {
+    color: rgb(159, 159, 159) !important;
 }
 
-.profile-sidebar-tree-item .icon {
-    content: url(Images/profileIcon.png);
+.sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
+    height: 20px;
 }
 
-.profile-sidebar-tree-item.small .icon {
-    content: url(Images/profileSmallIcon.png);
+.sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
+    width: 16px;
+    height: 16px;
 }
 
-.profile-group-sidebar-tree-item .icon {
-    content: url(Images/profileGroupIcon.png);
+.sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
+    margin-top: 1px;
 }
 
-.profile-view {
-    display: none;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+.sidebar-tree-item.selected {
+    color: white;
+    border-top: 1px solid rgb(145, 160, 192);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
+    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
+    font-weight: bold;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
 }
 
-.profile-view.visible {
-    display: block;
+:focus .sidebar-tree-item.selected {
+    border-top: 1px solid rgb(68, 128, 200);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
 }
 
-.profile-view .data-grid {
-    border: none;
-    height: 100%;
+body.inactive .sidebar-tree-item.selected {
+    border-top: 1px solid rgb(151, 151, 151);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
 }
 
-.profile-view .data-grid th.average-column {
-    text-align: center;
+.sidebar-tree-item .titles {
+    position: relative;
+    top: 5px;
+    line-height: 11px;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
-.profile-view .data-grid td.average-column {
-    text-align: right;
+.sidebar-tree-item .titles.no-subtitle {
+    top: 10px;
 }
 
-.profile-view .data-grid th.self-column {
-    text-align: center;
+.sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
+    top: 2px;
+    line-height: normal;
 }
 
-.profile-view .data-grid td.self-column {
-    text-align: right;
+.sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
+    content: "\A";
+    white-space: pre;
 }
 
-.profile-view .data-grid th.total-column {
-    text-align: center;
+.sidebar-tree-item .subtitle {
+    font-size: 9px;
+    color: rgba(0, 0, 0, 0.7);
 }
 
-.profile-view .data-grid td.total-column {
-    text-align: right;
+.sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
+    display: none;
 }
 
-.profile-view .data-grid .calls-column {
-    text-align: center;
+.sidebar-tree-item.selected .subtitle {
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.profile-node-file {
-    float: right;
-    color: gray;
-    margin-top: -1px;
+.bubble.debug, .console-debug-level .bubble {
+    background-color: rgb(0, 0, 255) !important;
 }
 
-.data-grid tr.selected .profile-node-file {
-    color: rgb(33%, 33%, 33%);
+.bubble.warning, .console-warning-level .bubble {
+    background-color: rgb(232, 164, 0) !important;
 }
 
-.data-grid:focus tr.selected .profile-node-file {
-    color: white;
+.bubble.error, .console-error-level .bubble {
+    background-color: rgb(216, 35, 35) !important;
 }
 
-button.enable-toggle-status-bar-item .glyph {
+.bubble.search-matches {
+    background-image: url(Images/searchSmallWhite.png);
+    background-repeat: no-repeat;
+    background-position: 3px 2px;
+    padding-left: 13px !important;
 }
 
-.record-profile-status-bar-item .glyph {
-    -webkit-mask-position: -288px 0;
+li.selected .bubble.search-matches {
+    background-image: url(Images/searchSmallBlue.png);
 }
 
-.record-profile-status-bar-item.toggled-on .glyph {
-    -webkit-mask-position: -288px -24px;
-    background-color: rgb(216, 0, 0) !important;
+:focus li.selected .bubble.search-matches {
+    background-image: url(Images/searchSmallBrightBlue.png);
 }
 
-/* FIXME: should have its own glyph. */
-.heap-snapshot-status-bar-item .glyph {
-    -webkit-mask-position: -96px 0;
+body.inactive li.selected .bubble.search-matches {
+    background-image: url(Images/searchSmallGray.png);
 }
 
-.node-search-status-bar-item .glyph {
-    -webkit-mask-position: -224px -24px;
+.storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
+    margin-bottom: -3px;
+    margin-left: 5px;
+    vertical-align: middle;
 }
 
-.percent-time-status-bar-item .glyph {
-    -webkit-mask-position: -192px -24px;
+.status-bar-divider {
+    margin-left: 7px;
+    border-right: 1px solid #CCC;
 }
 
-.focus-profile-node-status-bar-item .glyph {
-    -webkit-mask-position: -96px 0;
+.storage-application-cache-status, .storage-application-cache-connectivity {
+    position: relative;
+    top: 4px;
 }
 
-.exclude-profile-node-status-bar-item .glyph {
-    -webkit-mask-position: -128px 0;
+.status-bar-items {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 200px;
+    overflow: hidden;
+    border-left: 1px solid rgb(184, 184, 184);
+    margin-left: -1px;
 }
 
-.reset-profile-status-bar-item .glyph {
-    -webkit-mask-position: 0 0;
+.node-search-status-bar-item .glyph {
+    -webkit-mask-position: -224px -24px;
 }
 
 .delete-storage-status-bar-item .glyph {
@@ -3810,23 +2208,6 @@ li.breakpoint-hit .breakpoint-hit-marker {
     background-color: rgb(255, 255, 194);
 }
 
-.styles-sidebar-separator {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
-    padding: 0 5px;
-    border-top: 1px solid rgb(189, 189, 189);
-    border-bottom: 1px solid rgb(189, 189, 189);
-    color: rgb(110, 110, 110);
-    text-shadow: white 0 1px 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: 11px;
-}
-
-.styles-selector {
-    cursor: text;
-}
-
 .workers-list {
     list-style: none;
     margin: 0;
@@ -3847,195 +2228,6 @@ a.worker-item {
     text-decoration: none;
 }
 
-.styles-section {
-    padding: 2px 2px 4px 4px;
-    min-height: 18px;
-    white-space: nowrap;
-    -webkit-background-origin: padding;
-    -webkit-background-clip: padding;
-    -webkit-user-select: text;
-}
-
-.styles-section:not(.first-styles-section) {
-    border-top: 1px solid rgb(191, 191, 191);
-}
-
-.styles-section.read-only {
-    background-color: rgb(240, 240, 240);
-}
-
-.styles-section .properties li.not-parsed-ok {
-    margin-left: 0px;
-}
-
-.styles-section .properties li.not-parsed-ok::before {
-    content: url(Images/warningIcon.png);
-    opacity: 0.75;
-    float: left;
-    width: 8px;
-    height: 8px;
-    margin-top: 0;
-    padding-right: 5px;
-    vertical-align: sub;
-    -webkit-user-select: none;
-    cursor: default;
-}
-
-.styles-section .header {
-    white-space: nowrap;
-    -webkit-background-origin: padding;
-    -webkit-background-clip: padding;
-}
-
-.styles-section .header .title {
-    word-wrap: break-word;
-    white-space: normal;
-}
-
-.styles-section .header .subtitle {
-    color: rgb(85, 85, 85);
-    float: right;
-    margin-left: 5px;
-    max-width: 65%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.styles-section .header .subtitle a {
-    color: inherit;
-}
-
-.styles-section .properties {
-    display: none;
-    margin: 0;
-    padding: 2px 4px 0 8px;
-    list-style: none;
-}
-
-.styles-section.no-affect .properties li {
-    opacity: 0.5;
-}
-
-.styles-section.no-affect .properties li.editing {
-    opacity: 1.0;
-}
-
-.styles-section.expanded .properties {
-    display: block;
-}
-
-.styles-section .properties li {
-    margin-left: 12px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    cursor: auto;
-}
-
-.styles-section .properties li.parent {
-    margin-left: 1px;
-}
-
-.styles-section .properties li.child-editing {
-    word-wrap: break-word !important;
-    white-space: normal !important;
-}
-
-.styles-section .properties ol {
-    display: none;
-    margin: 0;
-    -webkit-padding-start: 12px;
-    list-style: none;
-}
-
-.styles-section .properties ol.expanded {
-    display: block;
-}
-
-.styles-section .properties li.parent::before {
-    content: url(Images/treeRightTriangleBlack.png);
-    opacity: 0.75;
-    float: left;
-    width: 8px;
-    height: 8px;
-    margin-top: 0;
-    padding-right: 3px;
-    -webkit-user-select: none;
-    cursor: default;
-}
-
-.styles-section .properties li.parent.expanded::before {
-    content: url(Images/treeDownTriangleBlack.png);
-    margin-top: 1px;
-}
-
-.styles-section .properties li .info {
-    padding-top: 4px;
-    padding-bottom: 3px;
-}
-
-.styles-section:hover .properties .enabled-button {
-    display: block;
-}
-
-.styles-section .properties li.disabled .enabled-button {
-    display: block;
-}
-
-.styles-section .properties .enabled-button {
-    display: none;
-    float: right;
-    font-size: 10px;
-    margin: 0 0 0 4px;
-    vertical-align: top;
-    position: relative;
-    z-index: 1;
-}
-
-.styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled {
-    text-decoration: line-through;
-}
-
-.styles-section.computed-style .properties .disabled {
-    text-decoration: none;
-    opacity: 0.5;
-}
-
-.styles-section .properties .implicit, .styles-section .properties .inherited {
-    opacity: 0.5;
-}
-
-.styles-element-state-pane {
-    background-color: rgb(240, 240, 240);
-    overflow: hidden;
-    margin-top: -38px;
-    -webkit-transition: margin-top 0.1s ease-in-out;
-    padding-left: 2px;
-}
-
-.styles-element-state-pane.expanded {
-    border-bottom: 1px solid rgb(189, 189, 189);
-    margin-top: 0;
-}
-
-.styles-element-state-pane > table {
-    width: 100%;
-    border-spacing: 0;
-}
-
-.styles-element-state-pane input {
-    margin: 2px;
-    vertical-align: -2px;
-}
-
-.body .styles-section .properties .inherited {
-    display: none;
-}
-
-.body.show-inherited .styles-section .properties .inherited {
-    display: block;
-}
-
 a.worker-item:hover {
     color: rgb(15%, 15%, 15%);
 }
@@ -4282,3 +2474,30 @@ a.worker-item:hover {
     color: #000;
     white-space: pre;    
 }
+
+.record-profile-status-bar-item .glyph {
+    -webkit-mask-position: -288px 0;
+}
+
+.record-profile-status-bar-item.toggled-on .glyph {
+    -webkit-mask-position: -288px -24px;
+    background-color: rgb(216, 0, 0) !important;
+}
+
+.storage-empty-view, .storage-view .storage-table-error {
+    position: absolute;
+    top: 0;
+    bottom: 25%;
+    left: 0;
+    right: 0;
+    font-size: 24px;
+    color: rgb(75%, 75%, 75%);
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 50px;
+    line-height: 26px;
+    text-align: center;
+    font-weight: bold;
+    padding: 10px;
+    white-space: pre-wrap;
+}
index d509def..740aa0d 100644 (file)
@@ -29,18 +29,12 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" type="text/css" href="audits.css">
-    <link rel="stylesheet" type="text/css" href="dataGrid.css">
     <link rel="stylesheet" type="text/css" href="goToLineDialog.css">
-    <link rel="stylesheet" type="text/css" href="heapProfiler.css">
     <link rel="stylesheet" type="text/css" href="inspector.css">
     <link rel="stylesheet" type="text/css" href="inspectorCommon.css">
     <link rel="stylesheet" type="text/css" href="inspectorSyntaxHighlight.css">
-    <link rel="stylesheet" type="text/css" href="networkLogView.css">
-    <link rel="stylesheet" type="text/css" href="networkPanel.css">
     <link rel="stylesheet" type="text/css" href="helpScreen.css">
     <link rel="stylesheet" type="text/css" href="popover.css">
-    <link rel="stylesheet" type="text/css" href="textViewer.css">
     <script type="text/javascript" src="utilities.js"></script>
     <script type="text/javascript" src="BinarySearch.js"></script>
     <script type="text/javascript" src="treeoutline.js"></script>
index 1bf1af8..863599c 100644 (file)
@@ -1,4 +1,4 @@
-.network-log-grid {
+.network-log-grid.data-grid {
     border: none;
     position: absolute;
     top: 0;
@@ -8,51 +8,51 @@
     font-size: 11px;
 }
 
-.network-log-grid table.data {
+.network-log-grid.data-grid table.data {
     -webkit-background-size: 1px 82px;
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
     font-size: 11px;
 }
 
-.network-log-grid.small table.data {
+.network-log-grid.data-grid.small table.data {
     -webkit-background-size: 1px 42px;
 }
 
-.network-log-grid td {
+.network-log-grid.data-grid td {
     line-height: 17px;
     height: 37px;
     border-right: 1px solid rgb(210, 210, 210);
     vertical-align: middle;
 }
 
-.network-log-grid.small td {
-    height: 17px !important;
+.network-log-grid.data-grid.small td {
+    height: 17px;
 }
 
-.network-log-grid th {
+.network-log-grid.data-grid th {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 30px;
     font-size: 11px;
     font-weight: bold;
 }
 
-.network-log-grid.small th {
+.network-log-grid.data-grid.small th {
     height: 22px;
 }
 
-.network-log-grid th, .data-grid.network-log-grid th.sort-descending, .data-grid.network-log-grid th.sort-ascending {
+.network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
 }
 
-.network-log-grid .data-container {
+.network-log-grid.data-grid .data-container {
     top: 31px;
 }
 
-.network-log-grid.small .data-container {
+.network-log-grid.data-grid.small .data-container {
     top: 23px;
 }
 
-.network-log-grid select {
+.network-log-grid.data-grid select {
     -webkit-appearance: none;
     background-color: transparent;
     border: none;
     font-weight: bold;
 }
 
-.network-log-grid.small tr.offscreen {
+.network-log-grid.data-grid.small tr.offscreen {
     height: 21px;
 }
 
-.network-log-grid tr.offscreen {
+.network-log-grid.data-grid tr.offscreen {
     height: 41px;
 }
 
-.network-log-grid tr.offscreen td {
+.network-log-grid.data-grid tr.offscreen td {
     display: none;
 }
 
-.network-log-grid tr.filler {
+.network-log-grid.data-grid tr.filler {
     background-color: white;
 }
 
-.network-log-grid tr:not(.filler) td.name-column {
+.network-log-grid.data-grid tr:not(.filler) td.name-column {
     font-weight: bold;
     cursor: pointer;
 }
 
-#network-container:not(.brief-mode) .network-log-grid td.name-column:hover {
+#network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
     text-decoration: underline;
 }
 
-.network-log-grid td.method-column,
-.network-log-grid td.status-column,
-.network-log-grid td.type-column,
-.network-log-grid td.initiator-column,
-.network-log-grid td.size-column,
-.network-log-grid td.time-column {
+.network-log-grid.data-grid td.method-column,
+.network-log-grid.data-grid td.status-column,
+.network-log-grid.data-grid td.type-column,
+.network-log-grid.data-grid td.initiator-column,
+.network-log-grid.data-grid td.size-column,
+.network-log-grid.data-grid td.time-column {
     background-color: rgba(0, 0, 0, 0.07);
 }
 
-.network-log-grid td.size-column,
-.network-log-grid td.time-column {
+.network-log-grid.data-grid td.size-column,
+.network-log-grid.data-grid td.time-column {
     text-align: right;
 }
 
-.network-log-grid.small .network-graph-side {
+.network-log-grid.data-grid.small .network-graph-side {
     height: 14px;
 }
 
-.network-log-grid th.sortable:active {
+.network-log-grid.data-grid th.sortable:active {
     background-image: none !important;
 }
 
     color: inherit;
 }
 
-.network-log-grid tr.selected .network-cell-subtitle {
+.network-log-grid.data-grid tr.selected .network-cell-subtitle {
     color: white;
 }
 
     color: gray;
 }
 
-.network-log-grid.small .network-cell-subtitle,
-.network-log-grid.small .network-header-subtitle
+.network-log-grid.data-grid.small .network-cell-subtitle,
+.network-log-grid.data-grid.small .network-header-subtitle
 {
     display: none;
 }
 
 /* Resource preview icons */
 
-.network-log-grid .icon {
+.network-log-grid.data-grid .icon {
     content: url(Images/resourcePlainIcon.png);
 }
 
-.network-log-grid.small .icon {
+.network-log-grid.data-grid.small .icon {
     content: url(Images/resourcePlainIconSmall.png);
 }
 
-.network-log-grid .network-category-scripts .icon {
+.network-log-grid.data-grid .network-category-scripts .icon {
     content: url(Images/resourceJSIcon.png);
 }
 
-.network-log-grid.small .network-category-scripts .icon {
+.network-log-grid.data-grid.small .network-category-scripts .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid .network-category-documents .icon {
+.network-log-grid.data-grid .network-category-documents .icon {
     content: url(Images/resourceDocumentIcon.png);
 }
 
-.network-log-grid.small .network-category-documents .icon {
+.network-log-grid.data-grid.small .network-category-documents .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid .network-category-stylesheets .icon {
+.network-log-grid.data-grid .network-category-stylesheets .icon {
     content: url(Images/resourceCSSIcon.png);
 }
 
-.network-log-grid.small .network-category-stylesheets .icon {
+.network-log-grid.data-grid.small .network-category-stylesheets .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network-log-grid .network-category-images .icon {
+.network-log-grid.data-grid .network-category-images .icon {
     position: relative;
     background-image: url(Images/resourcePlainIcon.png);
     background-repeat: no-repeat;
     content: "";
 }
 
-.network-log-grid.small .network-category-images .icon {
+.network-log-grid.data-grid.small .network-category-images .icon {
     background-image: url(Images/resourcePlainIconSmall.png);
     content: "";
 }
 
-.network-log-grid .icon {
+.network-log-grid.data-grid .icon {
     float: left;
     width: 32px;
     height: 32px;
     margin-right: 3px;
 }
 
-.network-log-grid.small .icon {
+.network-log-grid.data-grid.small .icon {
     width: 16px;
     height: 16px;
 }
 
-.network-log-grid .image-network-icon-preview {
+.network-log-grid.data-grid .image-network-icon-preview {
     position: absolute;
     margin: auto;
     top: 3px;
     min-height: 1px;
 }
 
-.network-log-grid.small .image-network-icon-preview {
+.network-log-grid.data-grid.small .image-network-icon-preview {
     top: 2px;
     bottom: 1px;
     left: 3px;
     background-color: rgba(0, 0, 255, 0.5);
 }
 
-.network-log-grid .resources-dividers {
+.network-log-grid.data-grid .resources-dividers {
     z-index: 0;
 }
 
-.network-log-grid .resources-dividers-label-bar {
+.network-log-grid.data-grid .resources-dividers-label-bar {
     background-color: transparent;
     border: none;
     height: 30px;
     margin-top: 1px;
 }
 
-.data-grid table.data tr.revealed.network-item {
+.network-log-grid.data-grid table.data tr.revealed.network-item {
     display: none;
 }
 
-.data-grid.filter-all table.data tr.revealed.network-item,
-.data-grid.filter-documents table.data tr.revealed.network-category-documents,
-.data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
-.data-grid.filter-images table.data tr.revealed.network-category-images,
-.data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
-.data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
-.data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
-.data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
-.data-grid.filter-other table.data tr.revealed.network-category-other {
+.network-log-grid.data-grid.filter-all table.data tr.revealed.network-item,
+.network-log-grid.data-grid.filter-documents table.data tr.revealed.network-category-documents,
+.network-log-grid.data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
+.network-log-grid.data-grid.filter-images table.data tr.revealed.network-category-images,
+.network-log-grid.data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
+.network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
+.network-log-grid.data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
+.network-log-grid.data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
+.network-log-grid.data-grid.filter-other table.data tr.revealed.network-category-other {
     display: table-row;
 }
 
 /* Summary */
 
-.data-grid.network-log-grid tr.filler td {
+.network-log-grid.data-grid tr.filler td {
     padding-bottom: 20px !important;
 }
 
-.network-summary-bar {
+.network-log-grid.data-grid .network-summary-bar {
     position: absolute;
     left: 0;
     right: 0;
     background-color: rgb(101, 111, 130);
 }
 
-.network-summary-bar td {
+.network-log-grid.data-grid .network-summary-bar td {
     color: white;
-    height: 20px;
+    height: 20px !important;
     border: none;
     font-size: 11px;
     font-weight: bold;
     text-overflow : ellipsis;
 }
 
-.network-summary-bar img {
+.network-log-grid.data-grid .network-summary-bar img {
     vertical-align: middle;
     padding-right: 8px;
 }
     border-right: 1px solid rgb(163, 163, 163);
 }
 
-#network-container.brief-mode .network-log-grid .data-grid-resizer {
+#network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer {
     display: none;
 }
 
index 44ab33e..9878004 100644 (file)
@@ -1,3 +1,32 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
 .network-larger-resources-status-bar-item .glyph {
     -webkit-mask-position: -224px 0;
 }
 
 .resource-headers-view {
     display: none;
-    padding: 6px;
+    margin: 6px;
     -webkit-user-select: text;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     overflow: auto;
-    padding: 12px;
+    margin: 12px;
     height: 100%;
 }
 
     right: 0;
     left: 0;
     bottom: 0;
-    padding: 6px;
+    margin: 6px;
     font-weight: bold;
     font-size: 11px;
     color: rgb(30%, 30%, 30%);
diff --git a/Source/WebCore/inspector/front-end/panelEnablerView.css b/Source/WebCore/inspector/front-end/panelEnablerView.css
new file mode 100644 (file)
index 0000000..d73c6cb
--- /dev/null
@@ -0,0 +1,171 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+.panel-enabler-view {
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+    font-size: 13px;
+    text-align: center;
+    overflow-x: hidden;
+    overflow-y: overlay;
+    display: none;
+}
+
+.panel-enabler-view.visible {
+    display: block;
+}
+
+.panel-enabler-view .panel-enabler-view-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 390px;
+    margin: auto;
+    white-space: nowrap;
+}
+
+.panel-enabler-view h1 {
+    color: rgb(110, 116, 128);
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: normal;
+    margin-top: 0;
+}
+
+.panel-enabler-disclaimer {
+    font-size: 10px;
+    color: rgb(110, 116, 128);
+    margin-bottom: 12px;
+    margin-left: 20px;
+}
+
+.panel-enabler-disclaimer:empty {
+    display: none;
+}
+
+.panel-enabler-view img, div.welcome-instructions-aligner {
+    height: 100%;
+    min-height: 200px;
+    max-width: 100%;
+    top: 0;
+    bottom: 0;
+    padding: 20px 0 20px 20px;
+    margin: auto;
+    vertical-align: middle;
+}
+
+.panel-enabler-view img.hidden {
+    display: initial !important;
+    width: 0;
+}
+
+.panel-enabler-view form {
+    display: inline-block;
+    vertical-align: middle;
+    width: 330px;
+    margin: 0;
+    padding: 15px;
+    white-space: normal;
+}
+
+.panel-enabler-view label {
+    position: relative;
+    display: block;
+    text-align: left;
+    word-break: break-word;
+    margin: 0 0 5px 20px;
+}
+
+.panel-enabler-view button:not(.status-bar-item) {
+    font-size: 13px;
+    margin: 6px 0 0 0;
+    padding: 3px 20px;
+    height: 24px;
+}
+
+.panel-enabler-view.welcome {
+    z-index: auto;
+}
+
+.panel-enabler-view.welcome div.welcome-instructions-aligner {
+    display: inline-block;
+    width: 0;
+}
+
+.panel-enabler-view.welcome .instructions {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    white-space: normal;
+    line-height: 175%;
+}
+
+.panel-enabler-view.welcome .message {
+    margin-bottom: 2ex;
+}
+
+.panel-enabler-view.welcome button.status-bar-item {
+    background-image: none;
+    vertical-align: top;
+}
+
+.panel-enabler-view input {
+    height: 17px;
+    width: 17px;
+    border: 1px solid rgb(165, 165, 165);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
+    -webkit-border-radius: 8px;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    margin: 0 5px 5px 0;
+}
+
+.panel-enabler-view input:active {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
+}
+
+.panel-enabler-view input:checked {
+    background: url(Images/radioDot.png) center no-repeat,
+                -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
+}
+
+.panel-enabler-view.scripts img {
+    content: url(Images/scriptsSilhouette.png);
+}
+
+.panel-enabler-view.profiles img {
+    content: url(Images/profilesSilhouette.png);
+}
diff --git a/Source/WebCore/inspector/front-end/profilesPanel.css b/Source/WebCore/inspector/front-end/profilesPanel.css
new file mode 100644 (file)
index 0000000..c5607f5
--- /dev/null
@@ -0,0 +1,142 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+/* Profiler Style */
+
+#profile-views {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 200px;
+    bottom: 0;
+}
+
+.status-bar-items {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 200px;
+    overflow: hidden;
+    border-left: 1px solid rgb(184, 184, 184);
+    margin-left: -1px;
+}
+
+.profile-sidebar-tree-item .icon {
+    content: url(Images/profileIcon.png);
+}
+
+.profile-sidebar-tree-item.small .icon {
+    content: url(Images/profileSmallIcon.png);
+}
+
+.profile-group-sidebar-tree-item .icon {
+    content: url(Images/profileGroupIcon.png);
+}
+
+.profile-view {
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.profile-view.visible {
+    display: block;
+}
+
+.profile-view .data-grid {
+    border: none;
+    height: 100%;
+}
+
+.profile-view .data-grid th.average-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.average-column {
+    text-align: right;
+}
+
+.profile-view .data-grid th.self-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.self-column {
+    text-align: right;
+}
+
+.profile-view .data-grid th.total-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.total-column {
+    text-align: right;
+}
+
+.profile-view .data-grid .calls-column {
+    text-align: center;
+}
+
+.profile-node-file {
+    float: right;
+    color: gray;
+    margin-top: -1px;
+}
+
+.data-grid tr.selected .profile-node-file {
+    color: rgb(33%, 33%, 33%);
+}
+
+.data-grid:focus tr.selected .profile-node-file {
+    color: white;
+}
+
+/* FIXME: should have its own glyph. */
+.heap-snapshot-status-bar-item .glyph {
+    -webkit-mask-position: -96px 0;
+}
+
+.percent-time-status-bar-item .glyph {
+    -webkit-mask-position: -192px -24px;
+}
+
+.focus-profile-node-status-bar-item .glyph {
+    -webkit-mask-position: -96px 0;
+}
+
+.exclude-profile-node-status-bar-item .glyph {
+    -webkit-mask-position: -128px 0;
+}
+
+.reset-profile-status-bar-item .glyph {
+    -webkit-mask-position: 0 0;
+}
diff --git a/Source/WebCore/inspector/front-end/resourceView.css b/Source/WebCore/inspector/front-end/resourceView.css
new file mode 100644 (file)
index 0000000..5de3c7a
--- /dev/null
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+.resource-view {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.resource-view.visible {
+    display: block;
+}
+
+.resource-view.font {
+    font-size: 60px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    text-align: center;
+    padding: 15px;
+}
+
+.resource-view.image > .image {
+    padding: 20px 20px 10px 20px;
+    text-align: center;
+}
+
+.resource-view.image > .info {
+    padding-bottom: 10px;
+    font-size: 11px;
+    -webkit-user-select: text;
+}
+
+.resource-view.image img.resource-image-view {
+    max-width: 100%;
+    max-height: 1000px;
+    background-image: url(Images/checker.png);
+    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+    -webkit-user-select: text;
+    -webkit-user-drag: auto;
+}
+
+.resource-status-image {
+    margin-top: -3px;
+    vertical-align: middle;
+}
+
+.resource-view.image .title {
+    text-align: center;
+    font-size: 13px;
+}
+
+.resource-view.image .infoList {
+    margin: 0;
+}
+
+.resource-view.image .infoList dt {
+    font-weight: bold;
+    display: inline-block;
+    width: 50%;
+    text-align: right;
+    color: rgb(76, 76, 76);
+}
+
+.resource-view.image .infoList dd {
+    display: inline-block;
+    padding-left: 8px;
+    width: 50%;
+    text-align: left;
+    margin: 0;
+}
+
+.resource-view.image .infoList dd::after {
+    white-space: pre;
+    content: "\A";
+}
diff --git a/Source/WebCore/inspector/front-end/resourcesPanel.css b/Source/WebCore/inspector/front-end/resourcesPanel.css
new file mode 100644 (file)
index 0000000..ab8522d
--- /dev/null
@@ -0,0 +1,339 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+.resources .outline-disclosure li {
+    text-indent: -1px;
+}
+
+.resources .sidebar-resizer-vertical {
+    top: 23px;
+}
+
+#storage-views {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 200px;
+    bottom: 0;
+}
+
+.resources.panel .sidebar {
+    padding-left: 0;
+    z-index: 10;
+}
+
+.resources.panel .sidebar li {
+    height: 17px;
+    white-space: nowrap;
+    text-indent: 0;
+    margin-left: -2px;
+}
+
+.resources.panel .sidebar li.parent {
+    text-indent: 0;
+    margin-left: -12px;
+}
+
+.resources.panel .sidebar li.selected {
+    color: white;
+    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
+    font-weight: bold;
+}
+
+.resources.panel .sidebar li.selected .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
+    border-top: 1px solid #979797;
+    height: 17px;
+}
+
+.resources.panel .sidebar :focus li.selected .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
+    border-top: 1px solid rgb(68, 128, 200);
+}
+
+body.inactive .resources.panel .sidebar li.selected .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
+    border-top: 1px solid rgb(151, 151, 151);
+}
+
+.resources.panel .sidebar .icon {
+    width: 16px;
+    height: 16px;
+    float: left;
+}
+
+.resources.panel .base-storage-tree-element-title {
+    overflow: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    padding-left: 2px;
+    top: 1px;
+}
+
+li.selected .base-storage-tree-element-subtitle {
+    color: white;
+}
+
+.base-storage-tree-element-subtitle {
+    padding-left: 2px;
+    color: rgb(80, 80, 80);
+    text-shadow: none;
+}
+
+.resources.panel .status {
+    float: right;
+    height: 16px;
+    margin-top: 1px;
+    margin-left: 4px;
+    line-height: 1em;
+}
+
+.resources.panel li .status .bubble {
+    height: 13px;
+    padding-top: 0;
+}
+
+.storage-view {
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.storage-view.visible {
+    display: block;
+}
+
+.storage-view {
+    overflow: hidden;
+}
+
+.storage-view .data-grid {
+    border: none;
+    height: 100%;
+}
+
+.storage-view .storage-table-error {
+    color: rgb(66%, 33%, 33%);
+}
+
+.storage-view.query {
+    padding: 2px 0;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: auto;
+}
+
+.database-query-prompt {
+    position: relative;
+    padding: 1px 22px 1px 24px;
+    min-height: 16px;
+    white-space: pre-wrap;
+    -webkit-user-modify: read-write-plaintext-only;
+    -webkit-user-select: text;
+}
+
+.database-user-query::before, .database-query-prompt::before, .database-query-result::before {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 7px;
+    top: 0.8em;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+    -webkit-user-select: none;
+}
+
+.database-query-prompt::before {
+    background-image: url(Images/userInputIcon.png);
+}
+
+.database-user-query {
+    position: relative;
+    border-bottom: 1px solid rgb(245, 245, 245);
+    padding: 1px 22px 1px 24px;
+    min-height: 16px;
+}
+
+.database-user-query::before {
+    background-image: url(Images/userInputPreviousIcon.png);
+}
+
+.database-query-text {
+    color: rgb(0, 128, 255);
+    -webkit-user-select: text;
+}
+
+.database-query-result {
+    position: relative;
+    padding: 1px 22px 1px 24px;
+    min-height: 16px;
+    margin-left: -24px;
+    padding-right: 0;
+}
+
+.database-query-result.error {
+    color: red;
+    -webkit-user-select: text;
+}
+
+.database-query-result.error::before {
+    background-image: url(Images/errorIcon.png);
+}
+
+.resource-sidebar-tree-item .icon {
+    content: url(Images/resourcePlainIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item .icon {
+    content: url(Images/resourcePlainIconSmall.png);
+}
+
+.resource-sidebar-tree-item.resources-category-images .icon {
+    position: relative;
+    background-image: url(Images/resourcePlainIcon.png);
+    background-repeat: no-repeat;
+    content: "";
+}
+
+.resources-category-images .image-resource-icon-preview {
+    position: absolute;
+    margin: auto;
+    top: 3px;
+    bottom: 4px;
+    left: 5px;
+    right: 5px;
+    max-width: 18px;
+    max-height: 21px;
+    min-width: 1px;
+    min-height: 1px;
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-images .icon {
+    background-image: url(Images/resourcePlainIconSmall.png);
+    content: "";
+}
+
+.children.small .resources-category-images .image-resource-icon-preview {
+    top: 2px;
+    bottom: 1px;
+    left: 3px;
+    right: 3px;
+    max-width: 8px;
+    max-height: 11px;
+}
+
+.resource-sidebar-tree-item.resources-category-documents .icon {
+    content: url(Images/resourceDocumentIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-documents .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.resource-sidebar-tree-item.resources-category-stylesheets .icon {
+    content: url(Images/resourceCSSIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.resource-sidebar-tree-item.resources-category-images .icon {
+    position: relative;
+    background-image: url(Images/resourcePlainIcon.png);
+    background-repeat: no-repeat;
+    content: "";
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-images .icon {
+    background-image: url(Images/resourcePlainIconSmall.png);
+    content: "";
+}
+
+.resource-sidebar-tree-item.resources-category-fonts .icon {
+    content: url(Images/resourcePlainIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
+    content: url(Images/resourcePlainIconSmall.png);
+}
+
+.resource-sidebar-tree-item.resources-category-scripts .icon {
+    content: url(Images/resourceJSIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.resource-sidebar-tree-item.resources-category-xhr .icon {
+    content: url(Images/resourcePlainIcon.png);
+}
+
+.children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
+    content: url(Images/resourceDocumentIconSmall.png);
+}
+
+.frame-storage-tree-item .icon {
+    content: url(Images/frame.png);
+}
+
+.database-storage-tree-item .icon {
+    content: url(Images/database.png);
+}
+
+.database-table-storage-tree-item .icon {
+    content: url(Images/databaseTable.png);
+}
+
+.domstorage-storage-tree-item.local-storage .icon {
+    content: url(Images/localStorage.png);
+}
+
+.domstorage-storage-tree-item.session-storage .icon {
+    content: url(Images/sessionStorage.png);
+}
+
+.cookie-storage-tree-item .icon {
+    content: url(Images/cookie.png);
+}
+
+.application-cache-storage-tree-item .icon {
+    content: url(Images/applicationCache.png);
+}
+
+/* FIXME: Make separate png for file-system */
+.file-system-storage-tree-item .icon {
+    content: url(Images/applicationCache.png);
+}
diff --git a/Source/WebCore/inspector/front-end/scriptsPanel.css b/Source/WebCore/inspector/front-end/scriptsPanel.css
new file mode 100644 (file)
index 0000000..15413f3
--- /dev/null
@@ -0,0 +1,174 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+.scripts-pause-on-exceptions-status-bar-item .glyph {
+    -webkit-mask-position: -256px 0;
+}
+
+.scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph {
+    background-color: rgb(66, 129, 235);
+}
+
+.scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph {
+    background-color: purple;
+}
+
+.scripts-toggle-pretty-print-status-bar-item .glyph {
+    -webkit-mask-position: -256px -24px;
+}
+
+.scripts-toggle-pretty-print-status-bar-item.toggled .glyph {
+    background-color: rgb(66, 129, 235);
+}
+
+#scripts-status-bar {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    right: 0;
+    height: 24px;
+}
+
+#scripts-files {
+    max-width: 250px;
+}
+
+#scripts-files option.extension-script {
+    color: rgb(70, 134, 240);
+}
+
+#scripts-functions {
+    max-width: 150px;
+}
+
+#scripts-status-bar .status-bar-item img {
+    margin-top: 2px;
+}
+
+#scripts-back img {
+    content: url(Images/back.png);
+}
+
+#scripts-forward img {
+    content: url(Images/forward.png);
+}
+
+#scripts-pause img {
+    content: url(Images/debuggerPause.png);
+}
+
+#scripts-pause.paused img {
+    content: url(Images/debuggerContinue.png);
+}
+
+#scripts-step-over img {
+    content: url(Images/debuggerStepOver.png);
+}
+
+#scripts-step-into img {
+    content: url(Images/debuggerStepInto.png);
+}
+
+#scripts-step-out img {
+    content: url(Images/debuggerStepOut.png);
+}
+
+.toggle-breakpoints .glyph {
+    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
+    -webkit-mask-position: -32px 0;
+    background-color: rgb(96, 96, 96) !important;
+}
+
+.toggle-breakpoints.toggled-on .glyph {
+    -webkit-mask-position: 0 -24px;
+}
+
+#scripts-debugger-status {
+    position: absolute;
+    line-height: 24px;
+    top: 0;
+    right: 8px;
+}
+
+#scripts-sidebar-resizer-widget {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 225px;
+    width: 16px;
+    cursor: ew-resize;
+    background-image: url(Images/statusbarResizerHorizontal.png);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#scripts-sidebar-buttons {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 225px;
+    overflow: hidden;
+    border-left: 1px solid rgb(64%, 64%, 64%);
+}
+
+#script-resource-views {
+    display: block;
+    padding: 0;
+    position: absolute;
+    top: 23px;
+    left: 0;
+    right: 225px;
+    bottom: 0;
+}
+
+.script-view {
+    display: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.script-view.visible {
+    display: block;
+}
+
+#scripts-sidebar {
+    position: absolute;
+    top: 23px;
+    right: 0;
+    bottom: 0;
+    width: 225px;
+    border-left: 1px solid rgb(64%, 64%, 64%);
+    cursor: default;
+    overflow: auto;
+}
diff --git a/Source/WebCore/inspector/front-end/timelinePanel.css b/Source/WebCore/inspector/front-end/timelinePanel.css
new file mode 100644 (file)
index 0000000..edacb1c
--- /dev/null
@@ -0,0 +1,504 @@
+/*
+ * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
+ *
+ * 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.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" 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 APPLE OR ITS 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.
+ */
+
+#timeline-overview-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+}
+
+#timeline-overview-panel .timeline-graph-bar {
+    pointer-events: none;
+}
+
+.sidebar.timeline-sidebar-background {
+    top: 90px;
+    bottom: 0;
+}
+
+.timeline .sidebar {
+    overflow-y: hidden;
+    z-index: 100;
+    min-height: 100%;
+    bottom: auto;
+}
+
+#timeline-overview-separator {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
+    border-top: 1px solid rgb(140, 140, 140);
+    border-bottom: 1px solid rgb(115, 115, 115);
+    height: 10px;
+}
+
+#timeline-overview-sidebar {
+    position: absolute;
+    width: 200px;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    padding-top: 2px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
+    border-right: 1px solid rgb(163, 163, 163);
+}
+
+#timeline-overview-grid {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 200px;
+    right: 0px;
+    background-color: rgb(255, 255, 255);
+}
+
+.timeline-window-selector {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(125, 173, 217, 0.5);
+    z-index: 250;
+}
+
+#timeline-overview-window {
+    background-color: white;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 60px;
+    z-index: 150;
+}
+
+.timeline-overview-dividers-background {
+    left: 0%;
+    right: 0%;
+    top: 0px;
+    bottom: 60px;
+    background-color: black;
+    position: absolute;
+}
+
+.timeline-overview-window-rulers {
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    opacity: 0.2;
+    border-right: 1px solid black;
+    border-left: 1px solid black;
+    z-index: 150;
+}
+
+.timeline-window-resizer {
+    position: absolute;
+    top: 0px;
+    bottom: 60px;
+    width: 5px;
+    margin-left: -3px;
+    margin-right: -2px;
+    background-color: rgb(153, 153, 153);
+    z-index: 500;
+    cursor: ew-resize;
+    -webkit-border-radius: 2px;
+    -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
+}
+
+#timeline-overview-grid #resources-graphs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+}
+
+#timeline-container {
+    position: absolute;
+    top: 90px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-right: 0 none transparent;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.timeline-category-statusbar-item {
+    height: 24px;
+    line-height: 24px;
+    padding-left: 6px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-weight: bold;
+}
+
+.timeline-category-statusbar-item .timeline-category-checkbox {
+    width: 10px;
+    height: 11px;
+    margin: 0 3px 0 5px;
+    padding: 0;
+    background-image: url(Images/timelineCheckmarks.png);
+    background-repeat: no-repeat;
+    background-position: 0 -66px;
+    vertical-align: -1px;
+    -webkit-appearance: none;
+}
+
+.timeline-category-statusbar-item .timeline-category-checkbox:checked {
+    background-position-x: -10px;
+}
+
+.timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
+    background-position-y: 0;
+}
+
+.timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
+    background-position-y: -33px;
+}
+
+.timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
+    background-position-y: -11px;
+}
+
+.timeline-tree-item {
+    height: 18px;
+    line-height: 15px;
+    padding-right: 5px;
+    padding-left: 10px;
+    padding-top: 2px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.timeline-expandable {
+    position: absolute;
+    border-left: 1px solid rgb(163, 163, 163);
+}
+
+.timeline-expandable-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 3px;
+    border-top: 1px solid rgb(163, 163, 163);
+    border-bottom: 1px solid rgb(163, 163, 163);
+}
+
+.timeline-expandable-collapsed {
+    background-image: url(Images/disclosureTriangleSmallRightBlack.png);
+    background-position-x: 1px;
+    background-position-y: 2px;
+    background-repeat: no-repeat;
+}
+
+.timeline-expandable-expanded {
+    background-image: url(Images/disclosureTriangleSmallDownBlack.png);
+    background-position-x: 1px;
+    background-position-y: 3px;
+    background-repeat: no-repeat;
+}
+
+.timeline-tree-item .type {
+    padding-left: 14px;
+}
+
+.timeline-tree-item .count {
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+}
+
+.timeline-tree-item .timeline-tree-icon {
+    background-image: url(Images/timelineDots.png);
+    margin-top: 2px;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+}
+
+.timeline-tree-item.even {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.timeline-tree-item .data.dimmed {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+#timeline-overview-timelines,
+#timeline-overview-memory {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 20px;
+    z-index: 160;
+}
+
+#timeline-overview-memory > canvas {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 5px;
+}
+
+
+#timeline-graphs {
+    position: absolute;
+    left: 0;
+    right: 0;
+    max-height: 100%;
+    top: 19px;
+}
+
+.timeline-graph-side {
+    position: relative;
+    height: 18px;
+    padding: 0 5px;
+    white-space: nowrap;
+    margin-top: 0px;
+    border-top: 1px solid transparent;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.timeline-overview-graph-side {
+    height: 20px;
+    z-index: 170;
+    pointer-events: none;
+}
+
+.timeline-overview-graph-side .timeline-graph-bar {
+    height: 13px;
+}
+
+.timeline-graph-bar-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 3px;
+    pointer-events: none;
+}
+
+.timeline-graph-bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto -2px;
+    border-width: 4px 4px 5px;
+    height: 9px;
+    min-width: 5px;
+    opacity: 0.8;
+    -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
+    z-index: 180;
+    pointer-events: visibleFill;
+}
+
+.timeline-graph-bar.with-children {
+    opacity: 0.2;
+}
+
+.timeline-graph-bar.cpu {
+    opacity: 0.6;
+}
+
+.timeline-graph-side.even {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.timeline-category-loading .timeline-graph-bar {
+    -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
+}
+
+.timeline-category-scripting .timeline-graph-bar {
+    -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
+}
+
+.timeline-category-rendering .timeline-graph-bar {
+    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
+}
+
+.timeline-aggregated-category {
+    display: inline-block;
+    height: 11px;
+    margin-right: 2px;
+    margin-left: 6px;
+    position: relative;
+    top: 2px;
+    width: 10px;
+}
+
+.timeline-loading {
+    -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
+}
+
+.timeline-scripting {
+    -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
+}
+
+.timeline-rendering {
+    -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
+}
+
+.popover .timeline-aggregated-category.timeline-loading {
+    margin-left: 0px;
+}
+
+.timeline-category-loading .timeline-tree-icon {
+    background-position-y: 0px;
+}
+
+.timeline-category-scripting .timeline-tree-icon {
+    background-position-y: 48px;
+}
+
+.timeline-category-rendering .timeline-tree-icon {
+    background-position-y: 72px;
+}
+
+.timeline-details {
+    -webkit-user-select: text;
+    vertical-align: top;
+}
+
+.timeline-function-name {
+    text-align: right;
+}
+
+.timeline-stacktrace-title {
+    padding-top: 4px;
+}
+
+.timeline-details-row-title {
+    font-weight: bold;
+    text-align: right;
+    white-space: nowrap;
+}
+
+.timeline-details-row-data {
+    white-space: nowrap;
+}
+
+.timeline-details-title {
+    border-bottom: 1px solid #B8B8B8;
+    font-size: 11px;
+    font-weight: bold;
+    padding-bottom: 5px;
+    padding-top: 0px;
+    white-space: nowrap;
+}
+
+.timeline-filter-status-bar-item .glyph {
+    -webkit-mask-position: -32px -48px;
+}
+
+.timeline-filter-status-bar-item.toggled-on .glyph {
+    background-color: rgb(66, 129, 235) !important;
+}
+
+.garbage-collect-status-bar-item .glyph {
+    -webkit-mask-position: -128px -24px;
+}
+
+.timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
+    font-size: 11px;
+    text-shadow: white 0 1px 0;
+}
+
+#main-status-bar > .timeline-records-counter {
+    float: right;
+    margin-top: 4px;
+    margin-right: 25px;
+}
+
+#counters > .timeline-records-counter {
+    float: left;
+    margin-top: -2px;
+}
+
+#resources-container-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 200px;
+    min-height: 100%;
+}
+
+#resources-graphs {
+    position: absolute;
+    left: 0;
+    right: 0;
+    max-height: 100%;
+    top: 112px;
+}
+
+.resources-graph-side {
+    position: relative;
+    height: 36px;
+    padding: 0 5px;
+    white-space: nowrap;
+    margin-top: 1px;
+    border-top: 1px solid transparent;
+    overflow: hidden;
+}
+
+.resources-graph-bar-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 8px;
+    left: 9px;
+}
+
+.resources-time-graph-sidebar-item .icon {
+    content: url(Images/resourcesTimeGraphIcon.png);
+}
+
+.resources-size-graph-sidebar-item .icon {
+    content: url(Images/resourcesSizeGraphIcon.png);
+}
+
+.resources-size-graph-sidebar-item .icon {
+    content: url(Images/resourcesSizeGraphIcon.png);
+}
+
+.memory-graph-label {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    font-size: 9px;
+    color: rgb(50%, 50%, 50%);
+    white-space: nowrap;
+}