Create "artwork" panel.

I would like to implement new audio player ui ver 1.1 by small steps.

First, we create "artwork" panel.
This panel shows artwork image, title and artist.

TEST=manually
BUG=578022

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

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

18 files changed, 282 insertions, 71 deletions

diff --git a/ui/file_manager/audio_player/assets/100/player_cover_close.png b/ui/file_manager/audio_player/assets/100/player_cover_close.png
new file mode 100644
index 0000000..57af8d0
--- /dev/null
+++ b/ui/file_manager/audio_player/assets/100/player_cover_close.png
diff --git a/ui/file_manager/audio_player/assets/100/player_cover_open.png b/ui/file_manager/audio_player/assets/100/player_cover_open.png
new file mode 100644
index 0000000..b8b7960
--- /dev/null
+++ b/ui/file_manager/audio_player/assets/100/player_cover_open.png
diff --git a/ui/file_manager/audio_player/assets/200/player_cover_close.png b/ui/file_manager/audio_player/assets/200/player_cover_close.png
new file mode 100644
index 0000000..1a5d138
--- /dev/null
+++ b/ui/file_manager/audio_player/assets/200/player_cover_close.png
diff --git a/ui/file_manager/audio_player/assets/200/player_cover_open.png b/ui/file_manager/audio_player/assets/200/player_cover_open.png
new file mode 100644
index 0000000..a2034f4
--- /dev/null
+++ b/ui/file_manager/audio_player/assets/200/player_cover_open.png
diff --git a/ui/file_manager/audio_player/css/audio_player.css b/ui/file_manager/audio_player/css/audio_player.css
index 2ba0d15..faa4a02 100644
--- a/ui/file_manager/audio_player/css/audio_player.css
+++ b/ui/file_manager/audio_player/css/audio_player.css
@@ -28,6 +28,7 @@ div.audio-player {
   cursor: default;
   flex: 1 1 auto;
   font-size: 10pt;
+  height: 100%;
   position: relative;
 }
 
