Add a slide-in pane to the OOP PDF viewer.

This CL adds the groundwork for a slide-in pane to be used by the OOP PDF Viewer. It adheres to the principles of Material Design, and will be used as a base for the bookmarks pane (which will display a list of bookmarks) as well as an info pane to show metadata of the PDF.

BUG=110020

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

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

chrome/browser/resources/component_extension_resources.grd

@@ -171,6 +171,10 @@
         <include name="IDR_PDF_PDF_SCRIPTING_API_JS" file="pdf/pdf_scripting_api.js" type="BINDATA" />
         <include name="IDR_PDF_CONTENT_SCRIPT_JS" file="pdf/content_script.js" type="BINDATA" />
 
+        <include name="IDR_PDF_PDF_PANE_CSS" file="pdf/elements/pdf-pane/pdf-pane.css" type="BINDATA" />
+        <include name="IDR_PDF_PDF_PANE_HTML" file="pdf/elements/pdf-pane/pdf-pane.html" type="BINDATA" />
+        <include name="IDR_PDF_PDF_PANE_JS" file="pdf/elements/pdf-pane/pdf-pane.js" type="BINDATA" />
+
         <include name="IDR_PDF_VIEWER_BUTTON_CSS" file="pdf/elements/viewer-button/viewer-button.css" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BUTTON_HTML" file="pdf/elements/viewer-button/viewer-button.html" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_BUTTON_JS" file="pdf/elements/viewer-button/viewer-button.js" type="BINDATA" />

chrome/browser/resources/pdf/elements/pdf-pane/pdf-pane.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 /deep/ paper-dialog {
+  background-color: rgb(66, 66, 66);
+  color: rgb(250, 250, 250);
+  /* Since the pane slides in from the right, we want the scrollbar to be on
+   * the left. Setting direction to rtl achieves this.
+   */
+  direction: rtl;
+  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial;
+  height: calc(100% - 64px);
+  margin: 0;
+  right: 0;
+  top: 64px;
+  width: 22em;
+}
+
+#reset-content {
+  direction: ltr;
+}
+
+:host /deep/ #scroller > h1 {
+  direction: ltr;
+  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial;
+}
+
+hr {
+  background: rgb(66, 66, 66);
+  border: 0;
+  border-bottom: 1px dashed rgb(250, 250, 250);
+}

chrome/browser/resources/pdf/elements/pdf-pane/pdf-pane.html

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/paper-dialog/paper-dialog.html">
+
+<polymer-element name="pdf-pane" attributes="heading">
+<template>
+  <link rel="stylesheet" href="pdf-pane.css">
+  <!-- We set layered to false so that we can apply css in our file. -->
+  <paper-dialog id="dialog" heading="{{heading}}" transition="core-transition-right" class="scrolling pane" layered="false">
+    <hr>
+    <div id="reset-content">
+      <content></content>
+    </div>
+  </paper-dialog>
+</template>
+<script src="pdf-pane.js"></script>
+</polymer-element>

chrome/browser/resources/pdf/elements/pdf-pane/pdf-pane.js

+// 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.
+
+Polymer('pdf-pane', {
+    heading: '',
+
+    ready: function() {
+      // Prevent paper-dialog-base from scrolling back to top.
+      this.$.dialog.openAction = function() {};
+    },
+    toggle: function() {
+      this.$.dialog.toggle();
+    }
+});

ui/webui/resources/polymer_resources.grdp

@@ -96,6 +96,24 @@
   <structure name="IDR_POLYMER_CORE_META_CORE_META_HTML"
              file="../../../third_party/polymer/components-chromium/core-meta/core-meta.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_KEY_HELPER_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-key-helper-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_KEY_HELPER_HTML"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-key-helper.html"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_OVERLAY_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-overlay-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_OVERLAY_HTML"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-overlay.html"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_OVERLAY_LAYER_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-overlay-layer-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_OVERLAY_CORE_OVERLAY_LAYER_HTML"
+             file="../../../third_party/polymer/components-chromium/core-overlay/core-overlay-layer.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_CORE_RANGE_CORE_RANGE_EXTRACTED_JS"
              file="../../../third_party/polymer/components-chromium/core-range/core-range-extracted.js"
              type="chrome_html" />
@@ -135,12 +153,21 @@
   <structure name="IDR_POLYMER_CORE_TOOLBAR_CORE_TOOLBAR_HTML"
              file="../../../third_party/polymer/components-chromium/core-toolbar/core-toolbar.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_CSS_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/core-transition/core-transition-css-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_CSS_HTML"
+             file="../../../third_party/polymer/components-chromium/core-transition/core-transition-css.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_EXTRACTED_JS"
              file="../../../third_party/polymer/components-chromium/core-transition/core-transition-extracted.js"
              type="chrome_html" />
   <structure name="IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_HTML"
              file="../../../third_party/polymer/components-chromium/core-transition/core-transition.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_CORE_TRANSITION_CORE_TRANSITION_OVERLAY_CSS"
+             file="../../../third_party/polymer/components-chromium/core-transition/core-transition-overlay.css"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_BASE_EXTRACTED_JS"
              file="../../../third_party/polymer/components-chromium/paper-button/paper-button-base-extracted.js"
              type="chrome_html" />
@@ -153,6 +180,30 @@
   <structure name="IDR_POLYMER_PAPER_BUTTON_PAPER_BUTTON_HTML"
              file="../../../third_party/polymer/components-chromium/paper-button/paper-button.html"
              type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_ACTION_DIALOG_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-action-dialog-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_ACTION_DIALOG_HTML"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-action-dialog.html"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_BASE_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog-base-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_BASE_HTML"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog-base.html"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_HTML"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog.html"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_TRANSITION_CSS"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog-transition.css"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_TRANSITION_EXTRACTED_JS"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog-transition-extracted.js"
+             type="chrome_html" />
+  <structure name="IDR_POLYMER_PAPER_DIALOG_PAPER_DIALOG_TRANSITION_HTML"
+             file="../../../third_party/polymer/components-chromium/paper-dialog/paper-dialog-transition.html"
+             type="chrome_html" />
   <structure name="IDR_POLYMER_PAPER_ICON_BUTTON_PAPER_ICON_BUTTON_EXTRACTED_JS"
              file="../../../third_party/polymer/components-chromium/paper-icon-button/paper-icon-button-extracted.js"
              type="chrome_html" />