Audio Player: Inline CSS files for Polymer elements

Visually checked both:
 --enable-features=AudioPlayerJsModules
 --disable-features=AudioPlayerJsModules

Bug: 1133186, 1151829
Change-Id: I00fe977cd3e7c73e53e2f297bb5c6c84fe85359b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2552330
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835068}

ui/file_manager/BUILD.gn

@@ -219,10 +219,14 @@ generate_grd("build_grd") {
     "audio_player/js/metadata_worker.m.rollup.js|audio_player/js/metadata_worker.m.js",
   ]
 
-  grdp_files = [ "$target_gen_dir/file_manager/static_resources.grdp" ]
+  grdp_files = [
+    "$target_gen_dir/audio_player/static_resources.grdp",
+    "$target_gen_dir/file_manager/static_resources.grdp",
+  ]
 
   deps = [
     "file_manager:build_static_grdp",
+    "audio_player:build_static_grdp",
     "//ui/file_manager/audio_player/js:build",
     "//ui/file_manager/audio_player/js:build_background",
     "//ui/file_manager/audio_player/js:build_worker",

ui/file_manager/audio_player/BUILD.gn

+# Copyright 2020 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.
+
+import("//ui/webui/resources/tools/generate_grd.gni")
+
+generated_static_grdp = "$target_gen_dir/static_resources.grdp"
+
+generate_grd("build_static_grdp") {
+  out_grd = generated_static_grdp
+  grd_prefix = "audio_player"
+
+  resource_path_prefix = "audio_player"
+
+  input_files_base_dir = rebase_path(".", "//")
+
+  input_files = [
+    # Images:
+    "assets/100/player_button_next.png",
+    "assets/100/player_button_pause.png",
+    "assets/100/player_button_playlist.png",
+    "assets/100/player_button_play.png",
+    "assets/100/player_button_previous.png",
+    "assets/100/player_button_repeat_one.png",
+    "assets/100/player_button_repeat.png",
+    "assets/100/player_button_shuffle.png",
+    "assets/100/player_button_volume_muted.png",
+    "assets/100/player_button_volume.png",
+    "assets/100/player_cover_close.png",
+    "assets/100/player_cover_open.png",
+    "assets/100/player_no_artwork.png",
+    "assets/100/playlist_now_playing.png",
+    "assets/100/playlist_play.png",
+    "assets/200/player_button_next.png",
+    "assets/200/player_button_pause.png",
+    "assets/200/player_button_playlist.png",
+    "assets/200/player_button_play.png",
+    "assets/200/player_button_previous.png",
+    "assets/200/player_button_repeat_one.png",
+    "assets/200/player_button_repeat.png",
+    "assets/200/player_button_shuffle.png",
+    "assets/200/player_button_volume_muted.png",
+    "assets/200/player_button_volume.png",
+    "assets/200/player_cover_close.png",
+    "assets/200/player_cover_open.png",
+    "assets/200/player_no_artwork.png",
+    "assets/200/playlist_now_playing.png",
+    "assets/200/playlist_play.png",
+  ]
+}

ui/file_manager/audio_player/elements/audio_player.css

-/* Copyright 2014 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 {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-}
-
-track-info-panel {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-track-list {
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-control-panel {
-  height: 96px;
-  flex-shrink: 0;
-}

ui/file_manager/audio_player/elements/audio_player.html

@@ -11,7 +11,31 @@
 
 <dom-module id="audio-player">
   <template>
-    <link rel="stylesheet" href="elements/audio_player.css">
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: space-between;
+      }
+
+      track-info-panel {
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
+
+      track-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow-x: hidden;
+        overflow-y: scroll;
+      }
+
+      control-panel {
+        height: 96px;
+        flex-shrink: 0;
+      }
+    </style>
     <track-info-panel id="trackInfo" expanded="{{trackInfoExpanded}}"
         aria-expand-artwork-label="[[ariaExpandArtworkLabel]]">
     </track-info-panel>

ui/file_manager/audio_player/elements/control_panel.css

-/* Copyright 2014 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. */
-
-/* Controls bar. */
-.controls {
-  align-items: center;
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  height: 96px;
-  justify-content: center;
-  padding: 0;
-}
-
-.controls .upper-controls,
-.controls .lower-controls {
-  box-sizing: border-box;
-  height: 48px;
-  padding: 8px;
-  width: 100%;
-}
-
-.audio-controls {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  padding: 0;
-}
-
-/* Customized scrollbar for the playlist. */
-
-.media-button {
-  background-color: transparent;
-  border: 0;
-  flex: none;
-  height: 32px;
-  outline: none;  /* TODO(yoshiki): Show outline only on keyboard focus. */
-  padding: 0;
-  position: relative;
-  width: 32px;
-}
-
-.media-button > div,
-.media-button.toggle > label > span {
-  background-position: center;
-  background-repeat: no-repeat;
-  display: inline-block;
-  height: 100%;
-  pointer-events: none;
-  transition: opacity 100ms linear;
-  width: 100%;
-}
-
-.media-button > div {
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-}
-
-/* Time and volume controls. */
-
-.time-volume-controls {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  justify-content: center;
-}
-
-.time-volume-controls > .time-container {
-  color: rgb(51, 51, 51);
-  cursor: default;
-  flex: none;
-  font-size: 12px;
-  padding: 8px;
-  position: relative;
-}
-
-.time-container > .time {
-  position: absolute;
-  right: 8px; /* Should be same as time-container's right padding. */
-  top: 8px; /* Should be same as time-container's top padding. */
-}
-
-.time-container > .time-spacer {
-  opacity: 0; /* This class is intended to be used as invisible spacer. */
-}
-
-.time-volume-controls > cr-slider {
-  --cr-slider-active-color: rgb(66, 133, 244);
-  --cr-slider-knob-color-rgb: 64, 138, 241;
-}
-
-cr-slider {
-  cursor: pointer;
-}
-
-#timeSlider {
-  flex: 3 1 auto;
-  width: 118px;
-}
-
-#volumeSlider {
-  flex: 1 1 auto;
-  width: 82px;
-}
-
-/* Media controls in order of appearance. */
-
-.audio-controls {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  justify-content: center;
-}
-
-/* Play/pause button. */
-
-.media-button.toggle input {
-  position: absolute;
-  visibility: hidden;
-}
-
-.media-button.shuffle-mode {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_shuffle.png) 1x,
-      url(../assets/200/player_button_shuffle.png) 2x);
-  pointer-events: auto;
-}
-
-.media-button.repeat-mode {
-  margin-left: 8px;
-  margin-right: 0;
-}
-
-.media-button.play {
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-.media-button.play {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_play.png) 1x,
-      url(../assets/200/player_button_play.png) 2x);
-}
-
-:host([playing]) .media-button.play {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_pause.png) 1x,
-      url(../assets/200/player_button_pause.png) 2x);
-}
-
-.media-button.previous {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_previous.png) 1x,
-      url(../assets/200/player_button_previous.png) 2x);
-  margin-left: 8px;
-  margin-right: 0;
-}
-
-.media-button.next {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_next.png) 1x,
-      url(../assets/200/player_button_next.png) 2x);
-  margin-left: 0;
-  margin-right: 8px;
-}
-
-.media-button.playlist {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_playlist.png) 1x,
-      url(../assets/200/player_button_playlist.png) 2x);
-  pointer-events: auto;
-}
-
-.media-button.volume {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_volume.png) 1x,
-      url(../assets/200/player_button_volume.png) 2x);
-  pointer-events: auto;
-}
-
-:host([volume='0']) .media-button.volume {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_volume_muted.png) 1x,
-      url(../assets/200/player_button_volume_muted.png) 2x);
-}
-
-/* Invisible div used to compute the width required for the elapsed time. */
-.time-controls > .time > .current {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  justify-content: flex-end;
-  position: absolute;
-  top: -1px;
-}