diff --git a/ui/file_manager/audio_player/elements/audio_player.css b/ui/file_manager/audio_player/elements/audio_player.css
index 614c701..921f9cc 100644
--- a/ui/file_manager/audio_player/elements/audio_player.css
+++ b/ui/file_manager/audio_player/elements/audio_player.css
@@ -2,17 +2,26 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+}
+
+track-info-panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
 track-list {
-  bottom: 96px;  /* Room for the control bar. */
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 control-panel {
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
+  height: 96px;
+  flex-shrink: 0;
 }
diff --git a/ui/file_manager/audio_player/elements/audio_player.html b/ui/file_manager/audio_player/elements/audio_player.html
index 60598da..da58040 100644
--- a/ui/file_manager/audio_player/elements/audio_player.html
+++ b/ui/file_manager/audio_player/elements/audio_player.html
@@ -5,14 +5,17 @@
   -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="track_info_panel.html">
 <link rel="import" href="track_list.html">
 <link rel="import" href="control_panel.html">
 
 <dom-module id="audio-player">
   <link rel="import" type="css" href="audio_player.css">
   <template>
+    <track-info-panel id="trackInfo"
+        expanded="{{trackInfoExpanded}}"></track-info-panel>
     <track-list id="trackList"
-        expanded$="[[expanded]]"
+        expanded$="[[playlistExpanded]]"
         shuffle="[[shuffle]]"
         current-track-index="{{currentTrackIndex}}"
         on-replay="onReplayCurrentTrack"
@@ -24,7 +27,7 @@
         shuffle="{{shuffle}}"
         repeat="{{repeat}}"
         volume="{{volume}}"
-        expanded="{{expanded}}"
+        playlist-expanded="{{playlistExpanded}}"
         aria-labels="[[ariaLabels]]"
         on-next-clicked="onControllerNextClicked"
         on-previous-clicked="onControllerPreviousClicked"></control-panel>
diff --git a/ui/file_manager/audio_player/elements/audio_player.js b/ui/file_manager/audio_player/elements/audio_player.js
index 7e3dfd4..6800dd0 100644
--- a/ui/file_manager/audio_player/elements/audio_player.js
+++ b/ui/file_manager/audio_player/elements/audio_player.js
@@ -49,9 +49,16 @@ Polymer({
     },
 
     /**
-     * Whether the expanded button is ON.
+     * Whether the playlist is expanded or not.
      */
-    expanded: {
+    playlistExpanded: {
+      type: Boolean,
+      notify: true
+    },
+    /**
+     * Whether the artwork is expanded or not.
+     */
+    trackInfoExpanded: {
       type: Boolean,
       notify: true
     },
@@ -128,6 +135,9 @@ Polymer({
 
     if (oldValue != newValue) {
       var currentTrack = this.$.trackList.getCurrentTrack();
+      if(currentTrack && currentTrack != this.$.trackInfo.track){
+        this.$.trackInfo.track = currentTrack;
+      }
       if (currentTrack && currentTrack.url != this.$.audio.src) {
         this.$.audio.src = currentTrack.url;
         currentTrackUrl = this.$.audio.src;
@@ -361,6 +371,18 @@ Polymer({
         this.tracks[index].title);
     this.$.trackList.notifyPath('tracks.' + index + '.artist',
         this.tracks[index].artist);
+
+    if (this.$.trackInfo.track &&
+        this.$.trackInfo.track.url === this.tracks[index].url){
+      this.$.trackInfo.notifyPath('track.title', this.tracks[index].title);
+      this.$.trackInfo.notifyPath('track.artist', this.tracks[index].artist);
+      var artworkUrl = this.tracks[index].artworkUrl;
+      if (!artworkUrl || artworkUrl !== '')
+        this.$.trackInfo.notifyPath('track.artworkUrl',
+            this.tracks[index].artworkUrl);
+      else
+        this.$.trackInfo.notifyPath('track.artworkUrl', undefined);
+    }
   },
 
   /**
diff --git a/ui/file_manager/audio_player/elements/control_panel.html b/ui/file_manager/audio_player/elements/control_panel.html
index 67e4b6e..245518a7 100644
--- a/ui/file_manager/audio_player/elements/control_panel.html
+++ b/ui/file_manager/audio_player/elements/control_panel.html
@@ -53,7 +53,7 @@
         <files-icon-button toggles
             id="playList"
             class="playlist media-button toggle"
-            active="{{expanded}}">
+            active="{{playlistExpanded}}">
         </files-icon-button>
       </div>
       <div class="lower-controls time-volume-controls">
diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index 790c41a..98c4374 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -97,9 +97,9 @@
       },
 
       /**
-       * Whether the expanded button is ON.
+       * Whether the playlist is expanded or not.
        */
-      expanded: {
+      playlistExpanded: {
         type: Boolean,
         value: false,
         notify: true
diff --git a/ui/file_manager/audio_player/elements/track_info_panel.css b/ui/file_manager/audio_player/elements/track_info_panel.css
new file mode 100644
index 0000000..181acf0
--- /dev/null
+++ b/ui/file_manager/audio_player/elements/track_info_panel.css
@@ -0,0 +1,110 @@
+/* Copyright 2016 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 {
+  align-items: center;
+  background: rgb(245, 245, 245);
+  color: rgb(51, 51, 51);
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  font-size: 10pt;
+  justify-content: space-around;
+  overflow: hidden;
+}
+
+/* Track item. */
+.track {
+  align-items: center;
+  display: flex;
+  height: 48px;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Track icon. */
+.track .icon-wrapper {
+  flex: none;
+  height: 48px;
+  width: 48px;
+}
+
+.icon-wrapper .icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 48px;
+  pointer-events: none;
+  position: absolute;
+  width: 48px;
+}
+
+.icon-wrapper .icon-background {
+  background: -webkit-image-set(
+      url(../assets/100/playlist_now_playing.png) 1x,
+      url(../assets/200/playlist_now_playing.png) 2x)
+      center
+      no-repeat;
+  height: 48px;
+  pointer-events: none;
+  position: absolute;
+  width: 48px;
+}
+
+/* expand icon. */
+.track .expand {
+  background-position: center;
+  background-repeat: no-repeat;
+  flex: none;
+  height: 48px;
+  width: 48px;
+}
+
+:host(:not([available])) > .track .expand {
+  background-image: -webkit-image-set(
+      url(../assets/100/player_cover_open.png) 1x,
+      url(../assets/200/player_cover_open.png) 2x);
+  opacity: 0.1;
+}
+
+:host([available]:not([expanded])) > .track .expand {
+  background-image: -webkit-image-set(
+      url(../assets/100/player_cover_open.png) 1x,
+      url(../assets/200/player_cover_open.png) 2x);
+}
+
+:host([available][expanded]) > .track .expand {
+  background-image: -webkit-image-set(
+      url(../assets/100/player_cover_close.png) 1x,
+      url(../assets/200/player_cover_close.png) 2x);
+}
+
+/* Track data. */
+
+.track .data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  min-width: 0;
+}
+
+.track .data .data-title,
+.track .data .data-artist {
+  flex: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.track .data .data-title {
+  color: rgb(51, 51, 51);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.track .data .data-artist {
+  color: rgb(100, 100, 100);
+  font-size: 12px;
+}
diff --git a/ui/file_manager/audio_player/elements/track_info_panel.html b/ui/file_manager/audio_player/elements/track_info_panel.html
new file mode 100644
index 0000000..00128a3
--- /dev/null
+++ b/ui/file_manager/audio_player/elements/track_info_panel.html
@@ -0,0 +1,32 @@
+<!--
+  -- Copyright 2016 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/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
+<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.html">
+
+<dom-module id="track-info-panel">
+  <link rel="import" type="css" href="track_info_panel.css">
+  <template>
+    <div class="track">
+      <div class="icon-wrapper">
+        <div class="icon-background"></div>
+        <div class="icon" style="background-image: url([[track.artworkUrl]]);"></div>
+      </div>
+      <div class="data">
+        <div class="data-title">[[track.title]]</div>
+        <div class="data-artist">[[track.artist]]</div>
+      </div>
+      <files-icon-button
+          id="expand"
+          class="expand"
+          on-click="expandClick">
+      </files-icon-button>
+    </div>
+  </template>
+</dom-module>
+
+<script src="track_info_panel.js"></script>
diff --git a/ui/file_manager/audio_player/elements/track_info_panel.js b/ui/file_manager/audio_player/elements/track_info_panel.js
new file mode 100644
index 0000000..ed9041bf
--- /dev/null
+++ b/ui/file_manager/audio_player/elements/track_info_panel.js
@@ -0,0 +1,24 @@
+// Copyright 2016 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.
+
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'track-info-panel',
+
+    properties: {
+      track: {
+        type: Object,
+        value: null
+      },
+
+      expanded: {
+        type: Boolean,
+        value: false,
+        notify: true
+      }
+    },
+  });
+})();  // Anonymous closure
diff --git a/ui/file_manager/audio_player/elements/track_list.css b/ui/file_manager/audio_player/elements/track_list.css
index efd5339..68fdc23 100644
--- a/ui/file_manager/audio_player/elements/track_list.css
+++ b/ui/file_manager/audio_player/elements/track_list.css
@@ -27,10 +27,6 @@
   width: 100%;
 }
 
-:host(:not([expanded])) > .track:not([active]) {
-  display: none;
-}
-
 :host([expanded]) > .track:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
diff --git a/ui/file_manager/audio_player/elements/track_list.js b/ui/file_manager/audio_player/elements/track_list.js
index 4407a8e..936b376 100644
--- a/ui/file_manager/audio_player/elements/track_list.js
+++ b/ui/file_manager/audio_player/elements/track_list.js
@@ -7,7 +7,7 @@
  *   url: string,
  *   title: string,
  *   artist: string,
- *   artwork: Object,
+ *   artworkUrl: string,
  *   active: boolean
  * }}
  */
@@ -48,15 +48,16 @@ var TrackInfo;
         type: Boolean,
         value: false,
         observer: 'shuffleChanged'
-      }
-    },
+      },
 
