PDF: Split elements shared between material and non-material PDF viewers

This is required to allow the material viewer to be updated to Polymer 0.8
without changing the non-material viewer.

BUG=482793
TBR=estade@chromium.org

Review URL: https://codereview.chromium.org/1128863006

Cr-Commit-Position: refs/heads/master@{#330498}

chrome/browser/resources/component_extension_resources.grd

@@ -187,6 +187,9 @@
         <include name="IDR_PDF_VIEWER_ERROR_SCREEN_CSS" file="pdf/elements/viewer-error-screen/viewer-error-screen.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_ERROR_SCREEN_HTML" file="pdf/elements/viewer-error-screen/viewer-error-screen.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_ERROR_SCREEN_JS" file="pdf/elements/viewer-error-screen/viewer-error-screen.js" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_ERROR_SCREEN_LEGACY_CSS" file="pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.css" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_ERROR_SCREEN_LEGACY_HTML" file="pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.html" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_ERROR_SCREEN_LEGACY_JS" file="pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PAGE_INDICATOR_CSS" file="pdf/elements/viewer-page-indicator/viewer-page-indicator.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PAGE_INDICATOR_HTML" file="pdf/elements/viewer-page-indicator/viewer-page-indicator.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PAGE_INDICATOR_JS" file="pdf/elements/viewer-page-indicator/viewer-page-indicator.js" type="BINDATA" />
@@ -196,6 +199,9 @@
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_CSS" file="pdf/elements/viewer-password-screen/viewer-password-screen.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_HTML" file="pdf/elements/viewer-password-screen/viewer-password-screen.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_JS" file="pdf/elements/viewer-password-screen/viewer-password-screen.js" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_LEGACY_CSS" file="pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.css" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_LEGACY_HTML" file="pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.html" type="BINDATA" />
+        <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_LEGACY_JS" file="pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.js" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_CSS" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_HTML" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_JS" file="pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js" type="BINDATA" />

chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.css

+/* Copyright 2015 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 {
+  background-color: #ccc;
+  color: #555;
+  font-family: sans-serif;
+  font-size: 20px;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+}
+
+#load-failed-message {
+  line-height: 0;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+}
\ No newline at end of file

chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+
+<!-- TODO(tsergeant): Remove once legacy PDF viewer is upgraded to Polymer
+  0.8. -->
+<polymer-element name="viewer-error-screen-legacy" attributes="text">
+<template>
+  <link rel="stylesheet" href="viewer-error-screen-legacy.css">
+  <div id="load-failed-message">{{text}}</div>
+</template>
+<script src="viewer-error-screen-legacy.js"></script>
+</polymer-element>

chrome/browser/resources/pdf/elements/viewer-error-screen-legacy/viewer-error-screen-legacy.js

+// Copyright 2014 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.
+
+Polymer('viewer-error-screen-legacy', {});

chrome/browser/resources/pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.css

+/* Copyright 2015 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-color: #ccc;
+  color: #555;
+  display: table;
+  font-family: sans-serif;
+  font-size: 15px;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+}
+
+#message {
+  padding-bottom: 10px;
+}
+
+.center {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.form {
+  border: 1px solid #777;
+  box-shadow: 1px 1px 1px;
+  display: inline-block;
+  padding: 10px;
+  width: 300px;
+}
+
+input {
+  color: #333;
+  pointer-events: all;
+}
\ No newline at end of file

chrome/browser/resources/pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+
+<!-- TODO(tsergeant): Remove once legacy PDF viewer is upgraded to Polymer
+  0.8. -->
+<polymer-element name="viewer-password-screen-legacy" attributes="text active">
+<template>
+  <link rel="stylesheet" href="viewer-password-screen-legacy.css">
+  <div class="center">
+    <form class="form">
+      <div id="message">{{text}}</div>
+      <input id="password" type="password" size="20"></input>
+      <input id="submit" type="submit" on-click={{submit}}></input>
+    </form>
+  </div>
+</template>
+<script src="viewer-password-screen-legacy.js"></script>
+</polymer-element>

chrome/browser/resources/pdf/elements/viewer-password-screen-legacy/viewer-password-screen-legacy.js

+// Copyright 2014 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.
+
+Polymer('viewer-password-screen-legacy', {
+  text: 'This document is password protected. Please enter a password.',
+  active: false,
+  timerId: undefined,
+  ready: function() {
+    this.activeChanged();
+  },
+  accept: function() {
+    this.active = false;
+  },
+  deny: function() {
+    this.$.password.disabled = false;
+    this.$.submit.disabled = false;
+    this.$.password.focus();
+    this.$.password.select();
+  },
+  submit: function(e) {
+    // Prevent the default form submission behavior.
+    e.preventDefault();
+    if (this.$.password.value.length == 0)
+      return;
+    this.$.password.disabled = true;
+    this.$.submit.disabled = true;
+    this.fire('password-submitted', {password: this.$.password.value});
+  },
+  activeChanged: function() {
+    clearTimeout(this.timerId);
+    this.timerId = undefined;
+    if (this.active) {
+      this.style.visibility = 'visible';
+      this.style.opacity = 1;
+      this.$.password.focus();
+    } else {
+      this.style.opacity = 0;
+      this.timerId = setTimeout(function() {
+        this.style.visibility = 'hidden';
+      }.bind(this), 400);
+    }
+  }
+});

chrome/browser/resources/pdf/index.css

@@ -23,12 +23,12 @@ viewer-progress-bar {
   z-index: 3;
 }
 
-viewer-error-screen {
+viewer-error-screen-legacy {
   visibility: hidden;
   z-index: 2;
 }
 
-viewer-password-screen {
+viewer-password-screen-legacy {
   visibility: hidden;
   z-index: 2;
 }

chrome/browser/resources/pdf/index.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="utf-8">
   <link rel="import" href="elements/viewer-button/viewer-button.html">
-  <link rel="import" href="elements/viewer-error-screen/viewer-error-screen.html">
+  <link rel="import" href="elements/viewer-error-screen-legacy/viewer-error-screen-legacy.html">
   <link rel="import" href="elements/viewer-page-indicator/viewer-page-indicator.html">
-  <link rel="import" href="elements/viewer-password-screen/viewer-password-screen.html">
+  <link rel="import" href="elements/viewer-password-screen-legacy/viewer-password-screen-legacy.html">
   <link rel="import" href="elements/viewer-progress-bar/viewer-progress-bar.html">
   <link rel="import" href="elements/viewer-toolbar/viewer-toolbar.html">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
@@ -14,7 +14,8 @@
 <body>
 
 <div id="sizer"></div>
-<viewer-password-screen id="password-screen"></viewer-password-screen>
+<viewer-password-screen-legacy id="password-screen">
+</viewer-password-screen-legacy>
 <viewer-page-indicator id="page-indicator"></viewer-page-indicator>
 <viewer-progress-bar id="progress-bar"></viewer-progress-bar>
 
@@ -45,7 +46,7 @@
   </viewer-button>
 </viewer-toolbar>
 
-<viewer-error-screen id="error-screen"></viewer-error-screen>
+<viewer-error-screen-legacy id="error-screen"></viewer-error-screen-legacy>
 
 </body>
 <script src="viewport.js"></script>

chrome/test/data/pdf/basic_test.js

@@ -12,8 +12,8 @@ var tests = [
       'viewer-toolbar',
       'viewer-page-indicator',
       'viewer-progress-bar',
-      'viewer-password-screen',
-      'viewer-error-screen'
+      'viewer-password-screen-legacy',
+      'viewer-error-screen-legacy'
     ];
     for (var i = 0; i < elementNames.length; i++) {
       var elements = document.querySelectorAll(elementNames[i]);