Bug 1422934 - Make the tab close button an image, and remove the extends from its binding. r=Gijs draft
authorIan Moody <moz-ian@perix.co.uk>
Thu, 11 Jan 2018 16:12:07 +0000
changeset 719214 1f6ae93338948928c0b23232cc057fb13b2d3a78
parent 713998 5b1fdaa14d35ddf1a638c9422786ede707cacf1f
child 719215 16f1b1505ff36aff5febdd7c6af381634e0c6340
push id95180
push usermoz-ian@perix.co.uk
push dateThu, 11 Jan 2018 16:44:46 +0000
reviewersGijs
bugs1422934
milestone59.0a1
Bug 1422934 - Make the tab close button an image, and remove the extends from its binding. r=Gijs MozReview-Commit-ID: HF0Rqeq8fh8
accessible/tests/mochitest/tree/test_tabbrowser.xul
browser/base/content/tabbrowser.xml
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
testing/firefox-ui/tests/puppeteer/test_tabbar.py
--- a/accessible/tests/mochitest/tree/test_tabbrowser.xul
+++ b/accessible/tests/mochitest/tree/test_tabbrowser.xul
@@ -110,37 +110,27 @@
             {
               // xul:tab ("about:license")
               role: ROLE_PAGETAB,
               children: [
                 {
                   // xul:text, i.e. the tab label text
                   role: ROLE_TEXT_LEAF,
                   children: []
-                },
-                {
-                  // xul:toolbarbutton ("Close Tab")
-                  role: ROLE_PUSHBUTTON,
-                  children: []
                 }
               ]
             },
             {
               // tab ("about:mozilla")
               role: ROLE_PAGETAB,
               children: [
                 {
                   // xul:text, i.e. the tab label text
                   role: ROLE_TEXT_LEAF,
                   children: []
-                },
-                {
-                  // xul:toolbarbutton ("Close Tab")
-                  role: ROLE_PUSHBUTTON,
-                  children: []
                 }
               ]
             },
             {
               // xul:toolbarbutton ("Open a new tab")
               role: ROLE_PUSHBUTTON,
               children: newTabChildren
             }
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -7733,18 +7733,17 @@
     </handlers>
   </binding>
 
   <!-- close-tab-button binding
        This binding relies on the structure of the tabbrowser binding.
        Therefore it should only be used as a child of the tab or the tabs
        element (in both cases, when they are anonymous nodes of <tabbrowser>).
   -->
-  <binding id="tabbrowser-close-tab-button"
-           extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image">
+  <binding id="tabbrowser-close-tab-button">
     <handlers>
       <handler event="click" button="0"><![CDATA[
         var bindingParent = document.getBindingParent(this);
         var tabContainer = bindingParent.parentNode;
         tabContainer.tabbrowser.removeTab(bindingParent, {animate: true,
                 byMouse: event.mozInputSource == MouseEvent.MOZ_SOURCE_MOUSE});
         // This enables double-click protection for the tab container
         // (see tabbrowser-tabs 'click' handler).
@@ -7811,19 +7810,20 @@
             <xul:label class="tab-text tab-label"
                        xbl:inherits="xbl:text=label,accesskey,fadein,pinned,selected=visuallyselected,attention"
                        role="presentation"/>
           </xul:hbox>
           <xul:image xbl:inherits="soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked"
                      anonid="soundplaying-icon"
                      class="tab-icon-sound"
                      role="presentation"/>
-          <xul:toolbarbutton anonid="close-button"
-                             xbl:inherits="fadein,pinned,selected=visuallyselected"
-                             class="tab-close-button close-icon"/>
+          <xul:image anonid="close-button"
+                     xbl:inherits="fadein,pinned,selected=visuallyselected"
+                     class="tab-close-button close-icon"
+                     role="presentation"/>
         </xul:hbox>
       </xul:stack>
     </content>
 
     <implementation>
       <constructor><![CDATA[
         if (!("_lastAccessed" in this)) {
           this.updateLastAccessed();
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -841,30 +841,16 @@ html|span.ac-emphasize-text-url {
 
 @media (min-resolution: 2dppx) {
   .tab-drop-indicator {
     list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png);
     width: 12px;
   }
 }
 
-/**
- * In-tab close button
- */
-
-.tab-close-button > .toolbarbutton-icon {
-  margin-inline-end: 0px !important;
-}
-
-.tab-close-button {
-  border: none !important;
-  background: none;
-  cursor: default;
-}
-
 /* Bookmarks toolbar */
 #PlacesToolbarDropIndicator {
   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
 }
 
 /* Bookmark drag and drop styles */
 
 .bookmark-item[dragover-into="true"] {
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -355,17 +355,16 @@ tabbrowser {
 
 .tab-label {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
 .tab-close-button {
   margin-inline-end: -2px;
-  padding: 0;
   -moz-context-properties: fill, fill-opacity, stroke-opacity;
   stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 :root[uidensity=touch] .tab-close-button {
   margin-inline-end: -@horizontalTabPadding@;
   padding: 10px calc(@horizontalTabPadding@ - 2px);
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -784,22 +784,16 @@ html|span.ac-emphasize-text-url {
 
 /* Tab DnD indicator */
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -9px;
   z-index: 3;
 }
 
-/* Tab close button */
-.tab-close-button {
-  -moz-appearance: none;
-  border: none;
-}
-
 /* All tabs menupopup */
 
 .alltabs-item[selected="true"] {
   font-weight: bold;
 }
 
 /* Bookmarks toolbar */
 #PlacesToolbarDropIndicator {
--- a/testing/firefox-ui/tests/puppeteer/test_tabbar.py
+++ b/testing/firefox-ui/tests/puppeteer/test_tabbar.py
@@ -123,17 +123,17 @@ class TestTab(PuppeteerMixin, Marionette
             super(TestTab, self).tearDown()
 
     def test_basic(self):
         tab = self.browser.tabbar.tabs[0]
 
         self.assertEqual(tab.window, self.browser)
 
         self.assertEqual(tab.tab_element.get_property('localName'), 'tab')
-        self.assertEqual(tab.close_button.get_property('localName'), 'toolbarbutton')
+        self.assertEqual(tab.close_button.get_property('localName'), 'image')
 
     def test_certificate(self):
         url = self.marionette.absolute_url('layout/mozilla.html')
 
         with self.marionette.using_context(self.marionette.CONTEXT_CONTENT):
             self.marionette.navigate(url)
         with self.assertRaises(NoCertificateError):
             self.browser.tabbar.tabs[0].certificate