Add a button to chart-title to populate the test-picker.

dashboard/dashboard/elements/report-page.html

Index: dashboard/dashboard/elements/report-page.html
diff --git a/dashboard/dashboard/elements/report-page.html b/dashboard/dashboard/elements/report-page.html
index f32edfa3898133768889b357fd82eb4e7fdb635f..5357bfaf7aed32ff070a8de597103be0d1ea9c95 100644
--- a/dashboard/dashboard/elements/report-page.html
+++ b/dashboard/dashboard/elements/report-page.html
@@ -41,8 +41,12 @@ found in the LICENSE file.
   <script>
     'use strict';
     Polymer({
-
       is: 'report-page',
+
+      listeners: {
+        populateTestPicker: 'populateTestPicker_',
+      },
+
       properties: {
         charts: {
           type: Array,
@@ -121,6 +125,22 @@ found in the LICENSE file.
         this.uriController.load();
       },
 
+      async populateTestPicker_(event) {

[shatch, 2017/05/19 19:43:53]

I think it'd be cleaner if you just had chart-title do the parsing, and have
test picker handle the event instead of this conversion step happening in
report-page.

+        // chart-title's testPaths have a different structure from test-picker's
+        // testPaths.
+        let testPath = [];
+        for (const part of event.detail.titleParts) {
+          testPath.push.apply(testPath, part.split('/'));
+        }
+
+        // chart-title's testPaths are in a different order from test-picker's
+        // testPaths.
+        testPath = [testPath[2], testPath[1]].concat(testPath.slice(3));
+
+        this.testPicker.scrollIntoViewIfNeeded();
+        await this.testPicker.setCurrentSelectedPath(testPath);
+      },
+
       /**
        * On 'uriload' event, adds charts from the current query parameters.
        * @param {Object} event Event object.