Screenshot with issue:
https://storage.cloud.google.com/chromiumos-test-logs/bugfiles/cr/896056/new.png?_ga=2.245568515.-66391737.1524518032

Screenshot without issue: 
https://storage.cloud.google.com/chromiumos-test-logs/bugfiles/cr/896056/old.png?_ga=2.245568515.-66391737.1524518032

This issue is marked RBB and beta is coming very soon. Adding a couple more to CC to help find an owner. 

Moving this to RBS as it does not prevent any functionality.

The ripple has background-color: var(--files-toggle-ripple-activated_-_background-color); rather than "black"

This sounds like  Issue 888965  but that was fixed a while ago.

Reverting r592709 fixes this. Is that an option for m71? (i.e. in case there are subtle effects elsewhere as well?)

This is a Polymer2 issue so I need to investigate more closely, given that I'm not that experienced with it. :-)

dpapad@ any thoughts on this?

I'll have a closer look Monday.

First, I confirm that the comment #6 is correct, reverting back to not use the shadow root fixes the issue.

The issue is due to applying the style in the nested Polymer components, when the shadow root isn't used the browser can apply the style directly.

The style is suppose to be customized using Polymer "@apply" directive, however it doesn't seem to work with nested Polymer components/elements.

The 2 affected elements for Audio Player are:
- files-toggle-ripple [1]
- files-ripple [2]

They are included in the Audio Player as children of: <audio-player> -> <control-panel> -> <files-icon-button>

The only way I managed to set the desired styles is to change it in two ways:

1. Inside the <file-toggle-ripple>/<files-ripple> Switch to custom style variable instead of using "@apply" directive.
2. Set the custom style variable using "html" selector. Setting the custom variables using any other selector didn't work. :-/


The directive "@apply" is only used in these 2 Polymer elements inside ui/file_manager [3] and they're only used to customize background-color and opacity [4], so I'm switching these 2 CSS properties to use custom style variables, for all apps Files, Gallery, Audio and Video.


[1] - https://cs.chromium.org/chromium/src/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html?l=35-43&rcl=afde4e72098d1d3fd69fb78457fc08fec6ee67b4
[2] - https://cs.chromium.org/chromium/src/ui/file_manager/file_manager/foreground/elements/files_ripple.html?l=29&rcl=afde4e72098d1d3fd69fb78457fc08fec6ee67b4
[3] - https://cs.chromium.org/search/?q=%22@apply%22+file:%5Esrc/ui/file_manager/+package:%5Echromium$&type=cs
[4] - https://cs.chromium.org/search/?q=(%22--files-ripple%22+OR+%22--files-toggle-ripple%22++OR+%22--filestoogle-ripple-activated%22)++file:%5Esrc/ui/file_manager/+package:%5Echromium$+-f:/out/+&type=cs

I just figured out that another button ins't working in Audio Player. The button that expand the audio cover image.

It does't show the button icon, because it uses the selector :host:([expanded]) [1]

The fix for this issue to make it working for Polymer v1 and v2 has proven to be more demanding than I initially expected. :-(

The easiest solution to M71, is to revert the change for Audio Player in M-71 branch. [2] Because in the master branch we want Audio Player working with Polymer v1 and v2.



[1] - https://cs.chromium.org/chromium/src/ui/file_manager/audio_player/elements/track_info_panel.css?l=103&rcl=d89a726271a6b6934ec72510c2da3f4495729e5b
[2] - https://chromium-review.googlesource.com/c/chromium/src/+/1293064

I've sent a CL to fix the control panel buttons: crrev.com/c/1293056

There is still the issue with expand button that I'm not sure how to fix yet (see attached).

Deleted: Selection_062.png 501 KB

	Selection_062.png 501 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1633f13dd3afb2ae526f70f746cf548a10accfe6

commit 1633f13dd3afb2ae526f70f746cf548a10accfe6
Author: Luciano Pacheco <lucmult@chromium.org>
Date: Tue Oct 23 05:35:18 2018

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}
[modify] https://crrev.com/1633f13dd3afb2ae526f70f746cf548a10accfe6/ui/file_manager/audio_player/audio_player.html
[modify] https://crrev.com/1633f13dd3afb2ae526f70f746cf548a10accfe6/ui/file_manager/audio_player/elements/control_panel.css
[modify] https://crrev.com/1633f13dd3afb2ae526f70f746cf548a10accfe6/ui/file_manager/audio_player/elements/track_info_panel.css
[modify] https://crrev.com/1633f13dd3afb2ae526f70f746cf548a10accfe6/ui/file_manager/file_manager/foreground/elements/files_ripple.html
[modify] https://crrev.com/1633f13dd3afb2ae526f70f746cf548a10accfe6/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html

Requesting to merge crrev.com/c/1295629 (CL above) on M-71.

I've patched the CL in a local branch from branch-heads/3578 (M71) and tested locally, also run the Files app and Audio Player integration test and pass.

Approving merge to M71 Chrome OS.

The following revision refers to this bug: 
https://chromium.googlesource.com/chromium/src.git/+/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751

Commit: 91627d0fa7e4347ddf69f1a85f1cfa18c15d1751
Author: lucmult@chromium.org
Commiter: lucmult@chromium.org
Date: 2018-10-23 23:22:51 +0000 UTC

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-Original-Commit-Position: refs/heads/master@{#601857}(cherry picked from commit 1633f13dd3afb2ae526f70f746cf548a10accfe6)
Reviewed-on: https://chromium-review.googlesource.com/c/1297211
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/branch-heads/3578@{#280}
Cr-Branched-From: 4226ddf99103e493d7afb23a4c7902ee496108b6-refs/heads/master@{#599034}

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751

commit 91627d0fa7e4347ddf69f1a85f1cfa18c15d1751
Author: Luciano Pacheco <lucmult@chromium.org>
Date: Tue Oct 23 23:22:51 2018

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-Original-Commit-Position: refs/heads/master@{#601857}(cherry picked from commit 1633f13dd3afb2ae526f70f746cf548a10accfe6)
Reviewed-on: https://chromium-review.googlesource.com/c/1297211
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/branch-heads/3578@{#280}
Cr-Branched-From: 4226ddf99103e493d7afb23a4c7902ee496108b6-refs/heads/master@{#599034}
[modify] https://crrev.com/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751/ui/file_manager/audio_player/audio_player.html
[modify] https://crrev.com/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751/ui/file_manager/audio_player/elements/control_panel.css
[modify] https://crrev.com/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751/ui/file_manager/audio_player/elements/track_info_panel.css
[modify] https://crrev.com/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751/ui/file_manager/file_manager/foreground/elements/files_ripple.html
[modify] https://crrev.com/91627d0fa7e4347ddf69f1a85f1cfa18c15d1751/ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html

Hum... it hasn't updated here, but it's merged on M-71:
https://chromium-review.googlesource.com/c/chromium/src/+/1297211

This issue has been approved for a merge. Please merge the fix to any appropriate branches as soon as possible!

If all merges have been completed, please remove any remaining Merge-Approved labels from this issue.

Thanks for your time! To disable nags, add the Disable-Nags label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

This was already merged, somehow it lost the label Merge-Merged-71-3578 and sheriffbot got confused with that.

I've reported the label loss to monorail: https://bugs.chromium.org/p/monorail/issues/detail?id=4478

 Issue 891110  has been merged into this issue.