Bug 1553614 - [de-xbl] convert tabmail-close-tab-button. r=mkmelin
authorAlessandro Castellani <alessandro@thunderbird.net>
Fri, 24 May 2019 15:03:00 -0700
changeset 35691 13000cbf0633b3a34248cf310de2c4201388aa0d
parent 35690 0820221247ce8a27975477e3ad43dede079dd9c2
child 35692 166ea12f3b4bbea3f958baf85096983f5f181959
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin
bugs1553614
Bug 1553614 - [de-xbl] convert tabmail-close-tab-button. r=mkmelin
mail/base/content/tabmail.css
mail/base/content/tabmail.xml
--- a/mail/base/content/tabmail.css
+++ b/mail/base/content/tabmail.css
@@ -13,20 +13,16 @@
 .tabmail-arrowscrollbox {
   -moz-binding: url("chrome://messenger/content/tabmail.xml#tabmail-arrowscrollbox");
 }
 
 .tabs-alltabs-popup {
   -moz-binding: url("chrome://messenger/content/tabmail.xml#tabmail-alltabs-popup");
 }
 
-.tab-close-button, .tabs-closebutton {
-  -moz-binding: url("chrome://messenger/content/tabmail.xml#tabmail-close-tab-button");
-}
-
 .tab-label-container {
   overflow: hidden;
 }
 
 .tab-label-container[textoverflow] {
   mask-image: linear-gradient(to left, transparent, black 2em);
 }
 
--- a/mail/base/content/tabmail.xml
+++ b/mail/base/content/tabmail.xml
@@ -1812,21 +1812,19 @@
                     xbl:inherits="pinned,selected=visuallyselected"
                     onoverflow="this.setAttribute('textoverflow', 'true');"
                     onunderflow="this.removeAttribute('textoverflow');"
                     flex="1">
             <xul:label class="tab-text tab-label"
                        xbl:inherits="xbl:text=label,accesskey,fadein,pinned,selected"
                        role="presentation"/>
           </xul:hbox>
-          <xul:toolbarbutton anonid="close-button"
-                             xbl:inherits="fadein,pinned,selected"
-                             tabindex="-1"
-                             clickthrough="never"
-                             class="tab-close-button close-icon"/>
+          <xul:image anonid="close-button"
+                     xbl:inherits="fadein,pinned,selected=visuallyselected"
+                     class="tab-close-button close-icon"/>
         </xul:hbox>
       </xul:stack>
     </content>
 
     <implementation>
       <field name="mOverCloseButton">false</field>
       <field name="mCorrespondingMenuitem">null</field>
 
@@ -1859,16 +1857,69 @@
           this.mOverCloseButton = false;
       </handler>
       <handler event="mousedown" button="0" phase="capturing">
       <![CDATA[
         if (this.mOverCloseButton)
           event.stopPropagation();
       ]]>
       </handler>
