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..0eccc2c7129bbef061ee3e86c4d1f00351235354 100644
--- a/dashboard/dashboard/elements/report-page.html
+++ b/dashboard/dashboard/elements/report-page.html
@@ -119,6 +119,63 @@ found in the LICENSE file.
         events.addEventListener(window, 'uriload', this.onUriLoad.bind(this));
         this.uriController = new uri.Controller(this.getPageState.bind(this));
         this.uriController.load();
+
+        this.addEventListener('click', this.onClick_.bind(this));
+      },
+
+      async onClick_(event) {
+        // When the user clicks anywhere in any chart-title, populate the
+        // testPicker.
+        let chartTitle = event.target;
+        while (chartTitle !== this && chartTitle.tagName !== 'CHART-TITLE') {
+          chartTitle = chartTitle.parentNode;
+        }
+        if (chartTitle.tagName !== 'CHART-TITLE') return;

[sullivan, 2017/05/16 13:35:13]

The event handling here is really different than the normal style for the perf
dashboard. The perf dashboard uses polymer's annotated event handling:
https://www.polymer-project.org/1.0/docs/devguide/events#annotated-listeners

So we would normally set it up like this:

1) In chart-title.html, update the existing onClick method to do the parsing to
get the suite, bot, and subtests the testpicker should have and fire an event
with the information
(https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-fire)
2) In testpicker, handle the event and set the menu as requested.

I prefer this convention because:
* It's clearer where the code that handles events on <chart-title> lives
* The code that relates to chart title parsing lives in <chart-title>
* The code that updates the testpicker menu lives in <test-picker>

[benjhayden, 2017/05/16 21:17:45]

Done.

+
+        const testPaths = chartTitle.getTestPaths();

[eakuefner, 2017/05/16 02:08:53]

Can you write some comments that explain why this stanza is here? I'm
specifically unfamiliar with chartTitle.getTestPaths, so starting with
clarifying why we call that here would help.

[benjhayden, 2017/05/16 21:17:45]

Changed to use event.titleParts.

+        let testPath = testPaths.shift().split('/');
+        for (const newPath of testPaths) {
+          for (let i = 0; i < Math.min(newPath.length, testPath.length); ++i) {
+            if (testPath[i] !== newPath[i]) {
+              testPath = testPath.slice(0, i);
+            }
+          }
+        }
+
+        const suiteMenu = this.testPicker.getSelectionMenu(0);
+        const suiteName = testPath[2];
+        for (let itemIndex = 0; itemIndex < suiteMenu.items.length; ++itemIndex) {

[eakuefner, 2017/05/16 02:08:52]

Could you write this as a for..of loop?

[benjhayden, 2017/05/16 21:17:45]

Done.

+          if (suiteMenu.items[itemIndex].name === suiteName) {
+            suiteMenu.selectedItem = suiteMenu.items[itemIndex];
+            break;
+          }
+        }
+
+        this.testPicker.updateTestSuiteDescription();
+        await this.testPicker.updateBotMenu();
+
+        const botName = testPath[1];
+        const botMenu = this.testPicker.getSelectionMenu(1);
+        for (let itemIndex = 0; itemIndex < botMenu.items.length; ++itemIndex) {
+          if (botMenu.items[itemIndex].name === botName) {
+            botMenu.selectedItem = botMenu.items[itemIndex];
+            break;
+          }
+        }
+        await this.testPicker.updateSubtestMenus(2);
+
+        for (let i = 3; i < testPath.length; ++i) {
+          const name = testPath[i];
+          const menu = this.testPicker.getSelectionMenu(i - 1);
+
+          for (let itemIndex = 0; itemIndex < menu.items.length; ++itemIndex) {
+            if (menu.items[itemIndex].name === testPath[i]) {
+              menu.selectedItem = menu.items[itemIndex];
+              break;
+            }
+          }
+          await this.testPicker.updateSubtestMenus(i);
+        }
       },
 
       /**