Upgrade to 1.0 and switch clients to dom-repeat where needed.

third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html

Index: third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html
diff --git a/third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html b/third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html
index c474f4462dd5f8c0753339bab42d1dade70a1daf..1bee9c32bc661798407ae94bb1e711f3eabcde66 100644
--- a/third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html
+++ b/third_party/polymer/v0_8/components/paper-toolbar/paper-toolbar.html
@@ -7,6 +7,9 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+
 <!--
 `paper-toolbar` is a horizontal bar containing items that can be used for
 label, navigation, search and actions.  The items place inside the
@@ -17,9 +20,9 @@ sizing.
 Example:
 
     <paper-toolbar>
-      <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
-      <div flex>Title</div>
-      <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
+      <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
+      <div title>Title</div>
+      <paper-icon-button icon="more" on-tap="moreAction"></paper-icon-button>
     </paper-toolbar>
 
 `paper-toolbar` has a standard height, but can made be taller by setting `tall`
@@ -41,30 +44,31 @@ When `tall`, items can pin to either the top (default), middle or bottom.  Use
 
     <paper-toolbar class="tall">
       <paper-icon-button icon="menu"></paper-icon-button>
-      <div class="middle">Middle Title</div>
-      <div class="bottom">Bottom Title</div>
+      <div title class="middle">Middle Title</div>
+      <div title class="bottom">Bottom Title</div>
     </paper-toolbar>
 
 For `medium-tall` toolbar, the middle and bottom contents overlap and are
 pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
 still honored separately.
 
-@group Polymer Core Elements
-@element paper-toolbar
-@homepage github.io
--->
+### Styling
 
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../paper-styles/paper-styles.html">
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-toolbar-background` | Toolbar background color     | `--default-primary-color`
+`--paper-toolbar-color`      | Toolbar foreground color     | `--text-primary-color`
+`--paper-toolbar`            | Mixin applied to the toolbar | `{}`
 
-<style is="x-style">
+### Accessibility
 
-  * {
+`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the `title` attribute will
+be used as the label of the toolbar via `aria-labelledby`.
 
-    --paper-toolbar-background: var(--default-primary-color);
-    --paper-toolbar-color: var(--text-primary-color);
-  }
-</style>
+@demo demo/index.html
+-->
 
 <dom-module id="paper-toolbar">
 
@@ -79,11 +83,10 @@ still honored separately.
       /* size */
       height: 64px;
 
-      background: var(--paper-toolbar-background);
-      color: var(--paper-toolbar-color);
-      mixin(--paper-font-title);
+      background: var(--paper-toolbar-background, --default-primary-color);
+      color: var(--paper-toolbar-color, --text-primary-color);
 
-      mixin(--paper-toolbar);
+      @apply(--paper-toolbar);
     }
 
     :host(.animate) {
@@ -125,16 +128,21 @@ still honored separately.
 
       .toolbar-tools {
         height: 56px;
-        padding: 0;
       }
     }
 
+    #topBar {
+      position: relative;
+      z-index: 1;
+    }
+
     /* middle bar */
     #middleBar {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
+      z-index: 2;
     }
 
     :host(.tall) #middleBar,
@@ -149,6 +157,7 @@ still honored separately.
       right: 0;
       bottom: 0;
       left: 0;
+      z-index: 1;
     }
 
     /*
@@ -162,20 +171,62 @@ still honored separately.
       pointer-events: auto;
     }
 
+    .toolbar-tools > ::content [title] {
+      @apply(--paper-font-title);
+      @apply(--layout-flex);
+
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      /*
+       * Polymer/polymer/issues/1525
+       * --paper-font-title defines a `font-weight`
+       * let's override its value, but we need `important!`
+       * because all mixins are resolved in rule's selector that has higher precedence
+       * than the current selector.
+       */
+      font-weight: 400 !important;
+    }
+
+    /**
+     * TODO: Refactor these selectors
+     * Work in progress.
+     */
+    .toolbar-tools > ::content paper-icon-button[icon=menu] {
+      margin-left: -8px;
+      margin-right: 24px;
+    }
+
+    .toolbar-tools > ::content paper-icon-button + paper-icon-button {
+      margin-right: -8px;
+    }
+
+    .toolbar-tools > ::content > [title],
+    .toolbar-tools > ::content[select=".middle"] > [title],
+    .toolbar-tools > ::content[select=".bottom"] > [title] {
+      margin-left: 56px;
+    }
+
+    .toolbar-tools > ::content > paper-icon-button + [title],
+    .toolbar-tools > ::content[select=".middle"] paper-icon-button + [title],
+    .toolbar-tools > ::content[select=".bottom"] paper-icon-button + [title] {
+      margin-left: 0;
+    }
   </style>
 
   <template>
 
-    <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
-      <content select=".bottom"></content>
+    <div id="topBar" class$="[[_computeBarClassName(justify)]]">
+      <content select=":not(.middle):not(.bottom)"></content>
     </div>
 
     <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
       <content select=".middle"></content>
     </div>
 
-    <div id="topBar" class$="[[_computeBarClassName(justify)]]">
-      <content></content>
+    <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
+      <content select=".bottom"></content>
     </div>
 
   </template>
@@ -203,7 +254,9 @@ still honored separately.
 
       is: 'paper-toolbar',
 
-      enableCustomStyleProperties: true,
+      hostAttributes: {
+        'role': 'toolbar'
+      },
 
       properties: {
 
@@ -250,6 +303,50 @@ still honored separately.
 
       },
 
+      attached: function() {
+        this._observer = this._observe(this);
+        this._updateAriaLabelledBy();
+      },
+
+      detached: function() {
+        if (this._observer) {
+          this._observer.disconnect();
+        }
+      },
+
+      _observe: function(node) {
+        var observer = new MutationObserver(function() {
+          this._updateAriaLabelledBy();
+        }.bind(this));
+        observer.observe(node, {
+          childList: true,
+          subtree: true
+        });
+        return observer;
+      },
+
+      _updateAriaLabelledBy: function() {
+        var labelledBy = [];
+        var contents = Polymer.dom(this.root).querySelectorAll('content');
+        for (var content, index = 0; content = contents[index]; index++) {
+          var nodes = Polymer.dom(content).getDistributedNodes();
+          for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
+            if (node.hasAttribute && node.hasAttribute('title')) {
+              if (node.id) {
+                labelledBy.push(node.id);
+              } else {
+                var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
+                node.id = id;
+                labelledBy.push(id);
+              }
+            }
+          }
+        }
+        if (labelledBy.length > 0) {
+          this.setAttribute('aria-labelledby', labelledBy.join(' '));
+        }
+      },
+
       _computeBarClassName: function(barJustify) {
         var classObj = {
           center: true,