ui/file_manager/audio_player/elements/control_panel.html

@@ -13,7 +13,206 @@
 
 <dom-module id="control-panel">
   <template>
-    <link rel="stylesheet" href="elements/control_panel.css">
+    <style>
+      /* Controls bar. */
+      .controls {
+        align-items: center;
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        height: 96px;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .controls .upper-controls,
+      .controls .lower-controls {
+        box-sizing: border-box;
+        height: 48px;
+        padding: 8px;
+        width: 100%;
+      }
+
+      .audio-controls {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        padding: 0;
+      }
+
+      /* Customized scrollbar for the playlist. */
+
+      .media-button {
+        background-color: transparent;
+        border: 0;
+        flex: none;
+        height: 32px;
+        outline: none;  /* TODO(yoshiki): Show outline only on keyboard focus. */
+        padding: 0;
+        position: relative;
+        width: 32px;
+      }
+
+      .media-button > div,
+      .media-button.toggle > label > span {
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        height: 100%;
+        pointer-events: none;
+        transition: opacity 100ms linear;
+        width: 100%;
+      }
+
+      .media-button > div {
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+      }
+
+      /* Time and volume controls. */
+
+      .time-volume-controls {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        justify-content: center;
+      }
+
+      .time-volume-controls > .time-container {
+        color: rgb(51, 51, 51);
+        cursor: default;
+        flex: none;
+        font-size: 12px;
+        padding: 8px;
+        position: relative;
+      }
+
+      .time-container > .time {
+        position: absolute;
+        right: 8px; /* Should be same as time-container's right padding. */
+        top: 8px; /* Should be same as time-container's top padding. */
+      }
+
+      .time-container > .time-spacer {
+        opacity: 0; /* This class is intended to be used as invisible spacer. */
+      }
+
+      .time-volume-controls > cr-slider {
+        --cr-slider-active-color: rgb(66, 133, 244);
+        --cr-slider-knob-color-rgb: 64, 138, 241;
+      }
+
+      cr-slider {
+        cursor: pointer;
+      }
+
+      #timeSlider {
+        flex: 3 1 auto;
+        width: 118px;
+      }
+
+      #volumeSlider {
+        flex: 1 1 auto;
+        width: 82px;
+      }
+
+      /* Media controls in order of appearance. */
+
+      .audio-controls {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        justify-content: center;
+      }
+
+      /* Play/pause button. */
+
+      .media-button.toggle input {
+        position: absolute;
+        visibility: hidden;
+      }
+
+      .media-button.shuffle-mode {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_shuffle.png) 1x,
+            url(../assets/200/player_button_shuffle.png) 2x);
+        pointer-events: auto;
+      }
+
+      .media-button.repeat-mode {
+        margin-left: 8px;
+        margin-right: 0;
+      }
+
+      .media-button.play {
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+
+      .media-button.play {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_play.png) 1x,
+            url(../assets/200/player_button_play.png) 2x);
+      }
+
+      :host([playing]) .media-button.play {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_pause.png) 1x,
+            url(../assets/200/player_button_pause.png) 2x);
+      }
+
+      .media-button.previous {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_previous.png) 1x,
+            url(../assets/200/player_button_previous.png) 2x);
+        margin-left: 8px;
+        margin-right: 0;
+      }
+
+      .media-button.next {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_next.png) 1x,
+            url(../assets/200/player_button_next.png) 2x);
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .media-button.playlist {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_playlist.png) 1x,
+            url(../assets/200/player_button_playlist.png) 2x);
+        pointer-events: auto;
+      }
+
+      .media-button.volume {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_volume.png) 1x,
+            url(../assets/200/player_button_volume.png) 2x);
+        pointer-events: auto;
+      }
+
+      :host([volume='0']) .media-button.volume {
+        background-image: -webkit-image-set(
+            url(../assets/100/player_button_volume_muted.png) 1x,
+            url(../assets/200/player_button_volume_muted.png) 2x);
+      }
+
+      /* Invisible div used to compute the width required for the elapsed time. */
+      .time-controls > .time > .current {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        justify-content: flex-end;
+        position: absolute;
+        top: -1px;
+      }
+    </style>
     <div class="controls">
       <div class="upper-controls audio-controls">
         <!-- Shuffle toggle button in the bottom line. -->

