Refactor print preview web ui

chrome/browser/resources/print_preview/print_preview.css

Index: chrome/browser/resources/print_preview/print_preview.css
diff --git a/chrome/browser/resources/print_preview/print_preview.css b/chrome/browser/resources/print_preview/print_preview.css
index 46351f6dafc0227ef7553f8ce5dcdc872286881b..a66b0ef6543e5b745d0c6c310cc5f29c323e4e46 100644
--- a/chrome/browser/resources/print_preview/print_preview.css
+++ b/chrome/browser/resources/print_preview/print_preview.css
@@ -16,11 +16,13 @@ body {
 
 header {
   -webkit-padding-start: 16px;
+  background-color: #F1F1F1;
 }
 
 #print-preview #navbar-container {
   -webkit-box-orient: vertical;
   -webkit-user-select: none;
+  background-color: white;
   display: -webkit-box;
   width: 310px;
 }
@@ -30,26 +32,16 @@ header {
   text-align: start;
 }
 
-#print-header {
-  -webkit-padding-end: 14px;
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-
-#print-summary {
-  color: rgb(83, 99, 125);
-  display: block;
-  min-height: 30px;
-}
-
 /* Settings */
 
 #settings {
   -webkit-box-flex: 1;
   -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3);
   background: white;
+  display: table;
   overflow-y: auto;
   padding-top: 2px;
+  width: 100%;
 }
 
 .two-column {
@@ -239,132 +231,18 @@ label {
   display: block;
 }
 
-#collate-option {
- -webkit-padding-start: 16px;
-  display: inline-block;
-}
-
-#copies {
-  position: relative;
-  width: 2.75em;
-}
-
-#copies.invalid {
-  background: rgb(255, 240, 240);
-  color: rgb(140, 20, 20);
-}
-
-#increment,
-#decrement {
-  -webkit-padding-end: 0;
-  -webkit-padding-start: 0;
-  font-weight: 600;
-  margin: 0;
-  min-width: 0;
-  position: relative;
-  width: 2em;
-}
-
-#increment:focus,
-#decrement:focus,
-#copies:focus {
-  z-index: 1;
-}
-
-#increment {
-  -webkit-margin-start: -5px;
-  border-radius: 0;
-}
-
-#decrement {
-  -webkit-margin-start: -5px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 3px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 3px;
-}
-
-html[dir='rtl'] #decrement {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 0;
-}
-
 #system-dialog-link {
   -webkit-margin-start: 16px;
   margin-top: 10px;
   padding: 0;
 }
 
-/* PDF view */
-
-#print-preview #mainview {
-  -webkit-margin-start: 310px;
-  -webkit-padding-start: 0;
-  -webkit-user-select: none;
-  background-color: #ccc;
-  overflow: hidden;
-}
-
-#pdf-viewer {
-  /* pluginFadeInTransitionDuration = 200ms */
-  -webkit-transition: opacity 200ms linear;
-  /* pluginFadeInTransitionDelay = overlayFadeOutTransitionDuration = 100ms */
-  -webkit-transition-delay: 100ms;
-  height: 100%;
-  opacity: 1;
-  width: 100%;
-}
-
-#pdf-viewer.invisible {
-  /* pluginFadeOutTransitionDuration = 100ms */
-  -webkit-transition: opacity 100ms linear;
-  /* pluginFadeOutTransitionDelay = 250ms */
-  -webkit-transition-delay: 250ms;
-  opacity: 0;
-}
-
-#no-plugin {
-  padding: 20px;
-}
-
 /* TODO(estade): this should be in a shared location but I'm afraid of the
  * damage it could do. */
 [hidden] {
   display: none !important;
 }
 
-#overlay-layer {
-  -webkit-transition: opacity 200ms linear;
-  /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay +
-   *     pluginFadeOutTransitionDuration = 350ms */
-  -webkit-transition-delay: 350ms;
-  -webkit-user-select: none;
-  background: #ccc;
-  height: 100%;
-  margin: 0;
-  opacity: 1;
-  position: absolute;
-  width: 100%;
-}
-
-#overlay-layer.invisible {
-  /* overlayFadeOutTransitionDuration = 100ms */
-  -webkit-transition: opacity 100ms linear;
-  opacity: 0;
-  pointer-events: none;
-}
-
-#messages {
-  color: #404040;
-  font-size: 1.1em;
-  position: relative;
-  text-align: center;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-  top: 50%;
-}
-
 @-webkit-keyframes dancing-dots-jump {
   0% { top: 0; }
   55% { top: 0; }
@@ -375,28 +253,20 @@ html[dir='rtl'] #decrement {
   100% { top: 0; }
 }
 
-#loading {
-  -webkit-margin-end: -3px;
-}
-
-.message-with-dots span span {
+span.jumping-dots > span {
   -webkit-animation: dancing-dots-jump 1800ms infinite;
   padding: 1px;
   position: relative;
 }
 
-.message-with-dots span span:nth-child(2) {
+span.jumping-dots > span:nth-child(2) {
   -webkit-animation-delay: 100ms;
 }
 
-.message-with-dots span span:nth-child(3) {
+span.jumping-dots > span:nth-child(3) {
   -webkit-animation-delay: 300ms;
 }
 
-#error-action-area {
-  margin-top: 10px;
-}
-
 /* TODO(estade): unfork this code. */
 .button-strip {
 <if expr="not pp_ifdef('toolkit_views')">