--- a/browser/base/content/test/popupNotifications/head.js
+++ b/browser/base/content/test/popupNotifications/head.js
@@ -258,30 +258,26 @@ function onPopupEvent(eventName, callbac
PopupNotifications.panel.addEventListener(eventName, listener, false);
}
function triggerMainCommand(popup) {
let notifications = popup.childNodes;
ok(notifications.length > 0, "at least one notification displayed");
let notification = notifications[0];
info("Triggering main command for notification " + notification.id);
- // 20, 10 so that the inner button is hit
- EventUtils.synthesizeMouse(notification.button, 20, 10, {});
+ EventUtils.synthesizeMouseAtCenter(notification.button, {});
}
function triggerSecondaryCommand(popup, index) {
let notifications = popup.childNodes;
ok(notifications.length > 0, "at least one notification displayed");
let notification = notifications[0];
info("Triggering secondary command for notification " + notification.id);
- // Cancel the arrow panel slide-in transition (bug 767133) such that
- // it won't interfere with us interacting with the dropdown.
- document.getAnonymousNodes(popup)[0].style.transition = "none";
- notification.button.focus();
+ notification.button.nextSibling.nextSibling.focus();
popup.addEventListener("popupshown", function handle() {
popup.removeEventListener("popupshown", handle, false);
info("Command popup open for notification " + notification.id);
// Press down until the desired command is selected
for (let i = 0; i <= index; i++) {
EventUtils.synthesizeKey("VK_DOWN", {});
}
--- a/browser/base/content/test/webrtc/head.js
+++ b/browser/base/content/test/webrtc/head.js
@@ -298,17 +298,17 @@ function promiseNoPopupNotification(aNam
}
const kActionAlways = 1;
const kActionDeny = 2;
const kActionNever = 3;
function activateSecondaryAction(aAction) {
let notification = PopupNotifications.panel.firstChild;
- notification.button.focus();
+ notification.button.nextSibling.nextSibling.focus();
let popup = notification.menupopup;
popup.addEventListener("popupshown", function () {
popup.removeEventListener("popupshown", arguments.callee, false);
// Press 'down' as many time as needed to select the requested action.
while (aAction--)
EventUtils.synthesizeKey("VK_DOWN", {});
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -30,20 +30,26 @@
%ifdef MOZ_WIDGET_GTK
list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog);
%else
list-style-image: url(chrome://global/skin/icons/information-32.png);
%endif
}
}
-.popup-notification-icon {
- width: 64px;
- height: 64px;
- margin-inline-end: 10px;
+#notification-popup > .panel-arrowcontainer > .panel-arrowcontent {
+ /* In order to display the action buttons near the edge of the arrow panel we
+ * have to reset its default padding and specify the padding in the individual
+ * "popupnotification" elements instead. To keep the rounded borders of the
+ * panel, we also have to ensure the contents are clipped to the border box
+ * by hiding the overflow, and we have to override the "display" property so
+ * that the height of the contents is computed correctly in that case. */
+ padding: 0;
+ overflow: hidden;
+ display: block;
}
.camera-icon,
.geo-icon,
.indexedDB-icon,
.install-icon,
.login-icon,
.microphone-icon,
--- a/dom/indexedDB/test/head.js
+++ b/dom/indexedDB/test/head.js
@@ -42,32 +42,27 @@ function unregisterAllPopupEventHandlers
function triggerMainCommand(popup)
{
info("triggering main command");
let notifications = popup.childNodes;
ok(notifications.length > 0, "at least one notification displayed");
let notification = notifications[0];
info("triggering command: " + notification.getAttribute("buttonlabel"));
- // 20, 10 so that the inner button is hit
- EventUtils.synthesizeMouse(notification.button, 20, 10, {});
+ EventUtils.synthesizeMouseAtCenter(notification.button, {});
}
function triggerSecondaryCommand(popup, index)
{
info("triggering secondary command, " + index);
let notifications = popup.childNodes;
ok(notifications.length > 0, "at least one notification displayed");
let notification = notifications[0];
- // Cancel the arrow panel slide-in transition (bug 767133) such that
- // it won't interfere with us interacting with the dropdown.
- SpecialPowers.wrap(document).getAnonymousNodes(popup)[0].style.transition = "none";
-
- notification.button.focus();
+ notification.button.nextSibling.nextSibling.focus();
popup.addEventListener("popupshown", function () {
popup.removeEventListener("popupshown", arguments.callee, false);
// Press down until the desired command is selected
for (let i = 0; i <= index; i++)
EventUtils.synthesizeKey("VK_DOWN", {});
--- a/toolkit/components/passwordmgr/nsLoginManagerPrompter.js
+++ b/toolkit/components/passwordmgr/nsLoginManagerPrompter.js
@@ -774,17 +774,17 @@ LoginManagerPrompter.prototype = {
let histogram = Services.telemetry.getHistogramById(histogramName);
histogram.add(PROMPT_DISPLAYED);
let chromeDoc = browser.ownerDocument;
let currentNotification;
let updateButtonStatus = (element) => {
- let mainActionButton = chromeDoc.getAnonymousElementByAttribute(element.button, "anonid", "button");
+ let mainActionButton = element.button;
// Disable the main button inside the menu-button if the password field is empty.
if (login.password.length == 0) {
mainActionButton.setAttribute("disabled", true);
chromeDoc.getElementById("password-notification-password")
.classList.add("popup-notification-invalid-input");
} else {
mainActionButton.removeAttribute("disabled");
chromeDoc.getElementById("password-notification-password")
--- a/toolkit/components/passwordmgr/test/browser/browser_notifications_2.js
+++ b/toolkit/components/passwordmgr/test/browser/browser_notifications_2.js
@@ -32,18 +32,17 @@ add_task(function* test_empty_password()
let notificationElement = PopupNotifications.panel.childNodes[0];
let passwordTextbox = notificationElement.querySelector("#password-notification-password");
let toggleCheckbox = notificationElement.querySelector("#password-notification-visibilityToggle");
// Synthesize input to empty the field
passwordTextbox.focus();
yield EventUtils.synthesizeKey("VK_RIGHT", {});
yield EventUtils.synthesizeKey("VK_BACK_SPACE", {});
-
- let mainActionButton = document.getAnonymousElementByAttribute(notificationElement.button, "anonid", "button");
+ let mainActionButton = notificationElement.button;
Assert.ok(mainActionButton.disabled, "Main action button is disabled");
// Makes sure submiting an empty password throws an error
Assert.throws(notificationElement.button.doCommand(),
"Can't add a login with a null or empty password.",
"Should fail for an empty password");
});
});
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -466,56 +466,61 @@
}
]]>
</body>
</method>
</implementation>
</binding>
<binding id="popup-notification">
- <content>
- <xul:vbox>
+ <content orient="vertical">
+ <xul:hbox align="start" class="popup-notification-body-container">
<xul:image class="popup-notification-icon"
xbl:inherits="popupid,src=icon"/>
- </xul:vbox>
- <xul:vbox class="popup-notification-body" xbl:inherits="popupid">
- <xul:hbox align="start">
- <xul:vbox flex="1">
- <xul:label class="popup-notification-origin header"
- xbl:inherits="value=origin,tooltiptext=origin"
- crop="center"/>
- <xul:description class="popup-notification-description"
- xbl:inherits="xbl:text=label,popupid"/>
- </xul:vbox>
- <xul:toolbarbutton anonid="closebutton"
- class="messageCloseButton close-icon popup-notification-closebutton tabbable"
- xbl:inherits="oncommand=closebuttoncommand"
- tooltiptext="&closeNotification.tooltip;"/>
- </xul:hbox>
- <children includes="popupnotificationcontent"/>
- <xul:label class="text-link popup-notification-learnmore-link"
- xbl:inherits="onclick=learnmoreclick,href=learnmoreurl">&learnMore;</xul:label>
- <xul:spacer flex="1"/>
- <xul:hbox class="popup-notification-button-container"
- pack="end" align="center">
- <children includes="button"/>
+ <xul:vbox flex="1" pack="start"
+ class="popup-notification-body" xbl:inherits="popupid">
+ <xul:hbox align="start">
+ <xul:vbox flex="1">
+ <xul:label class="popup-notification-origin header"
+ xbl:inherits="value=origin,tooltiptext=origin"
+ crop="center"/>
+ <xul:description class="popup-notification-description"
+ xbl:inherits="xbl:text=label,popupid"/>
+ </xul:vbox>
+ <xul:toolbarbutton anonid="closebutton"
+ class="messageCloseButton close-icon popup-notification-closebutton tabbable"
+ xbl:inherits="oncommand=closebuttoncommand"
+ tooltiptext="&closeNotification.tooltip;"/>
+ </xul:hbox>
+ <children includes="popupnotificationcontent"/>
+ <xul:label class="text-link popup-notification-learnmore-link"
+ xbl:inherits="onclick=learnmoreclick,href=learnmoreurl">&learnMore;</xul:label>
+ </xul:vbox>
+ </xul:hbox>
+ <xul:hbox pack="end" class="popup-notification-button-container">
+ <children includes="button"/>
+ <xul:hbox class="popup-notification-button-wrapper">
<xul:button anonid="button"
- class="popup-notification-menubutton"
- type="menu-button"
- xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey">
+ class="popup-notification-button"
+ default="true"
+ xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey"/>
+ <xul:toolbarseparator/>
+ <xul:button type="menu"
+ class="popup-notification-button popup-notification-dropmarker">
<xul:menupopup anonid="menupopup"
+ position="after_end"
xbl:inherits="oncommand=menucommand">
<children/>
<xul:menuitem class="menuitem-iconic popup-notification-closeitem"
label="&closeNotificationItem.label;"
xbl:inherits="oncommand=closeitemcommand,hidden=hidenotnow"/>
</xul:menupopup>
</xul:button>
</xul:hbox>
- </xul:vbox>
+ </xul:hbox>
</content>
<resources>
<stylesheet src="chrome://global/skin/notification.css"/>
</resources>
<implementation>
<field name="closebutton" readonly="true">
document.getAnonymousElementByAttribute(this, "anonid", "closebutton");
</field>
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -61,39 +61,14 @@ notification[type="critical"] {
list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
}
.messageCloseButton {
padding-left: 11px;
padding-right: 11px;
}
-/* Popup notification */
-
-.popup-notification-body {
- max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
- display: none;
-}
-
-.popup-notification-origin {
- margin-bottom: .3em !important;
-}
+%include ../../shared/popupnotification.inc.css
-.popup-notification-learnmore-link {
- margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
- margin-top: 17px;
+.popup-notification-button:focus {
+ outline: 1px -moz-dialogtext dotted;
+ outline-offset: -5px;
}
-
-.popup-notification-closebutton {
- margin-inline-end: -10px;
- margin-top: -6px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
- opacity: 0.5;
-}
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -98,105 +98,19 @@ notification[type="info"]:not([value="tr
}
@media (min-resolution: 2dppx) {
.messageCloseButton > .toolbarbutton-icon {
width: 16px;
}
}
-/* Popup notification */
-
-.popup-notification-body {
- max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
- display: none;
-}
-
-.popup-notification-origin {
- margin-bottom: .3em !important;
-}
+%include ../../shared/popupnotification.inc.css
-.popup-notification-learnmore-link {
- margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
- margin-top: 17px;
-}
-
-.popup-notification-menubutton {
- -moz-appearance: none;
-}
-
-.popup-notification-menubutton:not([type="menu-button"]):-moz-focusring,
-.popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker,
-.popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
- box-shadow: @focusRingShadow@;
- position: relative;
+.popup-notification-button:focus {
+ outline: 2px -moz-mac-focusring solid;
+ outline-offset: -2px;
}
-.popup-notification-menubutton:not([type="menu-button"]),
-.popup-notification-menubutton > .button-menubutton-button,
-.popup-notification-menubutton > .button-menubutton-dropmarker {
- -moz-appearance: none;
- color: #434343;
- border-radius: 4px;
- border: 1px solid #b5b5b5;
- background: linear-gradient(#fff, #f2f2f2);
- box-shadow: inset 0 1px rgba(255,255,255,.8),
- inset 0 0 1px rgba(255,255,255,.25),
- 0 1px rgba(255,255,255,.3);
- background-clip: padding-box;
- background-origin: padding-box;
- padding: 2px 6px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button {
- -moz-appearance: none;
- margin: 0;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-inline-start: 8px;
- padding-inline-end: 5px;
-}
-
-.popup-notification-menubutton > .button-menubutton-dropmarker {
- padding: 7px 8px;
- margin-top: 0;
- margin-bottom: 0;
- margin-inline-start: -1px;
- list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
+/* This is changed due to hover transparency looking invisible when buttons are hovered */
+.popup-notification-button-wrapper {
+ --panel-separator-color: white;
}
-
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-}
-
-.popup-notification-menubutton:not([type="menu-button"]):hover:active,
-.popup-notification-menubutton > .button-menubutton-button:hover:active,
-.popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
- box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
-}
-
-.popup-notification-closebutton {
- margin-inline-end: -12px;
- margin-top: -13px;
-}
-
-.popup-notification-closeitem > .menu-iconic-left {
- display: none;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
- opacity: 0.5;
-}
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/menubutton-dropmarker-white.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#fff" d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" />
+</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -6,58 +6,59 @@
# actual theme-specific manifests, so that shared resources need only
# be specified once. As a result, the source file paths are relative
# to the location of the actual manifest.
toolkit.jar:
% skin global classic/1.0 %skin/classic/global/
% skin help classic/1.0 %skin/classic/help/
% skin mozapps classic/1.0 %skin/classic/mozapps/
- skin/classic/global/about.css (../../shared/about.css)
- skin/classic/global/aboutCache.css (../../shared/aboutCache.css)
- skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css)
- skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css)
- skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
- skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css)
-* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css)
- skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
- skin/classic/global/appPicker.css (../../shared/appPicker.css)
- skin/classic/global/config.css (../../shared/config.css)
- skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg)
- skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg)
- skin/classic/global/icons/loading.png (../../shared/icons/loading.png)
- skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png)
- skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg)
- skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
- skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css)
- skin/classic/global/narrate.css (../../shared/narrate.css)
- skin/classic/global/narrateControls.css (../../shared/narrateControls.css)
- skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg)
- skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg)
- skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg)
- skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg)
- skin/classic/global/narrate/slow.svg (../../shared/narrate/slow.svg)
- skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg)
- skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg)
- skin/classic/global/menu/shared-menu-check@2x.png (../../shared/menu-check@2x.png)
- skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png)
- skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
- skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg)
- skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg)
- skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)
- skin/classic/global/in-content/check-partial.svg (../../shared/in-content/check-partial.svg)
- skin/classic/global/in-content/dropdown.svg (../../shared/in-content/dropdown.svg)
- skin/classic/global/in-content/help-glyph.svg (../../shared/in-content/help-glyph.svg)
- skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg)
- skin/classic/global/passwordmgr.css (../../shared/passwordmgr.css)
- skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)
- skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg)
- skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg)
- skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
- skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
+ skin/classic/global/about.css (../../shared/about.css)
+ skin/classic/global/aboutCache.css (../../shared/aboutCache.css)
+ skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css)
+ skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css)
+ skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
+ skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css)
+* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css)
+ skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
+ skin/classic/global/appPicker.css (../../shared/appPicker.css)
+ skin/classic/global/config.css (../../shared/config.css)
+ skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg)
+ skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg)
+ skin/classic/global/icons/loading.png (../../shared/icons/loading.png)
+ skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png)
+ skin/classic/global/icons/menubutton-dropmarker-white.svg (../../shared/icons/menubutton-dropmarker-white.svg)
+ skin/classic/global/icons/warning.svg (../../shared/incontent-icons/warning.svg)
+ skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
+ skin/classic/global/alerts/alert-common.css (../../shared/alert-common.css)
+ skin/classic/global/narrate.css (../../shared/narrate.css)
+ skin/classic/global/narrateControls.css (../../shared/narrateControls.css)
+ skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg)
+ skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg)
+ skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg)
+ skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg)
+ skin/classic/global/narrate/slow.svg (../../shared/narrate/slow.svg)
+ skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg)
+ skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg)
+ skin/classic/global/menu/shared-menu-check@2x.png (../../shared/menu-check@2x.png)
+ skin/classic/global/menu/shared-menu-check.png (../../shared/menu-check.png)
+ skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
+ skin/classic/global/menu/shared-menu-check-black.svg (../../shared/menu-check-black.svg)
+ skin/classic/global/menu/shared-menu-check-hover.svg (../../shared/menu-check-hover.svg)
+ skin/classic/global/in-content/check.svg (../../shared/in-content/check.svg)
+ skin/classic/global/in-content/check-partial.svg (../../shared/in-content/check-partial.svg)
+ skin/classic/global/in-content/dropdown.svg (../../shared/in-content/dropdown.svg)
+ skin/classic/global/in-content/help-glyph.svg (../../shared/in-content/help-glyph.svg)
+ skin/classic/global/in-content/radio.svg (../../shared/in-content/radio.svg)
+ skin/classic/global/passwordmgr.css (../../shared/passwordmgr.css)
+ skin/classic/global/reader/RM-Close-24x24.svg (../../shared/reader/RM-Close-24x24.svg)
+ skin/classic/global/reader/RM-Minus-24x24.svg (../../shared/reader/RM-Minus-24x24.svg)
+ skin/classic/global/reader/RM-Plus-24x24.svg (../../shared/reader/RM-Plus-24x24.svg)
+ skin/classic/global/reader/RM-Type-Controls-24x24.svg (../../shared/reader/RM-Type-Controls-24x24.svg)
+ skin/classic/global/reader/RM-Type-Controls-Arrow.svg (../../shared/reader/RM-Type-Controls-Arrow.svg)
skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
skin/classic/global/media/TopLevelImageDocument.css (../../shared/media/TopLevelImageDocument.css)
skin/classic/global/media/TopLevelVideoDocument.css (../../shared/media/TopLevelVideoDocument.css)
skin/classic/global/media/imagedoc-lightnoise.png (../../shared/media/imagedoc-lightnoise.png)
skin/classic/global/media/imagedoc-darknoise.png (../../shared/media/imagedoc-darknoise.png)
copy from toolkit/themes/osx/global/notification.css
copy to toolkit/themes/shared/popupnotification.inc.css
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -1,202 +1,118 @@
/* 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/. */
-%include shared.inc
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-notification {
- padding: 3px 3px 4px;
- text-shadow: none;
-}
-
-notification[type="info"] {
- color: rgba(255,255,255,0.95);
- background: linear-gradient(#606060, #404040);
- border-top: 1px solid #2a2a2a;
- border-bottom: 1px solid #2a2a2a;
-}
-
-notification[type="warning"] {
- color: rgba(0,0,0,0.95);
- background: linear-gradient(#ffe13e, #ffc703);
- border-top: 1px solid #bf8a01;
- border-bottom: 1px solid #bf8a01;
-}
-
-notification[type="critical"] {
- color: rgba(255,255,255,0.95);
- background: linear-gradient(#d40000, #980000);
- border-top: 1px solid #5d0000;
- border-bottom: 1px solid #5d0000;
-}
-
-notificationbox[notificationside="top"] > notification {
- border-top-style: none;
-}
-
-notificationbox[notificationside="bottom"] > notification {
- border-bottom-style: none;
-}
-
-.messageText > .text-link {
- color: inherit !important;
- text-decoration: underline;
-}
-
-.messageImage {
- width: 16px;
- height: 16px;
- margin: 0 4px;
-}
-
-/* Default icons for notifications */
-
-.messageImage[type="info"] {
- list-style-image: url("chrome://global/skin/notification/info-icon.png");
-}
-
-.messageImage[type="warning"] {
- list-style-image: url("chrome://global/skin/notification/warning-icon.png");
-}
-
-.messageImage[type="critical"] {
- list-style-image: url("chrome://global/skin/notification/error-icon.png");
-}
-
-.messageText {
- margin: 0 3px !important;
- padding: 0;
- font-weight: bold;
-}
-
-.messageCloseButton {
- -moz-appearance: none;
- padding: 0;
- margin: 0 2px;
- border: none;
-}
-
-/*
- Invert the close icon for @type=info since both are normally dark. It's unclear
- why !important is necessary here so remove it if it's no longer needed.
-*/
-notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
- -moz-image-region: rect(0, 64px, 16px, 48px) !important;
-}
-
-@media (min-resolution: 2dppx) {
- notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
- -moz-image-region: rect(0, 128px, 32px, 96px) !important;
- }
-}
-
-.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
- border-radius: 10000px;
- box-shadow: 0 0 2px 1px -moz-mac-focusring,
- 0 0 0 2px -moz-mac-focusring inset;
-}
-
-@media (min-resolution: 2dppx) {
- .messageCloseButton > .toolbarbutton-icon {
- width: 16px;
- }
-}
-
/* Popup notification */
+.popup-notification-body-container {
+ padding: var(--panel-arrowcontent-padding);
+}
+
+.popup-notification-icon {
+ width: 32px;
+ height: 32px;
+ margin-inline-end: var(--panel-arrowcontent-padding);
+}
+
.popup-notification-body {
- max-width: 25em;
+ width: 25em;
+}
+
+.popup-notification-body description,
+.popup-notification-body label {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+}
+
+.popup-notification-closebutton {
+ margin-inline-end: -8px;
+ margin-top: -8px;
}
.popup-notification-origin:not([value]),
.popup-notification-learnmore-link:not([href]) {
display: none;
}
.popup-notification-origin {
margin-bottom: .3em !important;
}
.popup-notification-learnmore-link {
margin-top: .5em !important;
}
.popup-notification-button-container {
- margin-top: 17px;
+ background-color: hsla(210,4%,10%,.07);
+ border-top: 1px solid var(--panel-separator-color);
}
-.popup-notification-menubutton {
- -moz-appearance: none;
-}
-
-.popup-notification-menubutton:not([type="menu-button"]):-moz-focusring,
-.popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker,
-.popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
- box-shadow: @focusRingShadow@;
- position: relative;
+.popup-notification-button-wrapper {
+ background-color: #0996f8;
}
-.popup-notification-menubutton:not([type="menu-button"]),
-.popup-notification-menubutton > .button-menubutton-button,
-.popup-notification-menubutton > .button-menubutton-dropmarker {
- -moz-appearance: none;
- color: #434343;
- border-radius: 4px;
- border: 1px solid #b5b5b5;
- background: linear-gradient(#fff, #f2f2f2);
- box-shadow: inset 0 1px rgba(255,255,255,.8),
- inset 0 0 1px rgba(255,255,255,.25),
- 0 1px rgba(255,255,255,.3);
- background-clip: padding-box;
- background-origin: padding-box;
- padding: 2px 6px;
+.popup-notification-button-wrapper > toolbarseparator {
+ border: 0;
+ border-left: 1px solid var(--panel-separator-color);
+ margin: 7px 0 7px;
+ /* This is to override the linux !important */
+ -moz-appearance: none !important;
+ min-width: 0;
+}
+
+.popup-notification-button-wrapper:hover > toolbarseparator {
+ margin: 0;
}
-.popup-notification-menubutton > .button-menubutton-button {
+.popup-notification-button {
-moz-appearance: none;
+ background-color: transparent;
+ color: white;
margin: 0;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-inline-start: 8px;
- padding-inline-end: 5px;
+ padding: 0 18px;
+ min-height: 40px;
+ min-width: 0;
+ border: none;
}
-.popup-notification-menubutton > .button-menubutton-dropmarker {
- padding: 7px 8px;
- margin-top: 0;
- margin-bottom: 0;
- margin-inline-start: -1px;
- list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
+.popup-notification-button:hover {
+ outline: 1px solid hsla(210,4%,10%,.07);
+ background-color: #0675d3;
}
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+.popup-notification-button:hover:active {
+ outline: 1px solid hsla(210,4%,10%,.12);
+ background-color: #0568ba;
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
-.popup-notification-menubutton:not([type="menu-button"]):hover:active,
-.popup-notification-menubutton > .button-menubutton-button:hover:active,
-.popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
- box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
+.popup-notification-dropmarker {
+ padding: 0 15px;
}
-.popup-notification-closebutton {
- margin-inline-end: -12px;
- margin-top: -13px;
+/* prevent double border on windows when focused */
+.popup-notification-button > .button-box {
+ border: none;
}
-.popup-notification-closeitem > .menu-iconic-left {
+.popup-notification-dropmarker > .button-box > hbox {
display: none;
}
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+ /* This is to override the linux !important */
+ -moz-appearance: none !important;
+ display: -moz-box;
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+ width: 16px;
+ height: 16px;
+ list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker-white.svg);
+}
+
+.popup-notification-button[disabled] {
opacity: 0.5;
}
--- a/toolkit/themes/windows/global/notification.css
+++ b/toolkit/themes/windows/global/notification.css
@@ -61,149 +61,20 @@ notification[type="critical"] {
padding: 4px 2px;
border: none !important;
}
.messageCloseButton > .toolbarbutton-icon {
margin-inline-end: 5px;
}
-/* Popup notification */
-
-.popup-notification-body {
- max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
- display: none;
-}
+%include ../../shared/popupnotification.inc.css
-.popup-notification-origin {
- margin-bottom: .3em !important;
-}
-
-.popup-notification-learnmore-link {
- margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
- margin-top: 17px;
+.popup-notification-button:focus {
+ outline: 1px -moz-dialogtext dotted;
+ outline-offset: -1px;
}
-%ifdef XP_WIN
-/*
-XXX: apply styles to all themes until bug 509642 is fixed
-@media (-moz-windows-default-theme) {
-*/
- .popup-notification-menubutton {
- -moz-appearance: none;
- border-radius: 3px;
- padding: 0;
- background-color: rgba(250,250,250,.3)
- }
-
- .popup-notification-menubutton:hover:active {
- border-color: rgba(0,0,0,.5);
- }
-
- .popup-notification-menubutton:not([type="menu-button"]),
- .popup-notification-menubutton > .button-menubutton-button,
- .popup-notification-menubutton > .button-menubutton-dropmarker {
- -moz-appearance: none;
- margin: 0;
- border: 1px solid rgba(0,0,0,.35);
-
- box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
- 0 2px 2px rgba(255,255,255,.35) inset,
- 0 -1px 2px rgba(0,0,0,.1) inset,
- 0 1px 0 rgba(255,255,255,.35);
-
- }
-
- @media (-moz-windows-glass) {
- .popup-notification-menubutton:not([type="menu-button"]),
- .popup-notification-menubutton > .button-menubutton-button,
- .popup-notification-menubutton > .button-menubutton-dropmarker {
- background-color: transparent;
- background-image: linear-gradient(rgba(250,250,250,.6), rgba(175,175,175,.25) 49%, rgba(0,0,0,.12) 51%, rgba(0,0,0,.09) 60%, rgba(0,0,0,.05));
- box-shadow: 0 0 1px 1px rgba(255,255,255,.75) inset;
- }
- }
-
- .popup-notification-menubutton > .button-menubutton-button {
- background-color: transparent;
- padding: 1px;
- border-inline-end: none;
- }
-
- .popup-notification-menubutton:not([type="menu-button"]),
- .popup-notification-menubutton > .button-menubutton-button > .button-box {
- padding-inline-start: 8px;
- padding-inline-end: 5px;
- }
-
- .popup-notification-menubutton > .button-menubutton-dropmarker {
- padding: 9px 5px 8px;
- width: auto;
- height: auto;
- list-style-image: url("chrome://global/skin/arrow/arrow-dn-sharp.gif");
- }
-
- .popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker {
- outline: 1px dotted ThreeDDarkShadow;
- outline-offset: -3px;
- }
-
- @media (-moz-windows-glass) {
- .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
- .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
- border-radius: 2px 0 0 2px;
- }
-
- .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
- .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
- border-radius: 0 2px 2px 0;
- }
- }
-
- .popup-notification-menubutton:not([type="menu-button"]):hover,
- .popup-notification-menubutton > .button-menubutton-button:hover,
- .popup-notification-menubutton > .button-menubutton-dropmarker:hover {
- background-color: rgba(250,250,250,.6);
- }
-
- .popup-notification-menubutton:not([type="menu-button"]):hover:active,
- .popup-notification-menubutton > .button-menubutton-button:hover:active,
- .popup-notification-menubutton > .button-menubutton-dropmarker:hover:active,
- .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
- background-color: rgba(0,0,0,.05);
- box-shadow: 0 0 2px rgba(0,0,0,.65) inset;
- }
-
- @media (-moz-windows-glass) {
- .popup-notification-menubutton:not([type="menu-button"]):hover,
- .popup-notification-menubutton > .button-menubutton-button:hover,
- .popup-notification-menubutton > .button-menubutton-dropmarker:hover {
- background-color: transparent;
- background-image: linear-gradient(rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
- box-shadow: 0 0 0 1px white inset,
- 0 0 2px 1px rgba(255,255,255,.75) inset;
- }
- .popup-notification-menubutton:not([type="menu-button"]):hover:active,
- .popup-notification-menubutton > .button-menubutton-button:hover:active,
- .popup-notification-menubutton > .button-menubutton-dropmarker:hover:active,
- .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
- background-color: transparent;
- background-image: linear-gradient(rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
- }
- }
-/*}*/
-%endif
-
-.popup-notification-closebutton {
- margin-inline-end: -14px;
- margin-top: -10px;
+/* Override default icon size which is too small for this dropdown */
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+ width: 16px;
+ height: 16px;
}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
- opacity: 0.5;
-}
