MD Extensions: Force the toolbar to narrow mode sooner.

In other WebUIs the toolbar collapses when the window width fallows below 900px.
In MD Extensions, because there is more content on the right of the toolbar, it
needs to collapse sooner.

Bug: 788979
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I69617f871918ffcc462834827b116aef8f7ca0bf
Reviewed-on: https://chromium-review.googlesource.com/801796Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520704}

chrome/browser/resources/md_extensions/toolbar.html

@@ -85,7 +85,8 @@
         search-prompt="$i18n{search}"
         clear-label="$i18n{clearSearch}"
         menu-label="$i18n{mainMenu}"
-        show-menu="[[!isGuest]]" show-search="[[!isGuest]]">
+        show-menu="[[!isGuest]]" show-search="[[!isGuest]]"
+        narrow-threshold="1000">
       <div class="more-actions" hidden$="[[isGuest]]">
         <span id="devModeLabel">$i18n{toolbarDevMode}</span>
         <cr-toggle id="dev-mode" on-change="onDevModeToggleChange_"

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -155,7 +155,8 @@
           spinner-active="[[spinnerActive]]"
           showing-search="{{showingSearch_}}">
       </cr-toolbar-search-field>
-      <iron-media-query query="(max-width: 900px)" query-matches="{{narrow}}">
+      <iron-media-query query="(max-width: [[narrowThreshold]]px)"
+          query-matches="{{narrow}}">
       </iron-media-query>
     </div>
 

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

@@ -46,6 +46,15 @@ Polymer({
       notify: true,
     },
 
+    /**
+     * The threshold at which the toolbar will change from normal to narrow
+     * mode, in px.
+     */
+    narrowThreshold: {
+      type: Number,
+      value: 900,
+    },
+
     closeMenuPromo: String,
 
     /** @private */