Hookup the page-indicator and progress-bar elements in the PDF extension.

Hookup the page-indicator and progress-bar elements in the PDF extension.

This hooks up the page-indicator (so that the correct page is displayed) and
the progress bar (so that the correct progress is displayed) in PDF.

BUG=303491
R=arv@chromium.org, koz@chromium.org

Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=252175

[koz (OOO until 15th September), 2014-02-10 22:38:02]

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
File chrome/browser/resources/pdf/index.html (right):

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.html:16: 
nit: extra newlines?

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.html:302: bottom: 26px;
Would it be better to not have the position of this intrinsic to the element
itself but rather to have the embedder determine the position?

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
File chrome/browser/resources/pdf/index.js (right):

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.js:483: progress: 0,
Add a comment indicating this is a value from 0 to 100.

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.js:491: var numVisible = this.progress *
this.segments.length / 100.0;
nit: Might be slightly clearer to have (this.progress / 100.0) *
this.segments.length

[raymes, 2014-02-10 23:58:36]

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
File chrome/browser/resources/pdf/index.html (right):

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.html:16: 
This file is generated from index.in.html

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.html:302: bottom: 26px;
These are the defaults in the polymer element (which would apply for PDF and
quickoffice). I think it's ok to keep sensible defaults inside the element and
then let the embedder override these if they want to customize them.

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
File chrome/browser/resources/pdf/index.js (right):

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.js:483: progress: 0,
This comes from inside of the polymer element.

https://codereview.chromium.org/138703009/diff/40001/chrome/browser/resources...
chrome/browser/resources/pdf/index.js:491: var numVisible = this.progress *
this.segments.length / 100.0;
It would be a bit clearer, but the floating point precision is less - not that
it actually matters here though I guess :P

[koz (OOO until 15th September), 2014-02-11 02:18:09]

lgtm

[raymes, 2014-02-11 02:26:59]

The CQ bit was checked by raymes@chromium.org

[commit-bot: I haz the power, 2014-02-11 02:28:31]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/raymes@chromium.org/138703009/210001

[commit-bot: I haz the power, 2014-02-11 02:28:40]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-02-11 02:28:41]

Failed to apply patch for chrome/browser/resources/pdf/index.html:
While running patch -p1 --forward --force --no-backup-if-mismatch;
  patching file chrome/browser/resources/pdf/index.html
  Hunk #3 FAILED at 423.
  1 out of 3 hunks FAILED -- saving rejects to file
chrome/browser/resources/pdf/index.html.rej

Patch:       chrome/browser/resources/pdf/index.html
Index: chrome/browser/resources/pdf/index.html
diff --git a/chrome/browser/resources/pdf/index.html
b/chrome/browser/resources/pdf/index.html
index
0979640041c0a4b7c803bdb19d2a3e0817099717..be4eba24d38e46e91f1331582a8f25de0d179ac7
100644
--- a/chrome/browser/resources/pdf/index.html
+++ b/chrome/browser/resources/pdf/index.html
@@ -12,6 +12,9 @@
   
   
   
+  
+  
+  
 <!--
  Copyright 2013 The Polymer Authors. All rights reserved.
  Use of this source code is governed by a BSD-style
@@ -244,12 +247,173 @@ license that can be found in the LICENSE file.
   </template>
   
 </polymer-element>