ui/file_manager/audio_player/elements/repeat_button.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 {
-  border-radius: 2px;
-  cursor: pointer;
-  display: inline-block;
-  height: 32px;
-  outline: none;
-  position: relative;
-  width: 32px;
-}
-
-.repeat-all, .no-repeat {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_repeat.png) 1x,
-      url(../assets/200/player_button_repeat.png) 2x);
-}
-
-.repeat-one {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_repeat_one.png) 1x,
-      url(../assets/200/player_button_repeat_one.png) 2x);
-}
-
-files-toggle-ripple {
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 28px;
-  left: 2px;
-  pointer-events: none;
-  position: absolute;
-  top: 2px;
-  width: 28px;
-}
-
-:host(.keyboard-focus) {
-  /* We use box-shadow rather than outline to make it rounded. */
-  box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
-}

ui/file_manager/audio_player/elements/repeat_button.html

@@ -10,7 +10,45 @@
 
 <dom-module id="repeat-button">
   <template>
-    <link rel="stylesheet" href="elements/repeat_button.css">
+  <style>
+    :host {
+      border-radius: 2px;
+      cursor: pointer;
+      display: inline-block;
+      height: 32px;
+      outline: none;
+      position: relative;
+      width: 32px;
+    }
+
+    .repeat-all, .no-repeat {
+      background-image: -webkit-image-set(
+          url(../assets/100/player_button_repeat.png) 1x,
+          url(../assets/200/player_button_repeat.png) 2x);
+    }
+
+    .repeat-one {
+      background-image: -webkit-image-set(
+          url(../assets/100/player_button_repeat_one.png) 1x,
+          url(../assets/200/player_button_repeat_one.png) 2x);
+    }
+
+    files-toggle-ripple {
+      background-position: center;
+      background-repeat: no-repeat;
+      height: 28px;
+      left: 2px;
+      pointer-events: none;
+      position: absolute;
+      top: 2px;
+      width: 28px;
+    }
+
+    :host(.keyboard-focus) {
+      /* We use box-shadow rather than outline to make it rounded. */
+      box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
+    }
+  </style>
     <files-toggle-ripple activated="[[isActive(repeatMode)]]" class$="{{repeatMode}}"></files-toggle-ripple>
   </template>
   <script src="repeat_button.js"></script>

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;
-  font-size: 10pt;
-  overflow: hidden;
-}
-
-/* Track item. */
-.track {
-  align-items: center;
-  background-color: rgba(255, 255, 255, 1.0);
-  display: flex;
-  height: 48px;
-  justify-content: space-between;
-  width: 100%;
-}
-
-:host([expanded]) .track {
-  background-color: rgba(255, 255, 255, 0.9);
-  bottom: 0;
-  position: absolute;
-}
-
-/* artwork icon(expanded) */
-.track .icon-wrapper {
-  flex: none;
-  height: 48px;
-  width: 48px;
-}
-
-: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;
-}
-
-/* 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: 100%;
-}
-
-.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,
-      url(../assets/200/player_no_artwork.png) 2x);
-  background-position: center;
-  background-repeat: no-repeat;
-  height: calc(320px - 48px);
-  margin-left: auto;
-  margin-right: auto;
-  width: 320px;
-}
-
-:host([artwork-available][expanded]) .icon-expanded {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 320px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 320px;
-}
-
-/* expand icon. */
-.track .expand {
-  --ink-color: rgb(51, 51, 51);
-  background-color: transparent;
-  background-position: center;
-  background-repeat: no-repeat;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  flex: none;
-  height: 48px;
-  width: 48px;
-}
-
-:host-context(.focus-outline-visible) .track .expand:focus {
-  background-color: rgba(153, 153, 153, .2);
-}
-
-: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([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-align: center;
-  text-overflow: ellipsis;
-  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;
-}

ui/file_manager/audio_player/elements/track_info_panel.html

@@ -10,7 +10,155 @@
 
 <dom-module id="track-info-panel">
   <template>
-    <link rel="stylesheet" href="elements/track_info_panel.css">
+    <style>
+      :host {
+        align-items: center;
+        background: rgb(245, 245, 245);
+        color: rgb(51, 51, 51);
+        cursor: default;
+        font-size: 10pt;
+        overflow: hidden;
+      }
+
+      /* Track item. */
+      .track {
+        align-items: center;
+        background-color: rgba(255, 255, 255, 1.0);
+        display: flex;
+        height: 48px;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      :host([expanded]) .track {
+        background-color: rgba(255, 255, 255, 0.9);
+        bottom: 0;
+        position: absolute;
+      }
+
+      /* artwork icon(expanded) */
+      .track .icon-wrapper {
+        flex: none;
+        height: 48px;
+        width: 48px;
+      }
+
+      :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;
+      }
+
+      /* 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: 100%;
+      }
+
+      .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,
+            url(../assets/200/player_no_artwork.png) 2x);
+        background-position: center;
+        background-repeat: no-repeat;
+        height: calc(320px - 48px);
+        margin-left: auto;
+        margin-right: auto;
+        width: 320px;
+      }
+
+      :host([artwork-available][expanded]) .icon-expanded {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 320px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 320px;
+      }
+
+      /* expand icon. */
+      .track .expand {
+        --ink-color: rgb(51, 51, 51);
+        background-color: transparent;
+        background-position: center;
+        background-repeat: no-repeat;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        flex: none;
+        height: 48px;
+        width: 48px;
+      }
+
+      :host-context(.focus-outline-visible) .track .expand:focus {
+        background-color: rgba(153, 153, 153, .2);
+      }
+
+      :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([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-align: center;
+        text-overflow: ellipsis;
+        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;
+      }
+      </style>
     <div class="track-wrapper">
       <div class="icon-unavailable-expanded"></div>
       <div class="icon-expanded" style="background-image: url([[track.artworkUrl]]);"></div>

ui/file_manager/audio_player/elements/track_list.css

-/* Copyright 2014 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: flex-start;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-/* Track item. */
-.track {
-  align-items: center;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-  height: 48px;
-  justify-content: flex-start;
-  position: relative;
-  width: 100%;
-}
-
-:host([expanded]) > .track:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
-
-/* Track icon. */
-.track .icon {
-  background-position: center;
-  background-repeat: no-repeat;
-  flex: none;
-  height: 32px;
-  margin: 8px;
-  pointer-events: none;
-  width: 32px;
-}
-
-.track:hover .icon {
-  background-image: -webkit-image-set(
-      url(../assets/100/playlist_play.png) 1x,
-      url(../assets/200/playlist_play.png) 2x);
-  pointer-events: auto;
-}
-
-.track[active] .icon {
-  background-image: -webkit-image-set(
-      url(../assets/100/playlist_now_playing.png) 1x,
-      url(../assets/200/playlist_now_playing.png) 2x);
-}
-
-/* Track data. */
-
-.track .data {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 0;
-  margin-right: 4px;
-  min-width: 0;
-}
-
-.track .data .data-title,
-.track .data .data-artist {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  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;
-}
-
-paper-ripple {
-  bottom: 0;
-  color: rgb(51, 51, 51);
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}

ui/file_manager/audio_player/elements/track_list.html

@@ -10,7 +10,99 @@
 
 <dom-module id="track-list">
   <template>
-    <link rel="stylesheet" href="elements/track_list.css">
+    <style>
+      :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: flex-start;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+
+      /* Track item. */
+      .track {
+        align-items: center;
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: row;
+        height: 48px;
+        justify-content: flex-start;
+        position: relative;
+        width: 100%;
+      }
+
+      :host([expanded]) > .track:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+      }
+
+      /* Track icon. */
+      .track .icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        flex: none;
+        height: 32px;
+        margin: 8px;
+        pointer-events: none;
+        width: 32px;
+      }
+
+      .track:hover .icon {
+        background-image: -webkit-image-set(
+            url(../assets/100/playlist_play.png) 1x,
+            url(../assets/200/playlist_play.png) 2x);
+        pointer-events: auto;
+      }
+
+      .track[active] .icon {
+        background-image: -webkit-image-set(
+            url(../assets/100/playlist_now_playing.png) 1x,
+            url(../assets/200/playlist_now_playing.png) 2x);
+      }
+
+      /* Track data. */
+
+      .track .data {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 0;
+        margin-right: 4px;
+        min-width: 0;
+      }
+
+      .track .data .data-title,
+      .track .data .data-artist {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        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;
+      }
+
+      paper-ripple {
+        bottom: 0;
+        color: rgb(51, 51, 51);
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    </style>
     <template is="dom-repeat" id="tracks" items="[[tracks]]">
       <div class="track" active$="[[item.active]]" index$="[[index]]" on-click="trackClicked">
         <div class="icon"></div>

ui/file_manager/file_manager_resources.grd

@@ -125,19 +125,14 @@
       <include name="IDR_AUDIO_PLAYER_MANIFEST" file="audio_player/manifest.json" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_BACKGROUND_JS" file="audio_player/js/background_scripts.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_BACKGROUND_HTML" file="audio_player/background.html" type="BINDATA" />
-      <include name="IDR_AUDIO_PLAYER_ELEMENTS_AUDIO_PLAYER_CSS" file="audio_player/elements/audio_player.css" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_AUDIO_PLAYER_HTML" file="audio_player/elements/audio_player.html" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_AUDIO_PLAYER_JS" file="audio_player/elements/audio_player.js" type="BINDATA" />
-      <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_REPEAT_BUTTON_CSS" file="audio_player/elements/repeat_button.css" flattenhtml="true" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_REPEAT_BUTTON_HTML" file="audio_player/elements/repeat_button.html" type="BINDATA" />
       <include name="IDR_AUDIO_PLAYER_ELEMENTS_REPEAT_BUTTON_JS" file="audio_player/elements/repeat_button.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" />
       <include name="IDR_AUDIO_PLAYER_METADATA_WORKER_JS" file="audio_player/js/metadata_worker.js" type="BINDATA" />