Bug 1170759 - PanelUI doesn't correctly remove 'transitionend' listeners when changing the viewContainer's height r=Gijs
authorTim Taubert <ttaubert@mozilla.com>
Mon, 15 Jun 2015 13:58:19 +0200
changeset 280881 dbb2669057808e7f95d81b8a88e0c75aa0365269
parent 280880 2555d8ffbd6b9d511e98110520dceaf3fa012dc9
child 280882 a810067a6cf19401bebf59d14a27b47abfb43973
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1170759
milestone41.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1170759 - PanelUI doesn't correctly remove 'transitionend' listeners when changing the viewContainer's height r=Gijs
browser/components/customizableui/content/panelUI.xml
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -158,23 +158,17 @@
             evt.initCustomEvent("ViewHiding", true, true, viewNode);
             viewNode.dispatchEvent(evt);
 
             viewNode.removeAttribute("current");
             this._currentSubView = null;
 
             this._subViewObserver.disconnect();
 
-            this._transitioning = true;
-
-            this._viewContainer.addEventListener("transitionend", function trans() {
-              this._viewContainer.removeEventListener("transitionend", trans);
-              this._transitioning = false;
-            }.bind(this));
-            this._viewContainer.style.height = this._mainViewHeight + "px";
+            this._setViewContainerHeight(this._mainViewHeight);
 
             this.setAttribute("viewtype", "main");
           }
 
           this._shiftMainView();
         ]]></body>
       </method>
 
@@ -206,34 +200,44 @@
           //
           // All three of these actions make use of CSS transformations, so they
           // should all occur simultaneously.
           this.setAttribute("viewtype", "subview");
           this._shiftMainView(aAnchor);
 
           this._mainViewHeight = this._viewStack.clientHeight;
 
-          this._transitioning = true;
-          this._viewContainer.addEventListener("transitionend", function trans() {
-            this._viewContainer.removeEventListener("transitionend", trans);
-            this._transitioning = false;
-          }.bind(this));
-
           let newHeight = this._heightOfSubview(viewNode, this._subViews);
-          this._viewContainer.style.height = newHeight + "px";
+          this._setViewContainerHeight(newHeight);
 
           this._subViewObserver.observe(viewNode, {
             attributes: true,
             characterData: true,
             childList: true,
             subtree: true
           });
         ]]></body>
       </method>
 
+      <method name="_setViewContainerHeight">
+        <parameter name="aHeight"/>
+        <body><![CDATA[
+          let container = this._viewContainer;
+          this._transitioning = true;
+
+          let onTransitionEnd = () => {
+            container.removeEventListener("transitionend", onTransitionEnd);
+            this._transitioning = false;
+          };
+
+          container.addEventListener("transitionend", onTransitionEnd);
+          container.style.height = `${aHeight}px`;
+        ]]></body>
+      </method>
+
       <method name="_shiftMainView">
         <parameter name="aAnchor"/>
         <body><![CDATA[
           if (aAnchor) {
             // We need to find the edge of the anchor, relative to the main panel.
             // Then we need to add half the width of the anchor. This is the target
             // that we need to transition to.
             let anchorRect = aAnchor.getBoundingClientRect();