Roll Polymer

third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs-extracted.js

 Polymer({
       is: 'paper-tabs',
 
       behaviors: [
         Polymer.IronResizableBehavior,
         Polymer.IronMenubarBehavior
       ],
 
       properties: {
         /**
@@ skipping 25 matching lines @@
 
         /**
          * If true, tabs are scrollable and the tab width is based on the label width.
          */
         scrollable: {
           type: Boolean,
           value: false
         },
 
         /**
+         * If true, tabs expand to fit their container. This currently only applies when
+         * scrollable is true.
+         */
+        fitContainer: {
+          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.
          */
@@ skipping 108 matching lines @@
           return 'hidden';
         }
 
         if (hideThisButton) {
           return 'not-visible';
         }
 
         return '';
       },
 
-      _computeTabsContentClass: function(scrollable) {
-        return scrollable ? 'scrollable' : 'horizontal';
+      _computeTabsContentClass: function(scrollable, fitContainer) {
+        return scrollable ? 'scrollable' + (fitContainer ? ' fit-container' : '') : ' fit-container';
       },
 
       _computeSelectionBarClass: function(noBar, alignBottom) {
         if (noBar) {
           return 'hidden';
         } else if (alignBottom) {
           return 'align-bottom';
         }
 
         return '';
@@ skipping 10 matching lines @@
 
       _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);
+          this._previousTab = null;
         // See polymer/polymer#1305
         }, 1);
       },
 
       _activateHandler: function() {
         // Cancel item activations scheduled by keyboard events when any other
         // action causes an item to be activated (e.g. clicks).
         this._cancelPendingActivation();
 
         Polymer.IronMenuBehaviorImpl._activateHandler.apply(this, arguments);
@@ skipping 102 matching lines @@
       _scrollToLeft: function() {
         this._affectScroll(-this._step);
       },
 
       _scrollToRight: function() {
         this._affectScroll(this._step);
       },
 
       _tabChanged: function(tab, old) {
         if (!tab) {
+          // Remove the bar without animation.
+          this.$.selectionBar.classList.remove('expand');
+          this.$.selectionBar.classList.remove('contract');
           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
+          // Position the bar without animation.
+          this.$.selectionBar.classList.remove('expand');
+          this.$.selectionBar.classList.remove('contract');
           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
@@ skipping 34 matching lines @@
         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) + ')',
+            'translateX(' + left + '%) 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');
         }
       }
     });