-    /**
-     * Initializes an element. This method is called automatically when the
-     * element is ready.
-     */
-    ready: function() {
-      window.addEventListener('resize', this.onWindowResize_.bind(this));
+      /**
+       * Whether playlist is expanded or not.
+       */
+      expanded: {
+        type: Boolean,
+        value: false,
+        observer: 'expandedChanged'
+      }
     },
 
     /**
@@ -66,6 +67,15 @@ var TrackInfo;
     playOrder: [],
 
     /**
+     * Invoked when 'expanded' property is changed.
+     * @param {boolean} newValue New value.
+     * @param {boolean} oldValue Old value.
+     */
+    expandedChanged: function(newValue, oldValue) {
+      this.ensureTrackInViewport_(this.currentTrackIndex);
+    },
+
+    /**
      * Invoked when 'shuffle' property is changed.
      * @param {boolean} newValue New value.
      * @param {boolean} oldValue Old value.
@@ -140,14 +150,6 @@ var TrackInfo;
     },
 
     /**
-     * Invoked when the window is resized.
-     * @private
-     */
-    onWindowResize_: function() {
-      this.ensureTrackInViewport_(this.currentTrackIndex);
-    },
-
-    /**
      * Scrolls the track list to ensure the given track in the viewport.
      * @param {number} trackIndex The index of the track to be in the viewport.
      * @private
@@ -157,18 +159,18 @@ var TrackInfo;
       if (trackElement) {
         var viewTop = this.scrollTop;
         var viewHeight = this.clientHeight;
-        var elementTop = trackElement.offsetTop;
+        var elementTop = trackElement.offsetTop - this.offsetTop;
         var elementHeight = trackElement.offsetHeight;
 
-        if (elementTop < viewTop) {
+        if (elementTop <= viewTop) {
           // Adjust the tops.
           this.scrollTop = elementTop;
-        } else if (elementTop + elementHeight <= viewTop + viewHeight) {
-          // The entire element is in the viewport. Do nothing.
-        } else {
+        } else if (elementTop + elementHeight >= viewTop + viewHeight) {
           // Adjust the bottoms.
           this.scrollTop = Math.max(0,
                                     (elementTop + elementHeight - viewHeight));
+        } else {
+          // The entire element is in the viewport. Do nothing.
         }
       }
     },
diff --git a/ui/file_manager/audio_player/js/audio_player.js b/ui/file_manager/audio_player/js/audio_player.js
index 4787498..7af7ce3 100644
--- a/ui/file_manager/audio_player/js/audio_player.js
+++ b/ui/file_manager/audio_player/js/audio_player.js
@@ -25,13 +25,14 @@ function AudioPlayer(container) {
 
   /**
    * Whether if the playlist is expanded or not. This value is changed by
-   * this.syncExpanded().
+   * this.syncPlaylistExpanded().
    * True: expanded, false: collapsed, null: unset.
    *
    * @type {?boolean}
    * @private
    */
