[MD settings] make About menu item blue when selected

chrome/browser/resources/settings/settings_menu/settings_menu.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'settings-menu' shows a menu with a hardcoded set of pages and subpages.
  */
 Polymer({
   is: 'settings-menu',
 
+  behaviors: [settings.RouteObserverBehavior],
+
   properties: {
     /** @private */
+    aboutSelected_: Boolean,
+
+    /** @private */
     advancedOpened_: Boolean,

[tommycli, 2016/08/22 23:23:00]

I think you can axe this property declaration, since it's not used by any of the
method bodies below.

[dschuyler, 2016/08/22 23:35:09]

Done.

 
     /**
      * Dictionary defining page visibility.
      * @type {!GuestModePageVisibility}
      */
     pageVisibility: {
       type: Object,
     },
   },
 
@@ skipping 11 matching lines @@
 
     this.$.advancedPage.addEventListener('paper-submenu-close', function() {
       this.fire('toggle-advanced-page', false);
     }.bind(this));
 
     this.fire('toggle-advanced-page',
               settings.Route.ADVANCED.contains(settings.getCurrentRoute()));
   },
 
   /**
+   * Handle setting selected menu item from URL routes as well as menu
+   * selections.

[tommycli, 2016/08/22 23:23:00]

nit: clarify comment to something like:

Update menus based on new route.

Or just remove comment.

[dschuyler, 2016/08/22 23:35:09]

I wanted to point out that some of the code
is important for URLs entered in in the omnibox.
I removed the top comment and added more specific
comments.

[tommycli, 2016/08/22 23:36:58]

Thanks. New comments helpful. This is a subtle piece

+   * @param {!settings.Route} newRoute
+   */
+  currentRouteChanged: function(newRoute) {
+    // Make the three menus mutually exclusive.
+    if (settings.Route.ABOUT.contains(newRoute)) {
+      this.aboutSelected_ = true;
+      this.$.advancedMenu.selected = null;
+      this.$.basicMenu.selected = null;
+    } else if (settings.Route.ADVANCED.contains(newRoute)) {
+      this.aboutSelected_ = false;
+      this.$.advancedMenu.selected = newRoute.path;
+      this.$.basicMenu.selected = null;
+    } else if (settings.Route.BASIC.contains(newRoute)) {
+      this.aboutSelected_ = false;
+      this.$.advancedMenu.selected = null;
+      this.$.basicMenu.selected = newRoute.path;
+    }
+  },
+
+  /**
    * @param {!Event} event
    * @private
    */
   ripple_: function(event) {
     var ripple = document.createElement('paper-ripple');
     ripple.addEventListener('transitionend', function() {
       ripple.remove();
     });
     event.currentTarget.appendChild(ripple);
     ripple.downAction();
@@ skipping 12 matching lines @@
 
   /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Which icon to use.
    * @private
    * */
   arrowState_: function(opened) {
     return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 });