| Index: third_party/polymer/v1_0/components/paper-tabs/paper-tabs.html
 | 
| diff --git a/third_party/polymer/v1_0/components/paper-tabs/paper-tabs.html b/third_party/polymer/v1_0/components/paper-tabs/paper-tabs.html
 | 
| deleted file mode 100644
 | 
| index dbb068394836b7cfd42c14c7d600042f0688007d..0000000000000000000000000000000000000000
 | 
| --- a/third_party/polymer/v1_0/components/paper-tabs/paper-tabs.html
 | 
| +++ /dev/null
 | 
| @@ -1,486 +0,0 @@
 | 
| -<!--
 | 
| -@license
 | 
| -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="../iron-flex-layout/iron-flex-layout.html">
 | 
| -<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
 | 
| -<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 | 
| -<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
 | 
| -<link rel="import" href="../iron-icon/iron-icon.html">
 | 
| -<link rel="import" href="../paper-icon-button/paper-icon-button.html">
 | 
| -<link rel="import" href="../paper-styles/color.html">
 | 
| -<link rel="import" href="paper-tabs-icons.html">
 | 
| -<link rel="import" href="paper-tab.html">
 | 
| -
 | 
| -<!--
 | 
| -`paper-tabs` makes it easy to explore and switch between different views or functional aspects of
 | 
| -an app, or to browse categorized data sets.
 | 
| -
 | 
| -Use `selected` property to get or set the selected tab.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-tabs selected="0">
 | 
| -      <paper-tab>TAB 1</paper-tab>
 | 
| -      <paper-tab>TAB 2</paper-tab>
 | 
| -      <paper-tab>TAB 3</paper-tab>
 | 
| -    </paper-tabs>
 | 
| -
 | 
| -See <a href="#paper-tab">paper-tab</a> for more information about
 | 
| -`paper-tab`.
 | 
| -
 | 
| -A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
 | 
| -between different views.
 | 
| -
 | 
| -    <paper-tabs selected="{{selected}}">
 | 
| -      <paper-tab>Tab 1</paper-tab>
 | 
| -      <paper-tab>Tab 2</paper-tab>
 | 
| -      <paper-tab>Tab 3</paper-tab>
 | 
| -    </paper-tabs>
 | 
| -
 | 
| -    <iron-pages selected="{{selected}}">
 | 
| -      <div>Page 1</div>
 | 
| -      <div>Page 2</div>
 | 
| -      <div>Page 3</div>
 | 
| -    </iron-pages>
 | 
| -
 | 
| -
 | 
| -To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
 | 
| -element in `paper-tab`.
 | 
| -
 | 
| -Example:
 | 
| -
 | 
| -    <paper-tabs selected="0">
 | 
| -      <paper-tab link>
 | 
| -        <a href="#link1" class="horizontal center-center layout">TAB ONE</a>
 | 
| -      </paper-tab>
 | 
| -      <paper-tab link>
 | 
| -        <a href="#link2" class="horizontal center-center layout">TAB TWO</a>
 | 
| -      </paper-tab>
 | 
| -      <paper-tab link>
 | 
| -        <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
 | 
| -      </paper-tab>
 | 
| -    </paper-tabs>
 | 
| -
 | 
| -### Styling
 | 
| -
 | 
| -The following custom properties and mixins are available for styling:
 | 
| -
 | 
| -Custom property | Description | Default
 | 
| -----------------|-------------|----------
 | 
| -`--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
 | 
| -`--paper-tabs` | Mixin applied to the tabs | `{}`
 | 
| -
 | 
| -@hero hero.svg
 | 
| -@demo demo/index.html
 | 
| --->
 | 
| -
 | 
| -<dom-module id="paper-tabs">
 | 
| -
 | 
| -  <style>
 | 
| -
 | 
| -    :host {
 | 
| -      @apply(--layout);
 | 
| -      @apply(--layout-center);
 | 
| -
 | 
| -      height: 48px;
 | 
| -      font-size: 14px;
 | 
| -      font-weight: 500;
 | 
| -      overflow: hidden;
 | 
| -      -webkit-user-select: none;
 | 
| -      -moz-user-select: none;
 | 
| -      -ms-user-select: none;
 | 
| -      user-select: none;
 | 
| -      -webkit-tap-highlight-color: rgba(0,0,0,0);
 | 
| -
 | 
| -      @apply(--paper-tabs);
 | 
| -    }
 | 
| -
 | 
| -    #tabsContainer {
 | 
| -      position: relative;
 | 
| -      height: 100%;
 | 
| -      white-space: nowrap;
 | 
| -      overflow: hidden;
 | 
| -    }
 | 
| -
 | 
| -    #tabsContent {
 | 
| -      height: 100%;
 | 
| -    }
 | 
| -
 | 
| -    #tabsContent.scrollable {
 | 
| -      position: absolute;
 | 
| -      white-space: nowrap;
 | 
| -    }
 | 
| -
 | 
| -    .hidden {
 | 
| -      display: none;
 | 
| -    }
 | 
| -
 | 
| -    .not-visible {
 | 
| -      opacity: 0;
 | 
| -    }
 | 
| -
 | 
| -    paper-icon-button {
 | 
| -      width: 24px;
 | 
| -      padding: 16px;
 | 
| -    }
 | 
| -
 | 
| -    #selectionBar {
 | 
| -      position: absolute;
 | 
| -      height: 2px;
 | 
| -      bottom: 0;
 | 
| -      left: 0;
 | 
| -      right: 0;
 | 
| -      background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
 | 
| -      -webkit-transform-origin: left center;
 | 
| -      transform-origin: left center;
 | 
| -      -webkit-transform: scale(0);
 | 
| -      transform: scale(0);
 | 
| -      transition: -webkit-transform;
 | 
| -      transition: transform;
 | 
| -
 | 
| -      @apply(--paper-tabs-selection-bar);
 | 
| -    }
 | 
| -
 | 
| -    #selectionBar.align-bottom {
 | 
| -      top: 0;
 | 
| -      bottom: auto;
 | 
| -    }
 | 
| -
 | 
| -    #selectionBar.expand {
 | 
| -      transition-duration: 0.15s;
 | 
| -      transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
 | 
| -    }
 | 
| -
 | 
| -    #selectionBar.contract {
 | 
| -      transition-duration: 0.18s;
 | 
| -      transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
 | 
| -    }
 | 
| -
 | 
| -    #tabsContent > ::content > *:not(#selectionBar) {
 | 
| -      height: 100%;
 | 
| -    }
 | 
| -
 | 
| -  </style>
 | 
| -
 | 
| -  <template>
 | 
| -
 | 
| -    <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown"></paper-icon-button>
 | 
| -
 | 
| -    <div id="tabsContainer" class="flex" on-scroll="_scroll">
 | 
| -
 | 
| -      <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
 | 
| -
 | 
| -        <content select="*"></content>
 | 
| -
 | 
| -        <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]"
 | 
| -            on-transitionend="_onBarTransitionEnd"></div>
 | 
| -
 | 
| -      </div>
 | 
| -
 | 
| -    </div>
 | 
| -
 | 
| -    <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown"></paper-icon-button>
 | 
| -
 | 
| -  </template>
 | 
| -
 | 
| -</dom-module>
 | 
| -
 | 
| -<script>
 | 
| -
 | 
| -  Polymer({
 | 
| -
 | 
| -    is: 'paper-tabs',
 | 
| -
 | 
| -    behaviors: [
 | 
| -      Polymer.IronResizableBehavior,
 | 
| -      Polymer.IronMenubarBehavior
 | 
| -    ],
 | 
| -
 | 
| -    properties: {
 | 
| -
 | 
| -      /**
 | 
| -       * If true, ink ripple effect is disabled.
 | 
| -       */
 | 
| -      noink: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, the bottom bar to indicate the selected tab will not be shown.
 | 
| -       */
 | 
| -      noBar: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, the slide effect for the bottom bar is disabled.
 | 
| -       */
 | 
| -      noSlide: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, tabs are scrollable and the tab width is based on the label width.
 | 
| -       */
 | 
| -      scrollable: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, dragging on the tabs to scroll is disabled.
 | 
| -       */
 | 
| -      disableDrag: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs.
 | 
| -       */
 | 
| -      hideScrollButtons: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * If true, the tabs are aligned to bottom (the selection bar appears at the top).
 | 
| -       */
 | 
| -      alignBottom: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      /**
 | 
| -       * Gets or sets the selected element. The default is to use the index of the item.
 | 
| -       */
 | 
| -      selected: {
 | 
| -        type: String,
 | 
| -        notify: true
 | 
| -      },
 | 
| -
 | 
| -      selectable: {
 | 
| -        type: String,
 | 
| -        value: 'paper-tab'
 | 
| -      },
 | 
| -
 | 
| -      _step: {
 | 
| -        type: Number,
 | 
| -        value: 10
 | 
| -      },
 | 
| -
 | 
| -      _holdDelay: {
 | 
| -        type: Number,
 | 
| -        value: 1
 | 
| -      },
 | 
| -
 | 
| -      _leftHidden: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      _rightHidden: {
 | 
| -        type: Boolean,
 | 
| -        value: false
 | 
| -      },
 | 
| -
 | 
| -      _previousTab: {
 | 
| -        type: Object
 | 
| -      }
 | 
| -    },
 | 
| -
 | 
| -    hostAttributes: {
 | 
| -      role: 'tablist'
 | 
| -    },
 | 
| -
 | 
| -    listeners: {
 | 
| -      'iron-resize': '_onResize',
 | 
| -      'iron-select': '_onIronSelect',
 | 
| -      'iron-deselect': '_onIronDeselect'
 | 
| -    },
 | 
| -
 | 
| -    _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) {
 | 
| -      if (!scrollable || hideScrollButtons) {
 | 
| -        return 'hidden';
 | 
| -      }
 | 
| -
 | 
| -      if (hideThisButton) {
 | 
| -        return 'not-visible';
 | 
| -      }
 | 
| -
 | 
| -      return '';
 | 
| -    },
 | 
| -
 | 
| -    _computeTabsContentClass: function(scrollable) {
 | 
| -      return scrollable ? 'scrollable' : 'horizontal layout';
 | 
| -    },
 | 
| -
 | 
| -    _computeSelectionBarClass: function(noBar, alignBottom) {
 | 
| -      if (noBar) {
 | 
| -        return 'hidden';
 | 
| -      } else if (alignBottom) {
 | 
| -        return 'align-bottom';
 | 
| -      }
 | 
| -    },
 | 
| -
 | 
| -    // TODO(cdata): Add `track` response back in when gesture lands.
 | 
| -
 | 
| -    _onResize: function() {
 | 
| -      this.debounce('_onResize', function() {
 | 
| -        this._scroll();
 | 
| -        this._tabChanged(this.selectedItem);
 | 
| -      }, 10);
 | 
| -    },
 | 
| -
 | 
| -    _onIronSelect: function(event) {
 | 
| -      this._tabChanged(event.detail.item, this._previousTab);
 | 
| -      this._previousTab = event.detail.item;
 | 
| -      this.cancelDebouncer('tab-changed');
 | 
| -    },
 | 
| -
 | 
| -    _onIronDeselect: function(event) {
 | 
| -      this.debounce('tab-changed', function() {
 | 
| -        this._tabChanged(null, this._previousTab);
 | 
| -      // See polymer/polymer#1305
 | 
| -      }, 1);
 | 
| -    },
 | 
| -
 | 
| -    get _tabContainerScrollSize () {
 | 
| -      return Math.max(
 | 
| -        0,
 | 
| -        this.$.tabsContainer.scrollWidth -
 | 
| -          this.$.tabsContainer.offsetWidth
 | 
| -      );
 | 
| -    },
 | 
| -
 | 
| -    _scroll: function() {
 | 
| -      var scrollLeft;
 | 
| -
 | 
| -      if (!this.scrollable) {
 | 
| -        return;
 | 
| -      }
 | 
| -
 | 
| -      scrollLeft = this.$.tabsContainer.scrollLeft;
 | 
| -
 | 
| -      this._leftHidden = scrollLeft === 0;
 | 
| -      this._rightHidden = scrollLeft === this._tabContainerScrollSize;
 | 
| -    },
 | 
| -
 | 
| -    _onLeftScrollButtonDown: function() {
 | 
| -      this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay);
 | 
| -    },
 | 
| -
 | 
| -    _onRightScrollButtonDown: function() {
 | 
| -      this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay);
 | 
| -    },
 | 
| -
 | 
| -    _onScrollButtonUp: function() {
 | 
| -      clearInterval(this._holdJob);
 | 
| -      this._holdJob = null;
 | 
| -    },
 | 
| -
 | 
| -    _scrollToLeft: function() {
 | 
| -      this.$.tabsContainer.scrollLeft -= this._step;
 | 
| -    },
 | 
| -
 | 
| -    _scrollToRight: function() {
 | 
| -      this.$.tabsContainer.scrollLeft += this._step;
 | 
| -    },
 | 
| -
 | 
| -    _tabChanged: function(tab, old) {
 | 
| -      if (!tab) {
 | 
| -        this._positionBar(0, 0);
 | 
| -        return;
 | 
| -      }
 | 
| -
 | 
| -      var r = this.$.tabsContent.getBoundingClientRect();
 | 
| -      var w = r.width;
 | 
| -      var tabRect = tab.getBoundingClientRect();
 | 
| -      var tabOffsetLeft = tabRect.left - r.left;
 | 
| -
 | 
| -      this._pos = {
 | 
| -        width: this._calcPercent(tabRect.width, w),
 | 
| -        left: this._calcPercent(tabOffsetLeft, w)
 | 
| -      };
 | 
| -
 | 
| -      if (this.noSlide || old == null) {
 | 
| -        // position bar directly without animation
 | 
| -        this._positionBar(this._pos.width, this._pos.left);
 | 
| -        return;
 | 
| -      }
 | 
| -
 | 
| -      var oldRect = old.getBoundingClientRect();
 | 
| -      var oldIndex = this.items.indexOf(old);
 | 
| -      var index = this.items.indexOf(tab);
 | 
| -      var m = 5;
 | 
| -
 | 
| -      // bar animation: expand
 | 
| -      this.$.selectionBar.classList.add('expand');
 | 
| -
 | 
| -      if (oldIndex < index) {
 | 
| -        this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m,
 | 
| -            this._left);
 | 
| -      } else {
 | 
| -        this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m,
 | 
| -            this._calcPercent(tabOffsetLeft, w) + m);
 | 
| -      }
 | 
| -
 | 
| -      if (this.scrollable) {
 | 
| -        this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft);
 | 
| -      }
 | 
| -    },
 | 
| -
 | 
| -    _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) {
 | 
| -      var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft;
 | 
| -      if (l < 0) {
 | 
| -        this.$.tabsContainer.scrollLeft += l;
 | 
| -      } else {
 | 
| -        l += (tabWidth - this.$.tabsContainer.offsetWidth);
 | 
| -        if (l > 0) {
 | 
| -          this.$.tabsContainer.scrollLeft += l;
 | 
| -        }
 | 
| -      }
 | 
| -    },
 | 
| -
 | 
| -    _calcPercent: function(w, w0) {
 | 
| -      return 100 * w / w0;
 | 
| -    },
 | 
| -
 | 
| -    _positionBar: function(width, left) {
 | 
| -      width = width || 0;
 | 
| -      left = left || 0;
 | 
| -
 | 
| -      this._width = width;
 | 
| -      this._left = left;
 | 
| -      this.transform(
 | 
| -          'translate3d(' + left + '%, 0, 0) scaleX(' + (width / 100) + ')',
 | 
| -          this.$.selectionBar);
 | 
| -    },
 | 
| -
 | 
| -    _onBarTransitionEnd: function(e) {
 | 
| -      var cl = this.$.selectionBar.classList;
 | 
| -      // bar animation: expand -> contract
 | 
| -      if (cl.contains('expand')) {
 | 
| -        cl.remove('expand');
 | 
| -        cl.add('contract');
 | 
| -        this._positionBar(this._pos.width, this._pos.left);
 | 
| -      // bar animation done
 | 
| -      } else if (cl.contains('contract')) {
 | 
| -        cl.remove('contract');
 | 
| -      }
 | 
| -    }
 | 
| -
 | 
| -  });
 | 
| -
 | 
| -</script>
 | 
| 
 |