DevTools: Make DevTools look like Chrome.

Review URL: http://codereview.chromium.org/277002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@28955 0039d316-1c4b-4281-b951-d872f2087c98

12 files changed, 82 insertions, 0 deletions

diff --git a/webkit/glue/devtools/js/Images/segmentChromium.png b/webkit/glue/devtools/js/Images/segmentChromium.png
new file mode 100644
index 0000000..607559b
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/segmentChromium.png
diff --git a/webkit/glue/devtools/js/Images/segmentHoverChromium.png b/webkit/glue/devtools/js/Images/segmentHoverChromium.png
new file mode 100644
index 0000000..0a743d9
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/segmentHoverChromium.png
diff --git a/webkit/glue/devtools/js/Images/segmentHoverEndChromium.png b/webkit/glue/devtools/js/Images/segmentHoverEndChromium.png
new file mode 100644
index 0000000..cf62072
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/segmentHoverEndChromium.png
diff --git a/webkit/glue/devtools/js/Images/segmentSelectedChromium.png b/webkit/glue/devtools/js/Images/segmentSelectedChromium.png
new file mode 100644
index 0000000..a1f7251
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/segmentSelectedChromium.png
diff --git a/webkit/glue/devtools/js/Images/segmentSelectedEndChromium.png b/webkit/glue/devtools/js/Images/segmentSelectedEndChromium.png
new file mode 100644
index 0000000..07641db
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/segmentSelectedEndChromium.png
diff --git a/webkit/glue/devtools/js/Images/statusbarBackgroundChromium.png b/webkit/glue/devtools/js/Images/statusbarBackgroundChromium.png
new file mode 100644
index 0000000..9d326ac
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/statusbarBackgroundChromium.png
diff --git a/webkit/glue/devtools/js/Images/statusbarBottomBackgroundChromium.png b/webkit/glue/devtools/js/Images/statusbarBottomBackgroundChromium.png
new file mode 100644
index 0000000..7c7db0a
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/statusbarBottomBackgroundChromium.png
diff --git a/webkit/glue/devtools/js/Images/statusbarButtonsChromium.png b/webkit/glue/devtools/js/Images/statusbarButtonsChromium.png
new file mode 100644
index 0000000..0c6635d
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/statusbarButtonsChromium.png
diff --git a/webkit/glue/devtools/js/Images/statusbarMenuButtonChromium.png b/webkit/glue/devtools/js/Images/statusbarMenuButtonChromium.png
new file mode 100644
index 0000000..bf26684
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/statusbarMenuButtonChromium.png
diff --git a/webkit/glue/devtools/js/Images/statusbarMenuButtonSelectedChromium.png b/webkit/glue/devtools/js/Images/statusbarMenuButtonSelectedChromium.png
new file mode 100644
index 0000000..3c0aeec
--- /dev/null
+++ b/webkit/glue/devtools/js/Images/statusbarMenuButtonSelectedChromium.png
diff --git a/webkit/glue/devtools/js/devtools.css b/webkit/glue/devtools/js/devtools.css
index 8ab6967..36f6bc0 100644
--- a/webkit/glue/devtools/js/devtools.css
+++ b/webkit/glue/devtools/js/devtools.css
@@ -79,3 +79,75 @@ body.attached #toolbar {
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
 }
+
+.section .header {
+    border: 1px solid rgb(92, 116, 157);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(105, 133, 180)), to(rgb(92, 116, 157)));
+}
+
+#resources-filter {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(233, 233, 233)));
+}
+
+.crumbs .crumb {
+    -webkit-border-image: url(Images/segmentChromium.png) 0 12 0 2;
+}
+
+.crumbs .crumb.end {
+    -webkit-border-image: url(Images/segmentEndChromium.png) 0 2 0 2;
+}
+
+.crumbs .crumb.selected {
+    -webkit-border-image: url(Images/segmentSelectedChromium.png) 0 12 0 2;
+    color: white;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 0px 0;
+}
+
+.crumbs .crumb.selected:hover {
+    -webkit-border-image: url(Images/segmentSelectedChromium.png) 0 12 0 2;
+}
+
+.crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
+    -webkit-border-image: url(Images/segmentSelectedEndChromium.png) 0 2 0 2;
+}
+
+.crumbs .crumb:hover {
+    -webkit-border-image: url(Images/segmentHoverChromium.png) 0 12 0 2;
+}
+
+.crumbs .crumb.dimmed:hover {
+    -webkit-border-image: url(Images/segmentHoverChromium.png) 0 12 0 2;
+}
+
+.crumbs .crumb.end:hover {
+    -webkit-border-image: url(Images/segmentHoverEndChromium.png) 0 2 0 2;
+}
+
+body.drawer-visible #main-status-bar {
+    background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackgroundChromium.png);
+}
+
+.status-bar {
+    background-image: url(Images/statusbarBackgroundChromium.png);
+}
+
+button.status-bar-item {
+    background-image: url(Images/statusbarButtonsChromium.png);
+}
+
+select.status-bar-item:active {
+    -webkit-border-image: url(Images/statusbarMenuButtonSelectedChromium.png) 0 17 0 2;
+}
+
+
+#drawer {
+    background-image: url(Images/statusbarBottomBackgroundChromium.png);
+}
+
+select.status-bar-item {
+    -webkit-border-image: url(Images/statusbarMenuButtonChromium.png) 0 17 0 2;
+}
+
+select.status-bar-item:active {
+    -webkit-border-image: url(Images/statusbarMenuButtonSelectedChromium.png) 0 17 0 2;
+}
diff --git a/webkit/webkit.gyp b/webkit/webkit.gyp
index 81776fdc..11409cb 100644
--- a/webkit/webkit.gyp
+++ b/webkit/webkit.gyp
@@ -754,6 +754,16 @@
 
             '<@(webinspector_image_files)',
 
+            'glue/devtools/js/Images/segmentChromium.png',
+            'glue/devtools/js/Images/segmentHoverChromium.png',
+            'glue/devtools/js/Images/segmentHoverEndChromium.png',
+            'glue/devtools/js/Images/segmentSelectedChromium.png',
+            'glue/devtools/js/Images/segmentSelectedEndChromium.png',
+            'glue/devtools/js/Images/statusbarBackgroundChromium.png',
+            'glue/devtools/js/Images/statusbarBottomBackgroundChromium.png',
+            'glue/devtools/js/Images/statusbarButtonsChromium.png',
+            'glue/devtools/js/Images/statusbarMenuButtonChromium.png',
+            'glue/devtools/js/Images/statusbarMenuButtonSelectedChromium.png',
           ],
         },
       ],