AudioPlayer: Update layout to show the volume slider without using popup.

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;
@@ skipping 16 matching lines @@
   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;
 }
 
-/* Custom sliders for progress and volume. */
+/* Time and volume controls. */
 
-/* Customize the standard input[type='range']. */
-
-/* Time controls: a slider and a text time display. */
-
-.time-controls {
+.time-volume-controls {
   align-items: center;
   display: flex;
   flex-direction: row;
   height: 100%;
   justify-content: center;
 }
 
-.time-controls > .time-container {
+.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.disabled {
   opacity: 0;
 }
 
 .time-container > .time-spacer {
   opacity: 0; /* This class is intended to be used as invisible spacer. */
 }
 
-.time-controls > paper-slider {
+.time-volume-controls > paper-slider {
   --paper-slider-active-color: rgb(66, 133, 244);
   --paper-slider-knob-color: rgb(64, 138, 241);
   flex: auto;
 }
 
+#timeSlider {
+  flex: 3 1 auto;
+  width: 118px;
+}
+
+#volumeSlider {
+  flex: 1 1 auto;
+  width: 82px;
+}
+
 .media-button.disabled,
 paper-slider.disabled {
   pointer-events: none;
 }
 
 /* Media controls in order of appearance. */
 
 .audio-controls {
   align-items: center;
   display: flex;
@@ skipping 54 matching lines @@
 }
 
 .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.volume {
-  background-image: -webkit-image-set(
-      url(../assets/100/player_button_volume.png) 1x,
-      url(../assets/200/player_button_volume.png) 2x);
-  margin-left: 0;
-  margin-right: 8px;
-  pointer-events: auto;
-}
-
 .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;
 }
-
-/* Volume controls: sound button and volume slider */
-
-#volumeContainer {
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #777;
-  height: 110px;
-  position: fixed;
-  width: 32px;
-}
-
-#volumeContainer.default-hidden {
-  visibility: hidden;
-}