Implement basic toolbar with Material Design and loading progress.

chrome/browser/resources/pdf/index.css

Index: chrome/browser/resources/pdf/index.css
diff --git a/chrome/browser/resources/pdf/index.css b/chrome/browser/resources/pdf/index.css
index 06ca8fc2c1208068d6726c83b246236707f20087..7cec64564004d47e4f122e578d979e63be892dd2 100644
--- a/chrome/browser/resources/pdf/index.css
+++ b/chrome/browser/resources/pdf/index.css
@@ -4,21 +4,38 @@
 
 body {
   background-color: #ccc;
+  font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial;
   margin: 0;
 }
 
-viewer-toolbar {
+core-toolbar {
+  background-color: rgb(33, 150, 243);
+  color: rgb(241, 241, 241);
+  font-size: 2em;
+}
+
+#toolbar-shadow {
+  position: fixed;
+  width: 100%;
+  z-index: 4;
+}
+
+#progress-bar {
   visibility: hidden;
-  white-space: nowrap;
   z-index: 3;
 }
 
-viewer-page-indicator {
+paper-progress::shadow #activeProgress {
+  background-color: rgb(100, 181, 246);
+}

[raymes, 2015/01/09 04:15:09]

Since this file is quite small and I think the material css file will end up
quite different, can we create a separate one (index-material.css)?

[Alexandre Carlton, 2015/01/12 06:33:57]

Done.

+
+viewer-toolbar {
   visibility: hidden;
+  white-space: nowrap;
   z-index: 3;
 }
 
-viewer-progress-bar {
+viewer-page-indicator {
   visibility: hidden;
   z-index: 3;
 }

[raymes, 2015/01/09 04:15:10]

Is this meant to be deleted?