+
+<polymer-element name="viewer-page-indicator" attributes="text"
assetpath="html_office/elements/viewer-page-indicator/">
+<template>
+  <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+:host {
+  -webkit-transition: opacity 400ms ease-in-out;
+  position: fixed;
+  right: 0;
+}
+
+#text {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  color: white;
+  float: left;
+  font-family: sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 48px;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
+  width: 62px;
+}
+
+#triangle-right {
+  border-bottom: 6px solid transparent;
+  border-left: 8px solid rgba(0, 0, 0, 0.5);
+  border-top: 6px solid transparent;
+  display: inline;
+  float: left;
+  height: 0;
+  margin-top: 18px;
+  width: 0;
+}</style>
+  <div id="text">{{text}}</div>
+  <div id="triangle-right"></div>
+</template>
+
+</polymer-element>
+
+<polymer-element name="viewer-progress-bar" attributes="progress text
numSegments" assetpath="html_office/elements/viewer-progress-bar/">
+<template>
+  <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+:host {
+  -webkit-transition: opacity 400ms ease-in-out;
+  background: rgb(29, 39, 57);
+  border-radius: 5px;
+  bottom: 26px;
+  box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2);
+  height: auto;
+  left: 26px;
+  pointer-events: none;
+  position: fixed;
+  width: auto;
+}
+
+.scaler {
+  -webkit-transform: scale(0.25);
+  -webkit-transform-origin: 0 0;
+  float: left;
+  height: 44px;
+  margin: 8px;
+  width: 44px;
+}
+
+#segments {
+  border-radius: 50%;
+  height: 176px;
+  list-style: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 176px;
+}
+
+.segment {
+  -webkit-transform-origin: 0 100%;
+  background: rgb(227, 234, 249);
+  box-shadow: 0 0 0 6px rgb(29, 39, 57) inset;
+  height: 50%;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50%;
+}
+
+.center-circle {
+  background-color: rgb(29, 39, 57);
+  border-radius: 50%;
+  height: 80px;
+  left: 44px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 44px;
+  width: 80px;
+}
+
+#text {
+  color: rgb(227, 234, 249);
+  float: left;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 58px;
+  margin-right: 10px;
+  margin-top: 1px;
+}
+</style>
+  <div class="scaler">
+    <ul id="segments"></ul>
+    <div class="center-circle"></div>
+  </div>
+  <div id="text">{{text}}</div>
+</template>
+
+</polymer-element>
+
+<polymer-element name="viewer-error-screen" attributes="text"
assetpath="html_office/elements/viewer-error-screen/">
+<template>
+  <style>:host {
+  background-color: #ccc;
+  color: #555;
+  font-family: sans-serif;
+  font-size: 20px;
+  height: 100%;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+  pointer-events: none;
+}
+
+#load-failed-message {
+  line-height: 0;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}</style>
+  <div id="load-failed-message">{{text}}</div>
+</template>
+
+</polymer-element>
 <style>
     body {
       background-color: #ccc;
       margin: 0;
     }
     viewer-toolbar {
+      visibility: hidden;
+      z-index: 3;
+    }
+    viewer-page-indicator {
+      z-index: 3;
+    }
+    viewer-progress-bar {
+      z-index: 3;
+    }
+    viewer-error-screen {
+      visibility: hidden;
       z-index: 2;
     }
     object {
@@ -259,6 +423,11 @@ license that can be found in the LICENSE file.
 </head>
 <body>
 
+<viewer-error-screen id="error-screen" text="Failed to load PDF document">
+</viewer-error-screen>
+<viewer-page-indicator id="page-indicator"></viewer-page-indicator>
+<viewer-progress-bar id="progress-bar"></viewer-progress-bar>
+
 <viewer-toolbar id="toolbar">
   <polymer-selector>
     <viewer-button id="fit-to-page-button" src="button_fit_page.png"
latchable="true">

[raymes, 2014-02-18 23:42:37]

+arv for OWNERS 
Please ignore the generated index.js+index.html.

[raymes, 2014-02-19 00:13:01]

+arv for OWNERS 
Please ignore the generated index.js+index.html.

[arv (Not doing code reviews), 2014-02-19 02:05:09]

LGTM

[raymes, 2014-02-19 23:49:04]

The CQ bit was checked by raymes@chromium.org

[commit-bot: I haz the power, 2014-02-19 23:58:03]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/raymes@chromium.org/138703009/330001

[commit-bot: I haz the power, 2014-02-20 01:14:06]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/raymes@chromium.org/138703009/330001

[raymes, 2014-02-20 04:21:45]

Committed patchset #9 manually as r252175 (presubmit successful).