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

ui/file_manager/audio_player/elements/track_info_panel.css

 /* 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;

[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;
   overflow: hidden;
 }
 
 /* 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;
   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;
+/* 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. */
 .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 {
+: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);
 }
 
 /* Track data. */
 
 .track .data {
   display: flex;
   flex-direction: column;
@@ skipping 13 matching lines @@
 .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;
 }