Bug 525724 - Use CSS transitions for the tab bar overflow animation. r=vlad

2009-11-05 09:02:12 +01:00 · 2009-11-05 09:02:12 +01:00 · e4c3443b85
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@ -2923,7 +2923,7 @@
        </xul:hbox>
      </xul:stack>
    </content>
-    <implementation implements="nsITimerCallback, nsIDOMEventListener">
+    <implementation implements="nsIDOMEventListener">
      <constructor>
        <![CDATA[
          var pb2 =
@ -2964,12 +2964,6 @@
              Components.classes['@mozilla.org/preferences-service;1'].
              getService(Components.interfaces.nsIPrefBranch2);
          pb2.removeObserver("browser.tabs.closeButtons", this._prefObserver);
-
-          // Release timer to avoid reference cycles.
-          if (this._animateTimer) {
-            this._animateTimer.cancel();
-            this._animateTimer = null;
-          }
        ]]>
      </destructor>

@ -3099,33 +3093,6 @@
      <field name="_animateElement">
        this.mTabstrip._scrollButtonDown;
      </field>
-
-      <field name="_animateTimer">null</field>
-      <field name="_animateBaseOpacity">null</field>
-      <field name="_animateBaseColor">null</field>
-      <field name="_animateStep">-1</field>
-      <field name="_animateDelay">25</field>
-      <field name="_animatePercents">
-       [1.00, 0.85, 0.80, 0.75, 0.71, 0.68, 0.65, 0.62, 0.59, 0.57,
-        0.54, 0.52, 0.50, 0.47, 0.45, 0.44, 0.42, 0.40, 0.38, 0.37,
-        0.35, 0.34, 0.32, 0.31, 0.30, 0.29, 0.28, 0.27, 0.26, 0.25,
-        0.24, 0.23, 0.23, 0.22, 0.22, 0.21, 0.21, 0.21, 0.20, 0.20,
-        0.20, 0.20, 0.20, 0.20, 0.20, 0.20, 0.19, 0.19, 0.19, 0.18,
-        0.18, 0.17, 0.17, 0.16, 0.15, 0.14, 0.13, 0.11, 0.09, 0.06]
-      </field>
-
-      <method name="_stopAnimation">
-        <body><![CDATA[
-          if (this._animateStep != -1) {
-            if (this._animateTimer)
-              this._animateTimer.cancel();
-
-            this._animateStep = -1;
-            this._animateElement.style.outlineColor = "";
-            this._animateElement.style.outlineStyle = "";
-          }
-        ]]></body>
-      </method>
      
      <method name="_notifyBackgroundTab">
        <parameter name="aTab"/>
@ -3152,54 +3119,12 @@
                                                 selected.left - scrollRect.left);
          }

-          this._stopAnimation();
-
-          const DEFAULT_OPACITY = .7;
-          var self = this;
-          this._animateBaseColor =
-            window.getComputedStyle(this._animateElement, null)
-                  .outlineColor
-                  .replace(/^rgb\((.*)\)$/, "rgba($1, " + DEFAULT_OPACITY + ")")
-                  .replace(/([^, ]*)\)/, function (m0, m1) {
-                    self._animateBaseOpacity = parseFloat(m1);
-                    return "$opacity)";
-                  });
-
-          // start the flash timer
-          this._animateStep = 0;
-
-          var outlineWidth =
-            Math.ceil(Math.min(this._animateElement.clientHeight,
-                               this._animateElement.clientWidth) * .6) + "px";
-          this._animateElement.style.outlineWidth = outlineWidth;
-          this._animateElement.style.outlineOffset = "-" + outlineWidth;
-          this._animateElement.style.outlineColor = "rgba(0,0,0,0)";
-          this._animateElement.style.outlineStyle = "solid";
-
-          if (!this._animateTimer) 
-            this._animateTimer =
-              Components.classes["@mozilla.org/timer;1"]
-                        .createInstance(Components.interfaces.nsITimer);
-
-          this._animateTimer.initWithCallback(this, this._animateDelay,
-                                              this._animateTimer.TYPE_REPEATING_SLACK);
-        ]]></body>
-      </method>
-
-      <method name="notify">
-        <parameter name="aTimer"/>
-        <body><![CDATA[
-          if (!document)
-            aTimer.cancel();
-
-          var opacity = this._animateBaseOpacity * this._animatePercents[this._animateStep];
-          this._animateElement.style.outlineColor =
-            this._animateBaseColor.replace("$opacity", opacity);
-
-          if (this._animateStep < (this._animatePercents.length - 1))
-            this._animateStep++;
-          else
-            this._stopAnimation();
+          if (!this._animateElement.hasAttribute("notifybgtab")) {
+            this._animateElement.setAttribute("notifybgtab", "true");
+            setTimeout(function (ele) {
+              ele.removeAttribute("notifybgtab");
+            }, 150, this._animateElement);
+          }
        ]]></body>
      </method>
    </implementation>
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@ -1274,13 +1274,19 @@ tabpanels {
 /* Tabbrowser arrowscrollbox arrows */
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
  -moz-appearance: tab-scroll-arrow-back;
-  margin: 0px;
+  margin: 0;
 }

 .tabbrowser-arrowscrollbox > .scrollbutton-down {
  -moz-appearance: tab-scroll-arrow-forward;
-  margin: 0px;
-  outline-color: Highlight;
+  margin: 0;
+  -moz-transition: 1s -moz-box-shadow ease-out;
+  -moz-border-radius: 4px;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
+  -moz-box-shadow: 0 0 7px 5px Highlight inset;
+  -moz-transition: none;
 }

 .tabs-alltabs-button {
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@ -1657,7 +1657,12 @@ tabbrowser > tabbox > tabpanels {
 }

 .tabbrowser-arrowscrollbox > .scrollbutton-down {
-  outline-color: Highlight;
+  -moz-transition: 1s background-color ease-out;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
+  background-color: Highlight;
+  -moz-transition: none;
 }

 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr),
@ -1678,6 +1683,7 @@ tabbrowser > tabbox > tabpanels {
 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
  -moz-image-region: rect(0, 22px, 17px, 11px);
  background-color: rgba(0,0,0,0.10);
+  -moz-transition: none;
 }

 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active,
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@ -1409,7 +1409,12 @@ tabpanels {

 .tabbrowser-arrowscrollbox > .scrollbutton-down {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right.png");
-  outline-color: Highlight;
+  -moz-transition: 1s background-color ease-out;
+}
+
+.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
+  background-color: Highlight;
+  -moz-transition: none;
 }

 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl),