| Index: third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
 | 
| diff --git a/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html b/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
 | 
| deleted file mode 100644
 | 
| index e3c7a03ad1453e90b813340c6faa1cc072f38822..0000000000000000000000000000000000000000
 | 
| --- a/third_party/polymer/v1_0/components/paper-toolbar/paper-toolbar.html
 | 
| +++ /dev/null
 | 
| @@ -1,386 +0,0 @@
 | 
| -<!--
 | 
| -Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 | 
| -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 | 
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 | 
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 | 
| -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
 | 
| -`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
 | 
| -`paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
 | 
| -sizing.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-toolbar>
 | 
| -      <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
 | 
| -      <div class="title">Title</div>
 | 
| -      <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
 | 
| -    </paper-toolbar>
 | 
| -
 | 
| -`paper-toolbar` has a standard height, but can made be taller by setting `tall`
 | 
| -class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
 | 
| -
 | 
| -    <paper-toolbar class="tall">
 | 
| -      <paper-icon-button icon="menu"></paper-icon-button>
 | 
| -    </paper-toolbar>
 | 
| -
 | 
| -Apply `medium-tall` class to make the toolbar medium tall.  This will make the
 | 
| -toolbar 2x the normal height.
 | 
| -
 | 
| -    <paper-toolbar class="medium-tall">
 | 
| -      <paper-icon-button icon="menu"></paper-icon-button>
 | 
| -    </paper-toolbar>
 | 
| -
 | 
| -When `tall`, items can pin to either the top (default), middle or bottom.  Use
 | 
| -`middle` class for middle content and `bottom` class for bottom content.
 | 
| -
 | 
| -    <paper-toolbar class="tall">
 | 
| -      <paper-icon-button icon="menu"></paper-icon-button>
 | 
| -      <div class="middle title">Middle Title</div>
 | 
| -      <div class="bottom title">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.
 | 
| -
 | 
| -To make an element completely fit at the bottom of the toolbar, use `fit` along
 | 
| -with `bottom`.
 | 
| -
 | 
| -    <paper-toolbar class="tall">
 | 
| -      <div id="progressBar" class="bottom fit"></div>
 | 
| -    </paper-toolbar>
 | 
| -
 | 
| -### Styling
 | 
| -
 | 
| -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 | `{}`
 | 
| -
 | 
| -### Accessibility
 | 
| -
 | 
