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

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

 <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/paper-button/paper-button.html">
+<link rel="import" href="../route_controls/route_controls.html">
 <dom-module id="route-details">
   <link rel="import" type="css" href="../../media_router_common.css">
   <link rel="import" type="css" href="route_details.css">
   <template>
-    <div id="route-information" hidden$="[[!isCustomControllerHidden_]]">
+    <div id="route-information"
+        hidden$="[[!shouldShowRouteInfo_(useNewRouteControls, isExtensionViewHidden_)]]">
       <span>[[activityStatus_]]</span>
     </div>
     <extensionview id="custom-controller"
-        hidden$="[[isCustomControllerHidden_]]">
+        hidden$="[[!shouldShowExtensionView_(useNewRouteControls, isExtensionViewHidden_)]]">

[mark a. foltz, 2017/05/03 21:27:01]

Does <hidden> prevent instantiation of the <extensionview> element or only
adjust its CSS display property?

It would be preferable to not instantiate the <extensionview> at all so we can
accurately measure the performance impact of switching to WebUI controls.

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

<template is="dom-if"> seems to do that. But it makes the extensionview load
later than we currently use it, so we'll need to set a callback for loading. I
couldn't find a nice way to do that -- Jennifer, do you know how?

     </extensionview>
+      <route-controls id="route-controls" hidden$="[[!useNewRouteControls]]">
+      </route-controls>
     <div id="route-action-buttons" class="layout">
       <paper-button flat class="route-button button"
           id="start-casting-to-route-button"
           hidden$="[[computeCastButtonHidden_(route, changeRouteSourceAvailable_)]]"
           on-tap="startCastingToRoute_">
         <span>[[i18n('startCastingButtonText')]]</span>
       </paper-button>
       <paper-button flat class="route-button button"
           id="close-route-button"
           on-tap="closeRoute_">
         <span>[[i18n('stopCastingButtonText')]]</span>
       </paper-button>
     <div>
   </template>
 <script src="route_details.js"></script>
 </dom-module>