+      <handler event="click" button="0"><![CDATA[
+        if (event.originalTarget.getAttribute("anonid") != "close-button")
+          return;
+
+        let tabbedBrowser = document.getElementById("tabmail");
+        if (this.localName == "tab") {
+          /* The only sequence in which a second click event (i.e. dblclik)
+           * can be dispatched on an in-tab close button is when it is shown
+           * after the first click (i.e. the first click event was dispatched
+           * on the tab). This happens when we show the close button only on
+           * the active tab. (bug 352021)
+           * The only sequence in which a third click event can be dispatched
+           * on an in-tab close button is when the tab was opened with a
+           * double click on the tabbar. (bug 378344)
+           * In both cases, it is most likely that the close button area has
+           * been accidentally clicked, therefore we do not close the tab.
+           */
+          if (event.detail > 1)
+            return;
+
+          tabbedBrowser.removeTabByNode(this);
+          tabbedBrowser._blockDblClick = true;
+          let tabContainer = tabbedBrowser.tabContainer;
+
+          /* XXXmano hack (see bug 343628):
+           * Since we're removing the event target, if the user
+           * double-clicks this button, the dblclick event will be dispatched
+           * with the tabbar as its event target (and explicit/originalTarget),
+           * which treats that as a mouse gesture for opening a new tab.
+           * In this context, we're manually blocking the dblclick event
+           * (see onTabBarDblClick).
+           */
+          let clickedOnce = false;
+          let enableDblClick = function enableDblClick(event) {
+            let target = event.originalTarget;
+            if (target.className == "tab-close-button")
+              target._ignoredClick = true;
+            if (!clickedOnce) {
+              clickedOnce = true;
+              return;
+            }
+            tabContainer._blockDblClick = false;
+            tabContainer.removeEventListener("click", enableDblClick, true);
+          };
+          tabContainer.addEventListener("click", enableDblClick, true);
+        } else { // "tabs"
+          tabbedBrowser.removeCurrentTab();
+        }
+      ]]></handler>
+      <handler event="dblclick" button="0" phase="capturing">
+        // for the one-close-button case
+        event.stopPropagation();
+      </handler>
     </handlers>
   </binding>
 
   <binding id="tabmail-arrowscrollbox" extends="chrome://global/content/bindings/scrollbox.xml#arrowscrollbox">
     <content>
       <xul:toolbarbutton class="scrollbutton-up"
                          xbl:inherits="orient,collapsed=notoverflowing,disabled=scrolledtostart"
                          anonid="scrollbutton-up"
@@ -1978,17 +2029,17 @@
                               style="min-width: 1px;">
             <children includes="tab"/>
           </xul:arrowscrollbox>
           <children/>
           <xul:hbox class="tabs-closebutton-box"
                     anonid="tabstrip-closebutton"
                     align="center"
                     pack="end">
-            <xul:toolbarbutton class="close-icon tabs-closebutton"/>
+            <xul:image class="close-icon tabs-closebutton"/>
           </xul:hbox>
         </xul:hbox>
       </xul:vbox>
     </content>
 
     <implementation implements="nsITimerCallback">
       <constructor>
         <![CDATA[
@@ -2662,16 +2713,70 @@
 
       <handler event="dragexit"><![CDATA[
         this._dragTime = 0;
 
         this._tabDropIndicator.collapsed = true;
         event.stopPropagation();
 
       ]]></handler>
+      <handler event="click" button="0"><![CDATA[
+        if (!event.originalTarget.classList.contains("tabs-closebutton")) {
+          return;
+        }
+
+        let tabbedBrowser = document.getElementById("tabmail");
+        if (this.localName == "tab") {
+          /* The only sequence in which a second click event (i.e. dblclik)
+           * can be dispatched on an in-tab close button is when it is shown
+           * after the first click (i.e. the first click event was dispatched
+           * on the tab). This happens when we show the close button only on
+           * the active tab. (bug 352021)
+           * The only sequence in which a third click event can be dispatched
+           * on an in-tab close button is when the tab was opened with a
+           * double click on the tabbar. (bug 378344)
+           * In both cases, it is most likely that the close button area has
+           * been accidentally clicked, therefore we do not close the tab.
+           */
+          if (event.detail > 1)
+            return;
+
+          tabbedBrowser.removeTabByNode(this);
+          tabbedBrowser._blockDblClick = true;
+          let tabContainer = tabbedBrowser.tabContainer;
+
+          /* XXXmano hack (see bug 343628):
+           * Since we're removing the event target, if the user
+           * double-clicks this button, the dblclick event will be dispatched
+           * with the tabbar as its event target (and explicit/originalTarget),
+           * which treats that as a mouse gesture for opening a new tab.
+           * In this context, we're manually blocking the dblclick event
+           * (see onTabBarDblClick).
+           */
+          let clickedOnce = false;
+          let enableDblClick = function enableDblClick(event) {
+            let target = event.originalTarget;
+            if (target.className == "tab-close-button")
+              target._ignoredClick = true;
+            if (!clickedOnce) {
+              clickedOnce = true;
+              return;
+            }
+            tabContainer._blockDblClick = false;
+            tabContainer.removeEventListener("click", enableDblClick, true);
+          };
+          tabContainer.addEventListener("click", enableDblClick, true);
+        } else { // "tabs"
+          tabbedBrowser.removeCurrentTab();
+        }
+      ]]></handler>
+      <handler event="dblclick" button="0" phase="capturing"><![CDATA[
+        // for the one-close-button case
+        event.stopPropagation();
+      ]]></handler>
     </handlers>
   </binding>
 
   <binding id="tabmail-alltabs-popup"
            extends="chrome://global/content/bindings/popup.xml#popup">
     <implementation>
       <field name="_xulWindow">
         null
@@ -2861,75 +2966,9 @@
         this._mutationObserver.disconnect();
 
         var tabcontainer = document.getElementById("tabmail").tabContainer;
         tabcontainer.arrowScrollbox.removeEventListener("scroll", this);
         tabcontainer.tabmail.removeEventListener("TabOpen", this);
       ]]></handler>
     </handlers>
   </binding>
-  <!-- close-tab-button binding
-       This binding relies on the structure of the tabmail-tabs binding.
-       Therefore it should only be used as a child of the tab or the tabs
-       element.  This binding is exposed as a pseudo-public-API so themes
-       can customize the tabbar appearance without having to be scriptable
-       (see globalBindings.xml in osx for example).
-  -->
-  <binding id="tabmail-close-tab-button"
-           extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
-    <handlers>
-      <handler event="click" button="0"><![CDATA[
-        let bindingParent = document.getBindingParent(this);
-        if (!bindingParent)
-          return;
-
-        let tabbedBrowser = document.getElementById("tabmail");
-        if (bindingParent.localName == "tab") {
-          /* The only sequence in which a second click event (i.e. dblclik)
-           * can be dispatched on an in-tab close button is when it is shown
-           * after the first click (i.e. the first click event was dispatched
-           * on the tab). This happens when we show the close button only on
-           * the active tab. (bug 352021)
-           * The only sequence in which a third click event can be dispatched
-           * on an in-tab close button is when the tab was opened with a
-           * double click on the tabbar. (bug 378344)
-           * In both cases, it is most likely that the close button area has
-           * been accidentally clicked, therefore we do not close the tab.
-           */
-          if (event.detail > 1)
-            return;
-
-          tabbedBrowser.removeTabByNode(bindingParent);
-          tabbedBrowser._blockDblClick = true;
-          let tabContainer = tabbedBrowser.tabContainer;
-
-          /* XXXmano hack (see bug 343628):
-           * Since we're removing the event target, if the user
-           * double-clicks this button, the dblclick event will be dispatched
-           * with the tabbar as its event target (and explicit/originalTarget),
-           * which treats that as a mouse gesture for opening a new tab.
-           * In this context, we're manually blocking the dblclick event
-           * (see onTabBarDblClick).
-           */
-          let clickedOnce = false;
-          let enableDblClick = function enableDblClick(event) {
-            let target = event.originalTarget;
-            if (target.className == "tab-close-button")
-              target._ignoredClick = true;
-            if (!clickedOnce) {
-              clickedOnce = true;
-              return;
-            }
-            tabContainer._blockDblClick = false;
-            tabContainer.removeEventListener("click", enableDblClick, true);
-          };
-          tabContainer.addEventListener("click", enableDblClick, true);
-        } else { // "tabs"
-          tabbedBrowser.removeCurrentTab();
-        }
-      ]]></handler>
-      <handler event="dblclick" button="0" phase="capturing">
-        // for the one-close-button case
-        event.stopPropagation();
-      </handler>
-    </handlers>
-  </binding>
 </bindings>