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/control_panel.js

@@ -17,12 +17,12 @@
  *   volumeSlider: string,
  * }}
  */
-let AriaLabels;
+/* #export */ let AriaLabels;
 
 (function() {
-  'use strict';
+/* #ignore */ 'use strict';
 
-  Polymer({
+Polymer({
   is: 'control-panel',
 
   properties: {
@@ -64,7 +64,7 @@ let AriaLabels;
     },
 
     /**
-       * What mode the repeat button idicates.
+     * What mode the repeat button indicates.
      * repeat-modes can be "no-repeat", "repeat-all", "repeat-one".
      */
     repeatMode: {
@@ -220,8 +220,8 @@ let AriaLabels;
    */
   playingChanged_: function(playing) {
     if (this.ariaLabels) {
-        this.$.play.setAttribute('aria-label',
-            playing ? this.ariaLabels.pause : this.ariaLabels.play);
+      this.$.play.setAttribute(
+          'aria-label', playing ? this.ariaLabels.pause : this.ariaLabels.play);
     }
   },
 
@@ -236,7 +236,8 @@ let AriaLabels;
     }
 
     if (this.ariaLabels) {
-        this.$.volumeButton.setAttribute('aria-label',
+      this.$.volumeButton.setAttribute(
+          'aria-label',
           volume !== 0 ? this.ariaLabels.mute : this.ariaLabels.unmute);
     }
   },
@@ -261,14 +262,14 @@ let AriaLabels;
     this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle);
     this.$.repeat.setAttribute('aria-label', ariaLabels.repeat);
     this.$.previous.setAttribute('aria-label', ariaLabels.previous);
-      this.$.play.setAttribute('aria-label',
-          this.playing ? ariaLabels.pause : ariaLabels.play);
+    this.$.play.setAttribute(
+        'aria-label', this.playing ? ariaLabels.pause : ariaLabels.play);
     this.$.next.setAttribute('aria-label', ariaLabels.next);
     this.$.playList.setAttribute('aria-label', ariaLabels.playList);
     this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider);
-      this.$.volumeButton.setAttribute('aria-label',
-          this.volume !== 0 ? ariaLabels.mute : ariaLabels.unmute);
+    this.$.volumeButton.setAttribute(
+        'aria-label', this.volume !== 0 ? ariaLabels.mute : ariaLabels.unmute);
     this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
   },
-  });
+});
 })();  // Anonymous closure

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,9 +3,9 @@
 // found in the LICENSE file.
 
 (function() {
-  'use strict';
+/* #ignore */ 'use strict';
 
-  Polymer({
+Polymer({
   is: 'track-info-panel',
 
   properties: {
@@ -40,5 +40,5 @@
   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>

ui/file_manager/audio_player/elements/track_list.js

@@ -11,12 +11,12 @@
  *   active: boolean
  * }}
  */
-let TrackInfo;
+/* #export */ let TrackInfo;
 
 (function() {
-  'use strict';
+/* #ignore */ 'use strict';
 
-  Polymer({
+Polymer({
   is: 'track-list',
 
   properties: {
@@ -171,8 +171,7 @@ let TrackInfo;
         this.scrollTop = elementTop;
       } else if (elementTop + elementHeight >= viewTop + viewHeight) {
         // Adjust the bottoms.
-          this.scrollTop = Math.max(0,
-                                    (elementTop + elementHeight - viewHeight));
+        this.scrollTop = Math.max(0, (elementTop + elementHeight - viewHeight));
       } else {
         // The entire element is in the viewport. Do nothing.
       }
@@ -184,7 +183,8 @@ let TrackInfo;
    * @param {boolean} keepCurrentTrack Keep the current track or not.
    */
   generatePlayOrder: function(keepCurrentTrack) {
-      console.assert((keepCurrentTrack !== undefined),
+    console.assert(
+        (keepCurrentTrack !== undefined),
         'The argument "forward" is undefined');
 
     if (this.tracks.length === 0) {
@@ -212,8 +212,7 @@ let TrackInfo;
 
       if (keepCurrentTrack) {
         // Puts the current track at the beginning of the play order.
-          this.playOrder = this.playOrder
-              .filter(function(value) {
+        this.playOrder = this.playOrder.filter(function(value) {
           return this.currentTrackIndex !== value;
         }, this);
         this.playOrder.splice(0, 0, this.currentTrackIndex);
@@ -297,5 +296,5 @@ let TrackInfo;
 
     return newTrackIndex;
   },
-  });
+});
 })();  // Anonymous closure