[Media Router] First Run Flow WebUI and strings.

Part 1 of several. This is currently set up to be landed as a standalone part of the first run flow work.

This change includes:
- Add strings for Chromium specific first run flow.
- Add first run flow nux to the WebUI (but stay unstamped for now). Used redlines and mocks as guidelines.

BUG=560457

Review URL: https://codereview.chromium.org/1554663002

Cr-Commit-Position: refs/heads/master@{#367221}

chrome/app/media_router_strings.grdp

@@ -48,6 +48,17 @@
    Report an issue
   </message>
 
+  <!-- First Run Flow -->
+  <message name="IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_TITLE" desc="Title of the first run flow, which is shown to the user the first time they use Media Router, until they acknowledge the message. This is a welcome message that introduces Media Router to the user.">
+    Welcome to the Cast experience in Chromium!
+  </message>
+  <message name="IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_TEXT" desc="Text of the first run flow, which is shown to the user the first time they use Media Router. This is an introductory description of what Media Router does.">
+    You can use this feature to display content from Chromium on your TV or other devices.
+  </message>
+  <message name="IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_BUTTON" desc="Acknowledge button for the first run flow, which, on click, will dismiss the first run flow and set the current profile's preference that the user has acknowledged the first run flow.">
+    Ok, got it
+  </message>
+
   <!-- Issue Actions -->
   <message name="IDS_MEDIA_ROUTER_DISMISS_BUTTON" desc="Dismiss button, which, on click, will dismiss the current issue.">
     Dismiss

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css

@@ -43,6 +43,36 @@
   text-decoration: none;
 }
 
+#first-run-button {
+  background-color: white;
+}
+
+#first-run-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+#first-run-flow {
+  background-color: rgb(33, 150, 243);
+  padding: 24px 16px 4px 16px;
+}
+
+#first-run-text,
+#first-run-title {
+  color: white;
+  padding-bottom: 24px;
+}
+
+#first-run-text {
+  font-size: 1.0em;
+  line-height: 1.5em;
+}
+
+#first-run-title {
+  font-size: 1.25em;
+}
+
 #issue-banner {
   margin-top: var(--container-header-height);
   width: 100%;

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

@@ -14,6 +14,18 @@
   <link rel="import" type="css" href="../../media_router_common.css">
   <link rel="import" type="css" href="media_router_container.css">
   <template>
+    <template is="dom-if" if="[[showFirstRunFlow_]]">
+      <div id="first-run-flow">
+        <div id="first-run-title">[[firstRunFlowTitle_]]</div>
+        <div id="first-run-text">[[firstRunFlowText_]]</div>
+        <div id="first-run-button-container">
+          <paper-button id="first-run-button" class="button"
+              on-click="acknowledgeFirstRunFlow_">
+            <span>[[firstRunFlowButtonText_]]</span>
+          </paper-button>
+        </div>
+      </div>
+    </template>
     <media-router-header id="container-header"
         class$="[[currentView_]]" view="[[currentView_]]"
         heading-text="[[computeHeaderText_(currentView_, headerText)]]"

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js

@@ -74,6 +74,36 @@ Polymer({
       value: '',
     },
 
+    /**
+     * The text for the first run flow button.
+     * @private {string}
+     */
+    firstRunFlowButtonText_: {
+      type: String,
+      readOnly: true,
+      value: loadTimeData.getString('firstRunFlowButton'),
+    },
+
+    /**
+     * The text description for the first run flow.
+     * @private {string}
+     */
+    firstRunFlowText_: {
+      type: String,
+      readOnly: true,
+      value: loadTimeData.getString('firstRunFlowText'),
+    },
+
+    /**
+     * The header of the first run flow.
+     * @private {string}
+     */
+    firstRunFlowTitle_: {
+      type: String,
+      readOnly: true,
+      value: loadTimeData.getString('firstRunFlowTitle'),
+    },
+
     /**
      * The header text for the sink list.
      * @type {string}
@@ -161,6 +191,15 @@ Polymer({
       value: loadTimeData.getString('shareYourScreenSubheading'),
     },
 
+    /**
+     * Whether to show the first run flow.
+     * @private {boolean}
+     */
+    showFirstRunFlow_: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * The cast mode shown to the user. Initially set to auto mode. (See
      * media_router.CastMode documentation for details on auto mode.)
@@ -247,6 +286,16 @@ Polymer({
     }, 3000 /* 3 seconds */);
   },
 
+  /**
+   * Fires an acknowledge-first-run-flow event. This is call when the first run
+   * flow button is clicked.
+   *
+   * @private
+   */
+  acknowledgeFirstRunFlow_: function() {
+    this.fire('acknowledge-first-run-flow');
+  },
+
   /**
    * Checks that the currently selected cast mode is still in the
    * updated list of available cast modes. If not, then update the selected

chrome/browser/ui/webui/media_router/media_router_localized_strings_provider.cc

@@ -34,6 +34,12 @@ void AddIssuesStrings(content::WebUIDataSource* html_source) {
 }
 
 void AddMediaRouterContainerStrings(content::WebUIDataSource* html_source) {
+  html_source->AddLocalizedString("firstRunFlowButton",
+                                  IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_BUTTON);
+  html_source->AddLocalizedString("firstRunFlowText",
+                                  IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_TEXT);
+  html_source->AddLocalizedString("firstRunFlowTitle",
+                                  IDS_MEDIA_ROUTER_FIRST_RUN_FLOW_TITLE);
   html_source->AddLocalizedString("autoCastMode",
                                   IDS_MEDIA_ROUTER_AUTO_CAST_MODE);
   html_source->AddLocalizedString("deviceMissing",

chrome/test/data/webui/media_router/media_router_container_tests.js

@@ -162,6 +162,20 @@ cr.define('media_router_container', function() {
         setTimeout(done);
       });
 
+      // Tests for 'acknowledge-first-run-flow' event firing when the
+      // 'first-run-button' button is clicked.
+      test('first run button click', function(done) {
+        container.showFirstRunFlow_ = true;
+
+        setTimeout(function() {
+          container.addEventListener('acknowledge-first-run-flow', function() {
+            done();
+          });
+          MockInteractions.tap(container.shadowRoot.getElementById(
+              'first-run-button'));
+        });
+      });
+
       // Tests for 'create-route' event firing when a sink with no associated
       // route is clicked.
       test('select sink without a route', function(done) {