AudioPlayer.app: Use HTML Imports to define custom elements.

ui/file_manager/audio_player/elements/control_panel.html

Index: ui/file_manager/audio_player/elements/control_panel.html
diff --git a/ui/file_manager/audio_player/elements/control_panel.html b/ui/file_manager/audio_player/elements/control_panel.html
new file mode 100644
index 0000000000000000000000000000000000000000..e8fd56ad4da6dc989d4b51656780f28719da70b1
--- /dev/null
+++ b/ui/file_manager/audio_player/elements/control_panel.html
@@ -0,0 +1,113 @@
+<!--
+  -- 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.
+  -->
+
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="volume_controller.html">
+
+<polymer-element name="control-panel">
+  <template>
+    <link rel="stylesheet" href="control_panel.css">
+
+    <div class="controls">
+      <div class="upper-controls time-controls">
+        <div class="time media-control">
+          <div class="current">{{timeString_}}</div>
+        </div>
+        <div class="progress media-control custom-slider">
+          <input name="timeInput" type="range" touch-action="manipulation"
+                 min="0" max="{{duration}}" value="{{time}}">
+          <div class="bar">
+            <div class="filled" style="width: {{time/duration*100}}%;"></div>
+            <div class="cap left"></div>
+            <div class="cap right"></div>
+          </div>
+        </div>
+        <div class="time media-control">
+          <div class="duration">{{durationString_}}</div>
+        </div>
+      </div>
+      <div class="lower-controls audio-controls">
+        <!-- Shuffle toggle button in the bottom line. -->
+        <button class="shuffle-mode media-button toggle" state="default">
+          <label>
+            <input id="shuffleCheckbox"
+                   type="checkbox"
+                   checked="{{model.shuffle}}">
+            <span class="icon"></span>
+          </label>
+        </button>
+
+        <!-- Repeat toggle button in the bottom line. -->
+        <button class="repeat media-button toggle" state="default">
+          <label>
+            <input id="repeatCheckbox"
+                   type="checkbox"
+                   checked="{{model.repeat}}">
+            <span class="icon"></span>
+          </label>
+        </button>
+
+        <!-- Prev button in the bottom line. -->
+        <button class="previous media-button"
+               state="default"
+               on-click="{{previousClick}}">
+          <div class="normal default"></div>
+          <div class="disabled"></div>
+        </button>
+
+        <!-- Play button in the bottom line. -->
+        <button class="play media-control media-button"
+                state='{{playing ? "playing" : "ended"}}'
+                on-click="{{playClick}}">
+          <div class="normal playing"></div>
+          <div class="normal ended"></div>
+          <div class="disabled"></div>
+        </button>
+
+        <!-- Next button in the bottom line. -->
+        <button class="next media-button"
+                state="default"
+                on-click="{{nextClick}}">
+          <div class="normal default"></div>
+          <div class="disabled"></div>
+        </button>
+
+        <div id="volumeContainer"
+             class="default-hidden"
+             anchor-point="bottom center">
+          <volume-controller id="volumeSlider"
+                             width="32" height="85" value="50">
+          </volume-controller>
+
+          <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
+        </div>
+
+        <!-- Volume button in the bottom line. -->
+        <button id="volumeButton"
+                class="volume media-button toggle"
+                state="default"
+                on-click="{{volumeButtonClick}}"
+                anchor-point="bottom center">
+          <label>
+            <input type="checkbox" checked="{{volumeSliderShown}}">
+            <span class="icon"></span>
+          </label>
+        </button>
+
+        <!-- Playlist button in the bottom line. -->
+        <button id="playlistButton"
+                class="playlist media-button toggle"
+                state="default">
+          <label>
+            <input type="checkbox" checked="{{model.expanded}}">
+            <span class="icon"></span>
+          </label>
+        </button>
+      </div>
+    </div>
+  </template>
+  <script src="control_panel.js"></script>
+</polymer-element>