Print Preview component extension

chrome/browser/resources/shared/css/button.css

 button {
   padding: 5px 8px;
   border: 1px solid rgba(0, 0, 0, .50);
   -webkit-border-radius: 3px;
   -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .10);
   background: -webkit-gradient(linear, 0 50%, 0 100%,
                                from(#ffffff), to(#e3e3e3));
 }
 
+button.dropdown {
+  background-image: url("chrome://resources/images/dropdown_arrow.png"),
+                    -webkit-gradient(linear, 0 50%, 0 100%,
+                                     from(#ffffff), to(#e3e3e3));
+  background-repeat: no-repeat, no-repeat;
+  background-position: center right, top left;
+}
+
+/* TODO(feldstein): This should use -webkit-padding-end once it
+   is supported. https://bugs.webkit.org/show_bug.cgi?id=41322 */
+html:not([dir="rtl"]) button.dropdown {
+  padding-right: 15px;
+}
+
+html[dir="rtl"] button.dropdown {
+  background-position: center left, top right;
+  padding-left: 15px;
+}
+
 button:active {
-  background: -webkit-gradient(linear, 0 4%, 0 100%,
+  background-image: -webkit-gradient(linear, 0 4%, 0 100%,
                                from(#c3c3c3), to(#f5f5f5));
 }
 
+button.dropdown:active {
+  background-image: url("chrome://resources/images/dropdown_arrow.png"),
+                    -webkit-gradient(linear, 0 4%, 0 100%,
+                                     from(#c3c3c3), to(#f5f5f5));
+}
+
 button:focus {
   /* TODO(feldstein): find a better way to keep buttons same size. */
   padding: 4px 7px;
   outline: none;
   border: 2px solid #426dc9;
 }
 
 button.action {
   border: 1px solid #2e4987;
   font-weight: bold;
@@ skipping 13 matching lines @@
   background: -webkit-gradient(linear, 0 0, 0 100%,
                                from(#426dc9), to(#6391de));
 }
 
 button:disabled {
   border: 1px solid rgba(0, 0, 0, .35);
   color: rgba(0, 0, 0, .30);
   background: -webkit-gradient(linear, 0 0, 0 100%,
                                from(#ffffff), to(#e3e3e3));
 }