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

ui/file_manager/audio_player/elements/volume_controller.html

Index: ui/file_manager/audio_player/elements/volume_controller.html
diff --git a/ui/file_manager/audio_player/elements/volume_controller.html b/ui/file_manager/audio_player/elements/volume_controller.html
new file mode 100644
index 0000000000000000000000000000000000000000..db64ec6865ca2c95d3b9505bbd269e9d8ec3de7d
--- /dev/null
+++ b/ui/file_manager/audio_player/elements/volume_controller.html
@@ -0,0 +1,23 @@
+<!--
+  -- 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">
+
+<polymer-element name="volume-controller" attributes="width height value">
+  <template>
+    <link rel="stylesheet" href="volume_controller.css">
+
+    <div id="background"></div>
+    <input name="rawValueInput" id="rawValueInput" touch-action="manipulation"
+           type="range" min="0" max="100" value="{{rawValue}}">
+    <div id="bar">
+      <div class="filled" style="height: {{rawValue}}%;"></div>
+      <div class="cap left"></div>
+      <div class="cap right"></div>
+    </div>
+  </template>
+  <script src="volume_controller.js"></script>
+</polymer-element>