[Media Router] Custom Controls 4 - Implement details view WebUI

chrome/browser/resources/media_router/elements/route_controls/route_controls.html

Index: chrome/browser/resources/media_router/elements/route_controls/route_controls.html
diff --git a/chrome/browser/resources/media_router/elements/route_controls/route_controls.html b/chrome/browser/resources/media_router/elements/route_controls/route_controls.html
new file mode 100644
index 0000000000000000000000000000000000000000..471c8ce2ffff6caee5094ff19ef078c26970e9e1
--- /dev/null
+++ b/chrome/browser/resources/media_router/elements/route_controls/route_controls.html
@@ -0,0 +1,63 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
+<dom-module id="route-controls">
+  <link rel="import" type="css" href="../../media_router_common.css">
+  <link rel="import" type="css" href="route_controls.css">
+  <template>
+    <div id="media-controls">
+      <div class="ellipsis" id="route-description"
+           title="[[routeStatus_.description]]">
+          [[routeStatus_.description]]</div>
+      <div class="ellipsis" id="route-display-name"
+           title="[[routeStatus_.title]]">
+          [[routeStatus_.title]]</div>
+      <div>
+        <div id="route-time-controls"
+            hidden="[[!routeStatus_.canSeek]]">
+          <paper-slider
+              id="route-time-slider"
+              on-change="onTimeSliderChange_"
+              on-immediate-value-change="onImmediateTimeSliderChange_"
+              min="0" max="1" step="0.01"

[mark a. foltz, 2017/05/03 21:26:59]

Should this be in seconds reflecting the media duration, or do only the relative
values matter?

[takumif, 2017/05/05 18:57:38]

Yup, doing seconds here would be a good idea. Changed.

+              title="[[i18n('seekTitle')]]"
+              value="[[timeSliderValue_]]"></paper-slider>
+          <div id="timeline">

[mark a. foltz, 2017/05/03 21:26:59]

Presumably, non-seekable live media can still have a current_time (reflecting
the lifetime of the stream) even if can_seek is false.

If hiding the current_time is the existing behavior, fine to keep things this
way though.

[takumif, 2017/05/05 18:57:39]

This is the existing behavior. We can change it in the future if there's a need
to support non-seekable media with current_time. We'd want to show a disabled
slider if it has duration too.

+            <span id="current-time">
+                [[getFormattedTime_(displayedCurrentTime_)]]</span>
+            <span id="duration">[[getDuration_(routeStatus_)]]</span>
+          </div>
+        </div>
+        <div id="play-pause-volume-controls">
+          <span id="button-holder">
+            <paper-icon-button
+                id="route-play-pause-button"
+                hidden="[[!routeStatus_.canPlayPause]]"
+                disabled="[[!routeStatus_.canPlayPause]]"
+                icon="[[getPlayPauseIcon_(routeStatus_)]]"
+                title="[[getPlayPauseTitle_(routeStatus_.isPaused)]]"

[mark a. foltz, 2017/05/03 21:26:59]

Should this be i18n('play') or i18n('pause')? Can you use a conditional
expression here?

[takumif, 2017/05/05 18:57:38]

getPlayPauseTitle_() defined in route_controls.js returns the i18n-ized text.

+                on-click="onPlayPause_"></paper-icon-button>
+            <paper-icon-button
+                id="route-volume-button"
+                hidden="[[!routeStatus_.canMute]]"

[mark a. foltz, 2017/05/03 21:26:59]

disable this control as well for consistency with play-pause-button

[takumif, 2017/05/05 18:57:38]

Done.

+                icon="[[getMuteUnmuteIcon_(routeStatus_)]]"
+                title="[[getMuteUnmuteTitle_(routeStatus_.isMuted)]]"

[mark a. foltz, 2017/05/03 21:26:59]

Similar comment here

[takumif, 2017/05/05 18:57:38]

Same, i18n-ized text is returned by JS.

+                on-click="onMuteUnmute_"></paper-icon-button>
+          </span>
+          <span id="volume-holder">
+            <paper-slider
+                id="route-volume-slider"
+                hidden="[[!routeStatus_.canSetVolume]]"

[mark a. foltz, 2017/05/03 21:26:59]

Also disable if hidden

[takumif, 2017/05/05 18:57:39]

Done.

+                on-change="onVolumeSliderChange_"
+                on-immediate-value-change="onImmediateVolumeSliderChange_"
+                title="[[i18n('volumeTitle')]]"
+                value="[[volumeSliderValue_]]"
+                min="0" max="1" step="0.01"></paper-slider>
+          </span>
+        </div>
+      </div>
+    </div>
+  </template>
+<script src="route_controls.js"></script>
+</dom-module>