Adding transitions when the print preview is loading.

1) When a preview is being rendered, the old print preview is faded out.
2) A "Loading preview ..." message is shown (with the dots dancing!).
3) The new preview is faded in once it becomes available.

Also in this CL, some unused css rules have been removed.


BUG=NONE
TEST=Open a very large document in the preview, make changes to the settings
and observe the transitions.


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

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

4 files changed, 66 insertions, 38 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 66a0dc7..9ac43d9 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5510,8 +5510,8 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_PRINT_PREVIEW_TITLE_FORMAT" desc="The format for the print preview page title.">
         Print Preview - <ph name="PREVIEW_TAB_TITLE">$1<ex>Google Search</ex></ph>
       </message>
-      <message name="IDS_PRINT_PREVIEW_LOADING" desc="Message to display while the print preview renders.">
-        Loading...
+      <message name="IDS_PRINT_PREVIEW_LOADING" desc="Message to display while the print preview is still loading.">
+        Loading preview
       </message>
       <if expr="pp_ifdef('_google_chrome')">
         <message name="IDS_PRINT_PREVIEW_NO_PLUGIN" desc="Message to display when the PDF viewer is missing.">
diff --git a/chrome/browser/resources/print_preview.css b/chrome/browser/resources/print_preview.css
index 71f7a47..50d1a72 100644
--- a/chrome/browser/resources/print_preview.css
+++ b/chrome/browser/resources/print_preview.css
@@ -33,24 +33,6 @@ a:active {
   text-shadow: 0 0 1px rgba(40, 60, 120, .5);
 }
 
-p {
-  margin: 20px 0;
-  padding: 0;
-}
-
-p:first-child {
-  margin-top: 0;
-}
-
-p:last-child {
-  margin-bottom: 0;
-}
-
-p.list {
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
 .options-block {
   -webkit-padding-start: 100px;
 }
@@ -87,12 +69,6 @@ body.loaded header {
   -webkit-transition: all .2s ease-out;
 }
 
-body:not(.loaded) footer {
-  height: 10px;
-  opacity: .5;
-  top: 30px;
-}
-
 header > h1 {
   -webkit-padding-start: 118px;
   color: #000;
@@ -118,17 +94,10 @@ input::-webkit-input-placeholder {
 
 .body {
   display: block;
-  margin-bottom: -49px;
   min-height: 100%;
 }
 
-.body::before {
-  content: '';
-  display: block;
-  height: 76px;
-}
-
-.body::after {
+.body::before, .body::after {
   content: '';
   display: block;
   height: 76px;
@@ -638,6 +607,7 @@ body > .scrollbar {
   -webkit-box-flex: 1;
   -webkit-padding-start: 10px;
   background-color: #ccc;
+  position: relative;
 }
 
 #pdf-viewer {
@@ -656,3 +626,56 @@ body > .scrollbar {
 .disabled-label-text {
   color: gray;
 }
+
+
+#dancing-dots {
+  -webkit-transition: opacity 0.5s linear;
+  background: -webkit-radial-gradient(#eaeaea, #b8b8b8);
+  height: 100%;
+  margin: 0;
+  opacity: 1;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+}
+
+#dancing-dots.invisible {
+  -webkit-transition: opacity 0.7s linear;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#dancing-dots-text {
+  color: #404040;
+  font-size: 15px;
+  left: 25%;
+  position: relative;
+  text-align: center;
+  text-shadow: 2px 4px 0 rgba(255, 255, 255, .7);
+  top: 50%;
+  width: 50%;
+}
+
+@-webkit-keyframes dancing-dots-jump {
+  0% { top: 0; }
+  35% { top: 0; }
+  60% { top: -10px; }
+  80% { top: 3px; }
+  90% { top: -2px; }
+  95% { top: 1px; }
+  100% { top: 0; }
+}
+
+#dancing-dots-text span span {
+  -webkit-animation-duration: 1800ms;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: dancing-dots-jump;
+  padding: 1px;
+  position: relative;
+}
+#dancing-dots-text span span:nth-child(2) {
+  -webkit-animation-delay: 100ms;
+}
+#dancing-dots-text span span:nth-child(3) {
+  -webkit-animation-delay: 300ms;
+}
diff --git a/chrome/browser/resources/print_preview.html b/chrome/browser/resources/print_preview.html
index 05b6b7d..71a3c93 100644
--- a/chrome/browser/resources/print_preview.html
+++ b/chrome/browser/resources/print_preview.html
@@ -128,9 +128,14 @@
     </div>
   </div>
   <div id="mainview">
-      <p id="loading" i18n-content="loading"></p>
       <p id="no-plugin" class="hidden" i18n-values=".innerHTML:noPlugin"></p>
       <p id="preview-failed" class="hidden" i18n-content="previewFailed"></p>
+      <div id="dancing-dots" class="invisible">
+        <div id="dancing-dots-text">
+          <span i18n-content="loading"></span>
+          <span><span>.</span><span>.</span><span>.</span></span>
+        </div>
+      </div>
   </div>
 </body>
 </html>
diff --git a/chrome/browser/resources/print_preview.js b/chrome/browser/resources/print_preview.js
index 73178d1..214792f 100644
--- a/chrome/browser/resources/print_preview.js
+++ b/chrome/browser/resources/print_preview.js
@@ -307,6 +307,7 @@ function printFile() {
  * Asks the browser to generate a preview PDF based on current print settings.
  */
 function requestPrintPreview() {
+  $('dancing-dots').classList.remove('invisible');
   chrome.send('getPreview', [getSettingsJSON()]);
 }
 
@@ -359,7 +360,6 @@ function setColor(color) {
  * Called from PrintPreviewMessageHandler::OnPrintPreviewFailed().
  */
 function printPreviewFailed() {
-  $('loading').classList.add('hidden');
   $('preview-failed').classList.remove('hidden');
 
   var pdfViewer = $('pdf-viewer');
@@ -375,6 +375,8 @@ function onPDFLoad() {
     $('pdf-viewer').fitToWidth();
   else
     $('pdf-viewer').fitToHeight();
+
+  $('dancing-dots').classList.add('invisible');
 }
 
 /**
@@ -428,8 +430,6 @@ function createPDFPlugin() {
     return;
   }
 
-  $('loading').classList.add('hidden');
-
   var pdfPlugin = document.createElement('embed');
   pdfPlugin.setAttribute('id', 'pdf-viewer');
   pdfPlugin.setAttribute('type', 'application/pdf');