Audio Player: Polymer 3 JS module for the remaining Audio elements

Elements: <track-info-panel>, <track-list>, <control-panel> and
<audio-player>.

Move the <link> tag inside the <template> because this is enforced by
polymer_modulizer() this requires changing from rel="import" to normal
rel="stylesheet" which in turn requires to changed the URL to request
the CSS.

Fix all closure errors.

Bug: 1133186
Change-Id: I633ef710307afa8b1237a188a7b4d8932cbc0cdb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2526004Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825690}

ui/file_manager/audio_player/elements/BUILD.gn

@@ -30,6 +30,32 @@ js_library("audio_player") {
   ]
 }
 
+polymer_modulizer("audio_player") {
+  js_file = "audio_player.js"
+  html_file = "audio_player.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+
+  auto_imports = [
+    "ui/file_manager/audio_player/elements/control_panel.html|AriaLabels",
+    "ui/file_manager/audio_player/elements/track_list.html|TrackInfo",
+    "third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-control-state.html|IronControlState",
+  ]
+}
+
+js_library("audio_player.m") {
+  sources = [
+    "$root_gen_dir/ui/file_manager/audio_player/elements/audio_player.m.js",
+  ]
+  deps = [
+    ":control_panel.m",
+    ":track_info_panel.m",
+    ":track_list.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":audio_player_module" ]
+}
+
 js_library("control_panel") {
   deps = [
     ":repeat_button",
@@ -38,6 +64,31 @@ js_library("control_panel") {
   ]
 }
 
+polymer_modulizer("control_panel") {
+  js_file = "control_panel.js"
+  html_file = "control_panel.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+
+  auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
+}
+
+js_library("control_panel.m") {
+  sources = [
+    "$root_gen_dir/ui/file_manager/audio_player/elements/control_panel.m.js",
+  ]
+  deps = [
+    ":repeat_button.m",
+    "//third_party/polymer/v3_0/components-chromium/font-roboto:roboto",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_slider:cr_slider.m",
+    "//ui/webui/resources/js:assert.m",
+
+    #TODO: Add dependency on //ui/file_manager/file_manager/elements/files_icon_button when it has Polymer3.
+  ]
+  extra_deps = [ ":control_panel_module" ]
+}
+
 js_library("repeat_button") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/iron-behaviors:iron-button-state-extracted",
@@ -48,9 +99,46 @@ js_library("repeat_button") {
 js_library("track_info_panel") {
 }
 
+polymer_modulizer("track_info_panel") {
+  js_file = "track_info_panel.js"
+  html_file = "track_info_panel.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+}
+
+js_library("track_info_panel.m") {
+  sources = [
+    "$root_gen_dir/ui/file_manager/audio_player/elements/track_info_panel.m.js",
+  ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/font-roboto:roboto",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+  ]
+  extra_deps = [ ":track_info_panel_module" ]
+}
+
 js_library("track_list") {
 }
 
+polymer_modulizer("track_list") {
+  js_file = "track_list.js"
+  html_file = "track_list.html"
+  html_type = "dom-module"
+  preserve_url_scheme = true
+}
+
+js_library("track_list.m") {
+  sources =
+      [ "$root_gen_dir/ui/file_manager/audio_player/elements/track_list.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/font-roboto:roboto",
+    "//third_party/polymer/v3_0/components-chromium/paper-ripple:paper-ripple",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":track_list_module" ]
+}
+
 polymer_modulizer("repeat_button") {
   js_file = "repeat_button.js"
   html_file = "repeat_button.html"
@@ -76,11 +164,19 @@ js_library("repeat_button.m") {
     "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-button-state",
     "//third_party/polymer/v3_0/components-chromium/iron-behaviors:iron-control-state",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+
+    #TODO: Add dependency on //ui/file_manager/file_manager/elements/files_toggle_ripple when it has Polymer3.
   ]
   extra_deps = [ ":repeat_button_module" ]
 }
 
 js_type_check("closure_compile_jsmodules") {
   is_polymer3 = true
-  deps = [ ":repeat_button.m" ]
+  deps = [
+    ":audio_player.m",
+    ":control_panel.m",
+    ":repeat_button.m",
+    ":track_info_panel.m",
+    ":track_list.m",
+  ]
 }

ui/file_manager/audio_player/elements/audio_player.html

@@ -10,8 +10,8 @@
 <link rel="import" href="control_panel.html">
 
 <dom-module id="audio-player">
-  <link rel="import" type="css" href="audio_player.css">
   <template>
+    <link rel="stylesheet" href="elements/audio_player.css">
     <track-info-panel id="trackInfo" expanded="{{trackInfoExpanded}}"
         aria-expand-artwork-label="[[ariaExpandArtworkLabel]]">
     </track-info-panel>
@@ -36,6 +36,5 @@
     <audio id="audio"
         volume="[[computeAudioVolume_(volume)]]"></audio>
   </template>
-
   <script src="audio_player.js"></script>
 </dom-module>

ui/file_manager/audio_player/elements/audio_player.js

@@ -422,10 +422,11 @@ Polymer({
 
   /**
    * Invoked when dragging state of seek bar on control panel is changed.
-   * During the user is dragging it, audio playback is paused temporalily.
-   * @param {!CustomEvent<{value: boolean}>} e
+   * During the user is dragging it, audio playback is paused temporarily.
+   * @param {!Event} e
    */
   onSeekingChanged_: function(e) {
+    e = /** @type {!CustomEvent<{value: boolean}>} */ (e);
     if (e.detail.value && this.playing) {
       this.$.audio.pause();
       this.wasPlayingOnDragStart_ = true;

ui/file_manager/audio_player/elements/control_panel.html

@@ -6,13 +6,14 @@
 
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.html">
 <link rel="import" href="repeat_button.html">
 
 <dom-module id="control-panel">
-  <link rel="import" type="css" href="control_panel.css">
   <template>
+    <link rel="stylesheet" href="elements/control_panel.css">
     <div class="controls">
       <div class="upper-controls audio-controls">
         <!-- Shuffle toggle button in the bottom line. -->
@@ -75,6 +76,5 @@
       </div>
     </div>
   </template>
-
   <script src="control_panel.js"></script>
 </dom-module>

ui/file_manager/audio_player/elements/track_info_panel.html

@@ -9,8 +9,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
 
 <dom-module id="track-info-panel">
-  <link rel="import" type="css" href="track_info_panel.css">
   <template>
+    <link rel="stylesheet" href="elements/track_info_panel.css">
     <div class="track-wrapper">
       <div class="icon-unavailable-expanded"></div>
       <div class="icon-expanded" style="background-image: url([[track.artworkUrl]]);"></div>
@@ -28,7 +28,6 @@
       </div>
     </div>
   </template>
-
   <script src="track_info_panel.js"></script>
 </dom-module>
 

ui/file_manager/audio_player/elements/track_info_panel.js

@@ -3,42 +3,42 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
-
-  Polymer({
-    is: 'track-info-panel',
-
-    properties: {
-      track: {
-        type: Object,
-        value: null,
-      },
-
-      expanded: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        reflectToAttribute: true,
-        observer: 'onExpandedChanged_',
-      },
-
-      artworkAvailable: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      ariaExpandArtworkLabel: String,
+/* #ignore */ 'use strict';
+
+Polymer({
+  is: 'track-info-panel',
+
+  properties: {
+    track: {
+      type: Object,
+      value: null,
     },
 
-    /** @private */
-    onExpandClick_: function() {
-      this.expanded = !this.expanded;
+    expanded: {
+      type: Boolean,
+      value: false,
+      notify: true,
+      reflectToAttribute: true,
+      observer: 'onExpandedChanged_',
     },
 
-    /** @private */
-    onExpandedChanged_: function() {
-      this.$.expand.setAttribute('aria-expanded', Boolean(this.expanded));
+    artworkAvailable: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
     },
-  });
+
+    ariaExpandArtworkLabel: String,
+  },
+
+  /** @private */
+  onExpandClick_: function() {
+    this.expanded = !this.expanded;
+  },
+
+  /** @private */
+  onExpandedChanged_: function() {
+    this.$.expand.setAttribute('aria-expanded', Boolean(this.expanded));
+  },
+});
 })();  // Anonymous closure

ui/file_manager/audio_player/elements/track_list.html

@@ -9,8 +9,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 
 <dom-module id="track-list">
-  <link rel="import" type="css" href="track_list.css">
   <template>
+    <link rel="stylesheet" href="elements/track_list.css">
     <template is="dom-repeat" id="tracks" items="[[tracks]]">
       <div class="track" active$="[[item.active]]" index$="[[index]]" on-click="trackClicked">
         <div class="icon"></div>
@@ -22,6 +22,5 @@
       </div>
     </template>
   </template>
-
   <script src="track_list.js"></script>
 </dom-module>