Bug 1602230 - Use an html:label with textContent instead of xul:label with [value] for toolbarbutton-badges r=Gijs
authorBrian Grinstead <bgrinstead@mozilla.com>
Wed, 15 Jan 2020 10:49:04 +0000
changeset 510359 90cf7c4f4474f7e55d80f7e906be2d2919e7a41b
parent 510358 d48d8dbcbbea2df29aa6600c6688c0c108f21189
child 510360 e7f80b0307ea5e7cd146f726dea501e0241e189a
push id37020
push userccoroiu@mozilla.com
push dateWed, 15 Jan 2020 21:36:21 +0000
treeherdermozilla-central@c35bb210b8ae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1602230
milestone74.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 1602230 - Use an html:label with textContent instead of xul:label with [value] for toolbarbutton-badges r=Gijs This both allows proper CSS sizing (it respects max-width), and allows for hidden overflow for long badges. Using xul:label with textContent fixes the former but doesn't support the latter, so an html:label is used instead. Differential Revision: https://phabricator.services.mozilla.com/D57652
browser/components/extensions/test/browser/browser_ext_browserAction_context.js
toolkit/content/widgets/toolbarbutton.js
toolkit/content/xul.css
toolkit/themes/linux/global/toolbarbutton.css
toolkit/themes/osx/global/toolbarbutton.css
toolkit/themes/windows/global/toolbarbutton.css
--- a/browser/components/extensions/test/browser/browser_ext_browserAction_context.js
+++ b/browser/components/extensions/test/browser/browser_ext_browserAction_context.js
@@ -515,29 +515,29 @@ add_task(async function testBadgeColorPe
     observer.observe(badge, { attributes: true, attributeFilter: ["style"] });
   });
 
   extension.sendMessage("setBadgeText", { text: "hi" });
   extension.sendMessage("setBadgeBackgroundColor", { color: [0, 255, 0, 255] });
 
   await badgeChanged;
 
-  is(badge.value, "hi", "badge text is set in first window");
+  is(badge.textContent, "hi", "badge text is set in first window");
   is(
     badge.style.backgroundColor,
     "rgb(0, 255, 0)",
     "badge color is set in first window"
   );
 
   let windowOpenedPromise = BrowserTestUtils.waitForNewWindow();
   let win = OpenBrowserWindow();
   await windowOpenedPromise;
 
   badge = getBadgeForWindow(win);
-  is(badge.value, "hi", "badge text is set in new window");
+  is(badge.textContent, "hi", "badge text is set in new window");
   is(
     badge.style.backgroundColor,
     "rgb(0, 255, 0)",
     "badge color is set in new window"
   );
 
   await BrowserTestUtils.closeWindow(win);
   await extension.unload();
