Devtools UI: Do not animate tab slider on load and during dragging

Source/devtools/front_end/ui/TabbedPane.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 24 matching lines @@
 WebInspector.TabbedPane = function()
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("ui/tabbedPane.css");
     this.element.classList.add("tabbed-pane");
     this.contentElement.classList.add("tabbed-pane-shadow");
     this.contentElement.tabIndex = -1;
     this._headerElement = this.contentElement.createChild("div", "tabbed-pane-header toolbar-colors");
     this._headerElement.createChild("content").select = ".tabbed-pane-header-before";
     this._headerContentsElement = this._headerElement.createChild("div", "tabbed-pane-header-contents");
-    this._tabSlider = this._headerContentsElement.createChild("div", "tabbed-pane-tab-slider");
+    this._tabSlider = createElementWithClass("div", "tabbed-pane-tab-slider");
     this._headerElement.createChild("content").select = ".tabbed-pane-header-after";
     this._tabsElement = this._headerContentsElement.createChild("div", "tabbed-pane-header-tabs");
     this._contentElement = this.contentElement.createChild("div", "tabbed-pane-content");
     this._contentElement.createChild("content");
     /** @type {!Array.<!WebInspector.TabbedPaneTab>} */
     this._tabs = [];
     /** @type {!Array.<!WebInspector.TabbedPaneTab>} */
     this._tabsHistory = [];
     /** @type {!Object.<string, !WebInspector.TabbedPaneTab>} */
     this._tabsById = {};
@@ skipping 677 matching lines @@
      */
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
         tab.view.show(this.element);
         this._updateTabSlider();
     },
 
     _updateTabSlider: function()
     {
-        if (!this._currentTab)
-            return;
-        if (!this._sliderEnabled)
+        if (!this._currentTab || !this._sliderEnabled)
             return;
         var left = 0;
         for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i] && this._tabs[i]._shown; i++)
             left += this._tabs[i]._measuredWidth;
         var sliderWidth = this._currentTab._shown ? this._currentTab._measuredWidth : this._dropDownButton.offsetWidth;
         this._tabSlider.style.transform = "translateX(" + left + "px) scaleY(0.75)";
         this._tabSlider.style.width = sliderWidth + "px";
+
+        if (this._tabSlider.parentElement !== this._headerContentsElement)
+            this._headerContentsElement.appendChild(this._tabSlider);
     },
 
     /**
      * @param {!WebInspector.TabbedPaneTab} tab
      */
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
         tab.view.detach();
     },
@@ skipping 406 matching lines @@
             this._tabElement.style.setProperty("left", "0px");
             return;
         }
         if (!this._tabElement.nextSibling && event.pageX - this._dragStartX > 0) {
             this._tabElement.style.setProperty("left", "0px");
             return;
         }
 
         this._tabElement.classList.add("dragging");
         this._tabElement.style.setProperty("left", (event.pageX - this._dragStartX) + "px");
-        this._tabbedPane._updateTabSlider();
+        this._tabbedPane._tabSlider.remove();
     },
 
     /**
      * @param {!Event} event
      */
     _endTabDragging: function(event)
     {
         this._tabElement.classList.remove("dragging");
         this._tabElement.style.removeProperty("left");
         delete this._dragStartX;
@@ skipping 117 matching lines @@
         {
             var view = /** @type {!WebInspector.Widget} */ (object);
             delete this._promiseForId[id];
             this._views.set(id, view);
             if (this._viewCallback && view)
                 this._viewCallback(id, view);
             return view;
         }
     }
 }