-  this.isExpanded_ = null;  // Initial value is null. It'll be set in load().
+  // Initial value is null. It'll be set in load().
+  this.isPlaylistExpanded_ = null;
 
   this.player_ =
     /** @type {AudioPlayerElement} */ (document.querySelector('audio-player'));
@@ -40,13 +41,14 @@ function AudioPlayer(container) {
   // Restore the saved state from local storage, and update the local storage
   // if the states are changed.
   var STORAGE_PREFIX = 'audioplayer-';
-  var KEYS_TO_SAVE_STATES = ['shuffle', 'repeat', 'volume', 'expanded'];
+  var KEYS_TO_SAVE_STATES =
+      ['shuffle', 'repeat', 'volume', 'playlist-expanded'];
   var storageKeys = KEYS_TO_SAVE_STATES.map(a => STORAGE_PREFIX + a);
   chrome.storage.local.get(storageKeys, function(results) {
     // Update the UI by loaded state.
     for (var storageKey in results) {
       var key = storageKey.substr(STORAGE_PREFIX.length);
-      this.player_[key] = results[storageKey];
+      this.player_[Polymer.CaseMap.dashToCamelCase(key)] = results[storageKey];
     }
     // Start listening to UI changes to write back the states to local storage.
     for (var i = 0; i < KEYS_TO_SAVE_STATES.length; i++) {
@@ -61,8 +63,8 @@ function AudioPlayer(container) {
   }.bind(this));
 
   // Update the window size when UI's 'expanded' state is changed.
-  this.player_.addEventListener('expanded-changed', function(event) {
-    this.onExpandedChanged_(event.detail.value);
+  this.player_.addEventListener('playlist-expanded-changed', function(event) {
+    this.onPlaylistExpandedChanged_(event.detail.value);
   }.bind(this));
 
   // Run asynchronously after an event of model change is delivered.
@@ -145,7 +147,7 @@ AudioPlayer.prototype.load = function(playlist) {
       JSON.parse(JSON.stringify(playlist)));  // cloning
   util.saveAppState();
 
-  this.isExpanded_ = this.player_.expanded;
+  this.isPlaylistExpanded_ = this.player_.playlistExpanded;
 
   // Resolving entries has to be done after the volume manager is initialized.
   this.volumeManager_.ensureInitialized(function() {
@@ -275,7 +277,8 @@ AudioPlayer.prototype.select_ = function(newTrack) {
  */
 AudioPlayer.prototype.fetchMetadata_ = function(entry, callback) {
   this.metadataModel_.get(
-      [entry], ['mediaTitle', 'mediaArtist', 'present']).then(
+      [entry],
+      ['mediaTitle', 'mediaArtist', 'present', 'contentThumbnailUrl']).then(
       function(generation, metadata) {
         // Do nothing if another load happened since the metadata request.
         if (this.playlistGeneration_ == generation)
@@ -309,14 +312,14 @@ AudioPlayer.prototype.onError_ = function() {
  * @private
  */
 AudioPlayer.prototype.onResize_ = function(event) {
-  if (!this.isExpanded_ &&
-      window.innerHeight >= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
-    this.isExpanded_ = true;
-    this.player_.expanded = true;
-  } else if (this.isExpanded_ &&
-             window.innerHeight < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
-    this.isExpanded_ = false;
-    this.player_.expanded = false;
+  if (!this.isPlaylistExpanded_ &&
+      window.innerHeight > AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+    this.isPlaylistExpanded_ = true;
+    this.player_.playlistExpanded = true;
+  } else if (this.isPlaylistExpanded_ &&
+             window.innerHeight <= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+    this.isPlaylistExpanded_ = false;
+    this.player_.playlistExpanded = false;
   }
 };
 
@@ -372,6 +375,13 @@ AudioPlayer.TOP_PADDING_HEIGHT = 4;
 AudioPlayer.TRACK_HEIGHT = 48;
 
 /**
+ * artwork panel height in pixels, when it's closed.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.CLOSED_ARTWORK_HEIGHT = 48;
+
+/**
  * Controls bar height in pixels.
  * @type {number}
  * @const
@@ -391,7 +401,7 @@ AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
  * @const
  */
 AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT +
-                                       AudioPlayer.TRACK_HEIGHT * 2 +
+                                       AudioPlayer.CLOSED_ARTWORK_HEIGHT +
                                        AudioPlayer.CONTROLS_HEIGHT;
 
 /**
@@ -399,20 +409,20 @@ AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT +
  * @param {boolean} newValue New value.
  * @private
  */
-AudioPlayer.prototype.onExpandedChanged_ = function(newValue) {
-  if (this.isExpanded_ !== null &&
-      this.isExpanded_ === newValue)
+AudioPlayer.prototype.onPlaylistExpandedChanged_ = function(newValue) {
+  if (this.isPlaylistExpanded_ !== null &&
+      this.isPlaylistExpanded_ === newValue)
     return;
 
-  if (this.isExpanded_ && !newValue)
+  if (this.isPlaylistExpanded_ && !newValue)
     this.lastExpandedInnerHeight_ = window.innerHeight;
 
-  if (this.isExpanded_ !== newValue) {
-    this.isExpanded_ = newValue;
+  if (this.isPlaylistExpanded_ !== newValue) {
+    this.isPlaylistExpanded_ = newValue;
     this.syncHeight_();
 
     // Saves new state.
-    window.appState.expanded = newValue;
+    window.appState.playlistExpanded = newValue;
     util.saveAppState();
   }
 };
@@ -423,7 +433,7 @@ AudioPlayer.prototype.onExpandedChanged_ = function(newValue) {
 AudioPlayer.prototype.syncHeight_ = function() {
   var targetInnerHeight;
 
-  if (this.player_.expanded) {
+  if (this.player_.playlistExpanded) {
     // Expanded.
     if (!this.lastExpandedInnerHeight_ ||
         this.lastExpandedInnerHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
@@ -458,8 +468,7 @@ AudioPlayer.TrackInfo = function(entry) {
   this.title = this.getDefaultTitle();
   this.artist = this.getDefaultArtist();
 
-  // TODO(yoshiki): implement artwork.
-  this.artwork = null;
+  this.artworkUrl = "";
   this.active = false;
 };
 
@@ -493,9 +502,9 @@ AudioPlayer.TrackInfo.prototype.getDefaultArtist = function() {
 AudioPlayer.TrackInfo.prototype.setMetadata = function(
     metadata, error) {
   // TODO(yoshiki): Handle error in better way.
-  // TODO(yoshiki): implement artwork (metadata.thumbnail)
   this.title = metadata.mediaTitle || this.getDefaultTitle();
   this.artist = error || metadata.mediaArtist || this.getDefaultArtist();
+  this.artworkUrl = metadata.contentThumbnailUrl || "";
 };
 
 // Starts loading the audio player.
diff --git a/ui/file_manager/audio_player/js/compiled_resources.gyp b/ui/file_manager/audio_player/js/compiled_resources.gyp
index 9fd6e65..fc90f0b 100644
--- a/ui/file_manager/audio_player/js/compiled_resources.gyp
+++ b/ui/file_manager/audio_player/js/compiled_resources.gyp
@@ -88,6 +88,7 @@
           '../../file_manager/background/js/volume_manager.js',
           '../../file_manager/foreground/js/volume_manager_wrapper.js',
           '../elements/control_panel.js',
+          '../elements/track_info_panel.js',
           '../elements/track_list.js',
           '../elements/audio_player.js',
         ],
@@ -109,4 +110,3 @@
     }
   ],
 }
-
diff --git a/ui/file_manager/file_manager_resources.grd b/ui/file_manager/file_manager_resources.grd
index 8826ebc..b4cd2ba 100644
--- a/ui/file_manager/file_manager_resources.grd
+++ b/ui/file_manager/file_manager_resources.grd
@@ -167,6 +167,9 @@
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_CONTROL_PANEL_CSS" file="audio_player/elements/control_panel.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_CONTROL_PANEL_HTML" file="audio_player/elements/control_panel.html" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_CONTROL_PANEL_JS" file="audio_player/elements/control_panel.js" type="BINDATA" />
+      <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_INFO_PANEL_CSS" file="audio_player/elements/track_info_panel.css" flattenhtml="true" type="BINDATA" />
+      <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_INFO_PANEL_HTML" file="audio_player/elements/track_info_panel.html" type="BINDATA" />
+      <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_INFO_PANEL_JS" file="audio_player/elements/track_info_panel.js" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_LIST_CSS" file="audio_player/elements/track_list.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_LIST_HTML" file="audio_player/elements/track_list.html" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_TRACK_LIST_JS" file="audio_player/elements/track_list.js" type="BINDATA" />