--- a/toolkit/content/widgets/toolbarbutton.js
+++ b/toolkit/content/widgets/toolbarbutton.js
@@ -34,17 +34,17 @@
     static get inheritedAttributes() {
       return {
         ".toolbarbutton-icon":
           "validate,src=image,label,type,consumeanchor,triggeringprincipal=iconloadingprincipal",
         ".toolbarbutton-text": "value=label,accesskey,crop,dragover-top,wrap",
         ".toolbarbutton-multiline-text": "text=label,accesskey,wrap",
         ".toolbarbutton-menu-dropmarker": "disabled,label",
 
-        ".toolbarbutton-badge": "value=badge,style=badgeStyle",
+        ".toolbarbutton-badge": "text=badge,style=badgeStyle",
       };
     }
 
     static get fragment() {
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
         <image class="toolbarbutton-icon"></image>
         <label class="toolbarbutton-text" crop="right" flex="1"></label>
@@ -56,17 +56,17 @@
       return frag;
     }
 
     static get badgedFragment() {
       let frag = document.importNode(
         MozXULElement.parseXULToFragment(`
         <stack class="toolbarbutton-badge-stack">
           <image class="toolbarbutton-icon"/>
-          <label class="toolbarbutton-badge" crop="none"/>
+          <html:label class="toolbarbutton-badge"/>
         </stack>
         <label class="toolbarbutton-text" crop="right" flex="1"/>
         <label class="toolbarbutton-multiline-text" flex="1"/>
         <dropmarker anonid="dropmarker" type="menu"
                     class="toolbarbutton-menu-dropmarker"/>`),
         true
       );
       Object.defineProperty(this, "badgedFragment", { value: frag });
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -114,27 +114,23 @@ label.text-link, label[onclick] {
 }
 
 label html|span.accesskey {
   text-decoration: underline;
 }
 
 /********** toolbarbutton **********/
 
-.toolbarbutton-badge:not([value]),
-.toolbarbutton-badge[value=""] {
-  display: none;
-}
-
 toolbarbutton:not([type="menu"]) > .toolbarbutton-menu-dropmarker,
 toolbar[mode="icons"] .toolbarbutton-text,
 toolbar[mode="icons"] .toolbarbutton-multiline-text,
 toolbar[mode="text"] .toolbarbutton-icon,
 .toolbarbutton-multiline-text:not([wrap="true"]),
-.toolbarbutton-text[wrap="true"] {
+.toolbarbutton-text[wrap="true"],
+html|label.toolbarbutton-badge:empty {
   display: none;
 }
 
 /******** browser, editor, iframe ********/
 
 browser,
 editor,
 iframe {
--- a/toolkit/themes/linux/global/toolbarbutton.css
+++ b/toolkit/themes/linux/global/toolbarbutton.css
@@ -1,18 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== toolbarbutton.css =====================================================
   == Styles used by the XUL button element.
   ======================================================================= */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
 /* ::::: toolbarbutton ::::: */
 
 toolbarbutton {
   -moz-appearance: toolbarbutton;
   -moz-box-align: center;
   -moz-box-pack: center;
   margin: 0;
   padding: 3px;
@@ -59,26 +57,28 @@ toolbarbutton:-moz-lwtheme:not(:hover):n
 }
 
 /* ::::: toolbarbutton badged ::::: */
 .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
   margin-inline-end: 0;
 }
 
 .toolbarbutton-badge {
+  box-sizing: border-box;
+  overflow: hidden;
   background-color: #d90000;
   font-size: 10px;
   padding: 0 2px 1px;
   color: #fff;
   text-shadow: none;
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
               0 -1px 0 hsla(0, 0%, 0%, .1) inset,
               0 1px 0 hsla(206, 50%, 10%, .2);
   margin: -6px 0 0 !important;
   margin-inline-end: -8px !important;
   min-width: 14px;
-  max-width: 28px;
+  max-width: 24px;
   line-height: 10px;
   text-align: center;
   align-self: start;
   justify-self: end;
 }
--- a/toolkit/themes/osx/global/toolbarbutton.css
+++ b/toolkit/themes/osx/global/toolbarbutton.css
@@ -1,14 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
 toolbarbutton {
   -moz-box-align: center;
   -moz-box-pack: center;
   margin: 0 2px;
   padding: 3px 2px;
   background-color: transparent;
 }
 
@@ -32,29 +30,31 @@ toolbarbutton[disabled="true"] {
   fill: currentColor;
   padding-inline-start: 2px;
   width: auto;
 }
 
 /* ::::: toolbarbutton badged ::::: */
 
 .toolbarbutton-badge {
+  box-sizing: border-box;
+  overflow: hidden;
   background-color: #d90000;
   font-size: 9px;
   padding: 1px 2px;
   color: #fff;
   text-shadow: none;
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
               0 -1px 0 hsla(0, 0%, 0%, .1) inset,
               0 1px 0 hsla(206, 50%, 10%, .2);
   margin: -6px 0 0 !important;
   margin-inline-end: -6px !important;
   min-width: 14px;
-  max-width: 28px;
+  max-width: 24px;
   line-height: 10px;
   text-align: center;
   align-self: start;
   justify-self: end;
 }
 
 toolbar[mode="icons"] > *|* > .toolbarbutton-badge {
   margin-inline-end: -10px !important;
--- a/toolkit/themes/windows/global/toolbarbutton.css
+++ b/toolkit/themes/windows/global/toolbarbutton.css
@@ -1,18 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* ===== toolbarbutton.css =====================================================
   == Styles used by the XUL button element.
   ======================================================================= */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
 /* ::::: toolbarbutton ::::: */
 
 toolbarbutton {
   -moz-appearance: toolbarbutton;
   -moz-box-align: center;
   -moz-box-pack: center;
   margin: 0;
   padding: 3px;
@@ -73,27 +71,29 @@ toolbarbutton[disabled="true"] {
 
 /* ::::: toolbarbutton badged ::::: */
 
 .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
   margin-inline-end: 0;
 }
 
 .toolbarbutton-badge {
+  box-sizing: border-box;
+  overflow: hidden;
   background-color: #d90000;
   font-size: 10px;
   font-weight: bold;
   padding: 0 2px 1px;
   color: #fff;
   text-shadow: none;
   border-radius: 2px;
   box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
               0 -1px 0 hsla(0, 0%, 0%, .1) inset,
               0 1px 0 hsla(206, 50%, 10%, .2);
   margin: -6px 0 0 !important;
   margin-inline-end: -8px !important;
   min-width: 14px;
-  max-width: 28px;
+  max-width: 24px;
   line-height: 10px;
   text-align: center;
   align-self: start;
   justify-self: end;
 }