Implement "expand/collapse artwork" button in audio player.

ui/file_manager/audio_player/elements/track_info_panel.css

Index: ui/file_manager/audio_player/elements/track_info_panel.css
diff --git a/ui/file_manager/audio_player/elements/track_info_panel.css b/ui/file_manager/audio_player/elements/track_info_panel.css
index 181acf0009c3ea2f7d11ddf47acf0a1b0d73f067..c091c3c812f4437f779c09e2883bfdb8fc35c4b5 100644
--- a/ui/file_manager/audio_player/elements/track_info_panel.css
+++ b/ui/file_manager/audio_player/elements/track_info_panel.css
@@ -7,7 +7,6 @@
   background: rgb(245, 245, 245);
   color: rgb(51, 51, 51);
   cursor: default;
-  display: flex;

[fukino, 2016/02/02 06:24:20]

I think this shouldn't be removed. If it is block, flex-direction and
justify-content can be applied for flex containers.

[ryoh, 2016/02/02 08:15:49]

We no longer use flex. Just a block.
I removed flex-direction and justfy-content. Thanks.

   flex-direction: column;
   font-size: 10pt;
   justify-content: space-around;
@@ -17,20 +16,30 @@
 /* Track item. */
 .track {
   align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
   display: flex;
   height: 48px;
   justify-content: space-between;
   width: 100%;
 }
 
-/* Track icon. */
+:host[expanded] .track {
+  bottom: 0px;
+  position: absolute;
+}
+
+/* artwork icon(expanded) */
 .track .icon-wrapper {
   flex: none;
   height: 48px;
   width: 48px;
 }
 
-.icon-wrapper .icon {
+:host[expanded] .icon {
+  visibility: hidden;
+}
+
+:host(:not([expanded])) .icon {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -40,16 +49,43 @@
   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;
+/* artwork icon(expanded) */
+
+.track-wrapper {
+  background-color: rgb(32, 32, 34);
+  position: relative;
+}
+
+:host:not([artwork-available])[expanded] .track-wrapper {
+  height: 320px;
+  position: relative;
+  width: 320px;

[fukino, 2016/02/02 06:24:20]

The width of audio player is not necessarily 320px. You can change the width.
Could you take care of a case when the width is expanded?

[ryoh, 2016/02/02 08:15:49]

Done.

+}
+
+.icon-expanded {
+  background-size: 0 0;
+}
+
+:host:not([expanded]) .icon-unavailable-expanded {
+  background-size: 0 0;
+}
+
+:host:not([artwork-available])[expanded] .icon-unavailable-expanded {
+  background-image: -webkit-image-set(
+      url(../assets/100/player_no_artwork.png) 1x,

[fukino, 2016/02/02 06:24:20]

As player_no_artwork.png is big, could you reduce the size using
https://code.google.com/p/chromium/codesearch#chromium/src/tools/resources/op...
?

[ryoh, 2016/02/02 08:15:49]

Done.

+      url(../assets/200/player_no_artwork.png) 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: calc(320px - 48px);
+  width: 320px;
+}
+
+:host[artwork-available][expanded] .icon-expanded {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 320px;
+  width: 320px;
 }
 
 /* expand icon. */
@@ -61,20 +97,13 @@
   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 {
+:host: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 {
+:host[expanded] .track .expand {
   background-image: -webkit-image-set(
       url(../assets/100/player_cover_close.png) 1x,
       url(../assets/200/player_cover_close.png) 2x);