| -`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
 | 
| -be used as the label of the toolbar via `aria-labelledby`.
 | 
| -
 | 
| -@demo demo/index.html
 | 
| --->
 | 
| -
 | 
| -<dom-module id="paper-toolbar">
 | 
| -
 | 
| -  <style>
 | 
| -    :host {
 | 
| -      /* technical */
 | 
| -      display: block;
 | 
| -      position: relative;
 | 
| -      box-sizing: border-box;
 | 
| -      -moz-box-sizing: border-box;
 | 
| -
 | 
| -      /* size */
 | 
| -      height: 64px;
 | 
| -
 | 
| -      background: var(--paper-toolbar-background, --default-primary-color);
 | 
| -      color: var(--paper-toolbar-color, --text-primary-color);
 | 
| -
 | 
| -      @apply(--paper-toolbar);
 | 
| -    }
 | 
| -
 | 
| -    :host(.animate) {
 | 
| -      /* transition */
 | 
| -      transition: height 0.18s ease-in;
 | 
| -    }
 | 
| -
 | 
| -    :host(.medium-tall) {
 | 
| -      height: 128px;
 | 
| -    }
 | 
| -
 | 
| -    :host(.tall) {
 | 
| -      height: 192px;
 | 
| -    }
 | 
| -
 | 
| -    .toolbar-tools {
 | 
| -      position: relative;
 | 
| -      height: 64px;
 | 
| -      padding: 0 16px;
 | 
| -      pointer-events: none;
 | 
| -    }
 | 
| -
 | 
| -    /*
 | 
| -     * TODO: Where should media query breakpoints live so they can be shared between elements?
 | 
| -     */
 | 
| -
 | 
| -    @media (max-width: 639px) {
 | 
| -      :host {
 | 
| -        height: 56px;
 | 
| -      }
 | 
| -
 | 
| -      :host(.medium-tall) {
 | 
| -        height: 112px;
 | 
| -      }
 | 
| -
 | 
| -      :host(.tall) {
 | 
| -        height: 168px;
 | 
| -      }
 | 
| -
 | 
| -      .toolbar-tools {
 | 
| -        height: 56px;
 | 
| -      }
 | 
| -    }
 | 
| -
 | 
| -    #topBar {
 | 
| -      position: relative;
 | 
| -    }
 | 
| -
 | 
| -    /* middle bar */
 | 
| -    #middleBar {
 | 
| -      position: absolute;
 | 
| -      top: 0;
 | 
| -      right: 0;
 | 
| -      left: 0;
 | 
| -    }
 | 
| -
 | 
| -    :host(.tall) #middleBar,
 | 
| -    :host(.medium-tall) #middleBar {
 | 
| -      -webkit-transform: translateY(100%);
 | 
| -      transform: translateY(100%);
 | 
| -    }
 | 
| -
 | 
| -    /* bottom bar */
 | 
| -    #bottomBar {
 | 
| -      position: absolute;
 | 
| -      right: 0;
 | 
| -      bottom: 0;
 | 
| -      left: 0;
 | 
| -    }
 | 
| -
 | 
| -    /*
 | 
| -     * make elements (e.g. buttons) respond to mouse/touch events
 | 
| -     *
 | 
| -     * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
 | 
| -     * absorb events. All children must have pointer events re-enabled to work as
 | 
| -     * expected.
 | 
| -     */
 | 
| -    .toolbar-tools > ::content > *:not([disabled]) {
 | 
| -      pointer-events: auto;
 | 
| -    }
 | 
| -
 | 
| -    .toolbar-tools > ::content .title {
 | 
| -      @apply(--paper-font-title);
 | 
| -      @apply(--layout-flex);
 | 
| -
 | 
| -      pointer-events: none;
 | 
| -      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-right: 24px;
 | 
| -    }
 | 
| -
 | 
| -    .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;
 | 
| -    }
 | 
| -
 | 
| -    .toolbar-tools > ::content > .fit {
 | 
| -      position: absolute;
 | 
| -      top: auto;
 | 
| -      right: 0;
 | 
| -      bottom: 0;
 | 
| -      left: 0;
 | 
| -      width: auto;
 | 
| -      margin: 0;
 | 
| -    }
 | 
| -
 | 
| -  </style>
 | 
| -
 | 
| -  <template>
 | 
| -
 | 
| -    <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="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
 | 
| -      <content select=".bottom"></content>
 | 
| -    </div>
 | 
| -
 | 
| -  </template>
 | 
| -
 | 
| -</dom-module>
 | 
| -
 | 
| -<script>
 | 
| -
 | 
| -  (function() {
 | 
| -
 | 
| -    'use strict';
 | 
| -
 | 
| -    function classNames(obj) {
 | 
| -      var classNames = [];
 | 
| -      for (var key in obj) {
 | 
| -        if (obj.hasOwnProperty(key) && obj[key]) {
 | 
| -          classNames.push(key);
 | 
| -        }
 | 
| -      }
 | 
| -
 | 
| -      return classNames.join(' ');
 | 
| -    }
 | 
| -
 | 
| -    Polymer({
 | 
| -
 | 
| -      is: 'paper-toolbar',
 | 
| -
 | 
| -      hostAttributes: {
 | 
| -        'role': 'toolbar'
 | 
| -      },
 | 
| -
 | 
| -      properties: {
 | 
| -
 | 
| -        /**
 | 
| -         * Controls how the items are aligned horizontally when they are placed
 | 
| -         * at the bottom.
 | 
| -         * Options are `start`, `center`, `end`, `justified` and `around`.
 | 
| -         *
 | 
| -         * @attribute bottomJustify
 | 
| -         * @type string
 | 
| -         * @default ''
 | 
| -         */
 | 
| -        bottomJustify: {
 | 
| -          type: String,
 | 
| -          value: ''
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Controls how the items are aligned horizontally.
 | 
| -         * Options are `start`, `center`, `end`, `justified` and `around`.
 | 
| -         *
 | 
| -         * @attribute justify
 | 
| -         * @type string
 | 
| -         * @default ''
 | 
| -         */
 | 
| -        justify: {
 | 
| -          type: String,
 | 
| -          value: ''
 | 
| -        },
 | 
| -
 | 
| -        /**
 | 
| -         * Controls how the items are aligned horizontally when they are placed
 | 
| -         * in the middle.
 | 
| -         * Options are `start`, `center`, `end`, `justified` and `around`.
 | 
| -         *
 | 
| -         * @attribute middleJustify
 | 
| -         * @type string
 | 
| -         * @default ''
 | 
| -         */
 | 
| -        middleJustify: {
 | 
| -          type: String,
 | 
| -          value: ''
 | 
| -        }
 | 
| -
 | 
| -      },
 | 
| -
 | 
| -      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.classList && node.classList.contains('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,
 | 
| -          'horizontal': true,
 | 
| -          'layout': true,
 | 
| -          'toolbar-tools': true
 | 
| -        };
 | 
| -
 | 
| -        // If a blank string or any falsy value is given, no other class name is
 | 
| -        // added.
 | 
| -        if (barJustify) {
 | 
| -          var justifyClassName = (barJustify === 'justified') ?
 | 
| -              barJustify :
 | 
| -              barJustify + '-justified';
 | 
| -
 | 
| -          classObj[justifyClassName] = true;
 | 
| -        }
 | 
| -
 | 
| -        return classNames(classObj);
 | 
| -      }
 | 
| -
 | 
| -    });
 | 
| -
 | 
| -  }());
 | 
| -
 | 
| -</script>
 | 
| 
 |