Non-Local Join for Media Router and Presentation API

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

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="../media_router_header/media_router_header.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>
     <media-router-header id="route-details-header"
         view="[[currentView_]]" heading-text="[[sink.name]]">
     </media-router-header>
     <div id="route-information" hidden$="[[!isCustomControllerHidden_]]">
       <span>[[activityStatus_]]</span>
     </div>
     <extensionview id="custom-controller"
         hidden$="[[isCustomControllerHidden_]]">
     </extensionview>
-    <paper-button raised id="close-route-button" class="button"
-        on-click="closeRoute_">
-      <span>[[stopCastingButtonText_]]</span>
-    </paper-button>
+    <div class="layout horizontal end-justified">
+      <paper-button raised class="flex self-stretch route-button button"
+          hidden$="[[!route.canJoin]]"

[imcheng, 2015/11/19 18:55:08]

Maybe more of a UX question: do we want to show the join button only in DEFAULT
cast mode?

[matt.boetger, 2015/11/24 19:45:23]

In the code, the assumption is made that only the DEFAULT cast mode will be
joinable - so I think it's a fair assumption for the UX as well.  However, when
you click on a route it shows the route details and it may be confusing to not
show the join option as well - because that option is available otherwise, but
not now - could be confusing to a user.  I can see it either way.  I still
haven't heard back from the UX folks.  I'll try to ping them again.

+          on-click="joinRoute_">
+        <span>[[joinCastingButtonText_]]</span>
+      </paper-button>
+      <paper-button raised class="flex self-stretch route-button button"
+          on-click="closeRoute_">
+        <span>[[stopCastingButtonText_]]</span>
+      </paper-button>
+    <div>
   </template>
 <script src="route_details.js"></script>
 </dom-module>