Fix Audio Player expand/collapse button

Fix CSS selector for <track-info-panel> element, CSS uses a different syntax for Polymer :host pseudo-element with attributes selector. I used code search for all ":host" entries and only this file is using the incorrect syntax. There is no change in behaviour, only styles have changed. Test: Checked manually/visually Audio Player. Bug: 896056 Change-Id: Id93eb2460a8370dfc1e2488e335bdfac3c4067e7 Reviewed-on: https://chromium-review.googlesource.com/c/1295629 Commit-Queue: Luciano Pacheco <lucmult@chromium.org> Reviewed-by: Trent Apted <tapted@chromium.org> Cr-Commit-Position: refs/heads/master@{#601857}

Fix Audio Player expand/collapse button
Fix CSS selector for <track-info-panel> element, CSS uses a different syntax for Polymer :host pseudo-element with attributes selector. I used code search for all ":host" entries and only this file is using the incorrect syntax. There is no change in behaviour, only styles have changed. Test: Checked manually/visually Audio Player. Bug: 896056 Change-Id: Id93eb2460a8370dfc1e2488e335bdfac3c4067e7 Reviewed-on: https://chromium-review.googlesource.com/c/1295629 Commit-Queue: Luciano Pacheco <lucmult@chromium.org> Reviewed-by: Trent Apted <tapted@chromium.org> Cr-Commit-Position: refs/heads/master@{#601857}
1633f13d · Luciano Pacheco · Commit Bot · 8f75525a · 1633f13d · 1633f13d
Commit 1633f13d authored Oct 23, 2018 by Luciano Pacheco Committed by Commit Bot Oct 23, 2018
5 changed files
--- a/ui/file_manager/audio_player/audio_player.html
+++ b/ui/file_manager/audio_player/audio_player.html
@@ -20,6 +20,17 @@
  <script src="js/audio_player_scripts.js"></script>
 </head>
 <body>
+  <custom-style>
+    <style is="custom-style">
+      html {
+        /* Customize control-panel buttons. */
+        --files-ripple-bg-color: black;
+        --files-toggle-ripple-bg-color: black;
+        --files-toggle-ripple-activated-bg-color: black;
+        --files-toggle-ripple-activated-opacity: 0.1;
+      }
+    </style>
+  </custom-style>
  <div class="audio-player">
    <!-- Place the audio player. -->
    <audio-player></audio-player>

--- a/ui/file_manager/audio_player/elements/control_panel.css
+++ b/ui/file_manager/audio_player/elements/control_panel.css
@@ -32,9 +32,6 @@
 /* Customized scrollbar for the playlist. */

 .media-button {
-  --files-toggle-ripple-activated: {
-    opacity: 0.1;
-  };
  background-color: transparent;
  border: 0;
  flex: none;
@@ -209,15 +206,3 @@ paper-slider.disabled {
  position: absolute;
  top: -1px;
 }
-
-.control-panel {
-  --files-ripple: {
-    background-color: black;
-  };
-  --files-toggle-ripple: {
-    background-color: black;
-  };
-  --files-toggle-ripple-activated: {
-    background-color: black;
-  };
-}
--- a/ui/file_manager/audio_player/elements/track_info_panel.css
+++ b/ui/file_manager/audio_player/elements/track_info_panel.css
@@ -21,7 +21,7 @@
  width: 100%;
 }

-:host[expanded] .track {
+:host([expanded]) .track {
  background-color: rgba(255, 255, 255, 0.9);
  bottom: 0px;
  position: absolute;
@@ -34,7 +34,7 @@
  width: 48px;
 }

-:host[expanded] .icon {
+:host([expanded]) .icon {
  visibility: hidden;
 }

@@ -55,7 +55,7 @@
  position: relative;
 }

-:host:not([artwork-available])[expanded] .track-wrapper {
+:host(:not([artwork-available])[expanded]) .track-wrapper {
  height: 320px;
  position: relative;
  width: 100%;
@@ -65,11 +65,11 @@
  background-size: 0 0;
 }

-:host:not([expanded]) .icon-unavailable-expanded {
+:host(:not([expanded])) .icon-unavailable-expanded {
  background-size: 0 0;
 }

-:host:not([artwork-available])[expanded] .icon-unavailable-expanded {
+: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);
@@ -81,7 +81,7 @@
  width: 320px;
 }

-:host[artwork-available][expanded] .icon-expanded {
+:host([artwork-available][expanded]) .icon-expanded {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
@@ -100,13 +100,13 @@
  width: 48px;
 }

-:host: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[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);

--- a/ui/file_manager/file_manager/foreground/elements/files_ripple.html
+++ b/ui/file_manager/file_manager/foreground/elements/files_ripple.html
@@ -20,7 +20,7 @@
      }

      .ripple {
-        background-color: white;
+        background-color: var(--files-ripple-bg-color, white);
        border-radius: 50%;
        height: 50%;
        margin: 0 auto;

--- a/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
+++ b/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html
@@ -27,7 +27,7 @@
      }

      .ripple {
-        background-color: white;
+        background-color: var(--files-toggle-ripple-bg-color, white);
        height: 0;
        margin: 0 auto;
        opacity: 0;
@@ -36,9 +36,10 @@
      }

      .ripple.activated {
+        background-color: var(--files-toggle-ripple-activated-bg-color, white);
        border-radius: 2px;
        height: 50%;
-        opacity: 0.2;
+        opacity: var(--files-toggle-ripple-activated-opacity, 0.2);
        width: 50%;
        @apply(--files-toggle-ripple-activated);
      }