--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -4,53 +4,54 @@
type="arrow"
position="after_start"
hidden="true"
orient="vertical"
noautofocus="true"
role="alert"/>
<popupnotification id="webRTC-shareDevices-notification" hidden="true">
- <popupnotificationcontent id="webRTC-selectCamera" orient="vertical">
- <label value="&getUserMedia.selectCamera.label;"
- accesskey="&getUserMedia.selectCamera.accesskey;"
- control="webRTC-selectCamera-menulist"/>
+ <popupnotificationcontent id="webRTC-selectCamera" class="popup-notification-control">
+ <image accesskey="&getUserMedia.selectCamera.accesskey;"
+ control="webRTC-selectCamera-menulist">
+ </image>
<menulist id="webRTC-selectCamera-menulist">
<menupopup id="webRTC-selectCamera-menupopup"/>
</menulist>
</popupnotificationcontent>
- <popupnotificationcontent id="webRTC-selectWindowOrScreen" orient="vertical">
- <label id="webRTC-selectWindow-label"
- control="webRTC-selectWindow-menulist"/>
+ <popupnotificationcontent id="webRTC-selectWindowOrScreen" class="popup-notification-control">
+ <image id="webRTC-selectWindow-label"
+ control="webRTC-selectWindow-menulist">
+ </image>
<menulist id="webRTC-selectWindow-menulist"
oncommand="gWebRTCUI.updateMainActionLabel(this);">
<menupopup id="webRTC-selectWindow-menupopup"/>
</menulist>
<description id="webRTC-all-windows-shared" hidden="true">&getUserMedia.allWindowsShared.message;</description>
</popupnotificationcontent>
- <popupnotificationcontent id="webRTC-selectMicrophone" orient="vertical">
- <label value="&getUserMedia.selectMicrophone.label;"
- accesskey="&getUserMedia.selectMicrophone.accesskey;"
- control="webRTC-selectMicrophone-menulist"/>
+ <popupnotificationcontent id="webRTC-selectMicrophone" class="popup-notification-control">
+ <image accesskey="&getUserMedia.selectMicrophone.accesskey;"
+ control="webRTC-selectMicrophone-menulist">
+ </image>
<menulist id="webRTC-selectMicrophone-menulist">
<menupopup id="webRTC-selectMicrophone-menupopup"/>
</menulist>
</popupnotificationcontent>
</popupnotification>
<popupnotification id="servicesInstall-notification" hidden="true">
<popupnotificationcontent orient="vertical" align="start">
<!-- XXX bug 974146, tests are looking for this, can't remove yet. -->
</popupnotificationcontent>
</popupnotification>
<popupnotification id="pointerLock-notification" hidden="true">
- <popupnotificationcontent orient="vertical" align="start">
+ <popupnotificationcontent align="start">
<label id="pointerLock-cancel">&pointerLock.notification.message;</label>
</popupnotificationcontent>
</popupnotification>
<popupnotification id="password-notification" hidden="true">
<popupnotificationcontent orient="vertical">
<textbox id="password-notification-username"/>
<textbox id="password-notification-password" type="password" show-content=""/>
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -58,20 +58,47 @@
%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-control {
+ margin-top: .5em;
+ margin-inline-end: var(--panel-arrowcontent-spacing-size);
+ /* Align with main icon center */
+ margin-inline-start: calc(-16px - calc(var(--panel-arrowcontent-spacing-size) * 1.5));
+}
+
.popup-notification-icon {
- width: 64px;
- height: 64px;
+ width: calc(var(--panel-arrowcontent-spacing-size) * 2);
+ height: calc(var(--panel-arrowcontent-spacing-size) * 2);
margin-inline-end: 10px;
+ margin-inline-start: 0;
+}
+
+image[control="webRTC-selectCamera-menulist"],
+image[control="webRTC-selectWindow-menulist"],
+image[control="webRTC-selectMicrophone-menulist"] {
+ width: var(--panel-arrowcontent-spacing-size);
+ margin-inline-end: var(--panel-arrowcontent-spacing-size);
+}
+
+image[control="webRTC-selectCamera-menulist"] {
+ background: url(chrome://browser/skin/webRTC-shareDevice-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
+}
+
+image[control="webRTC-selectWindow-menulist"] {
+ background: url(chrome://browser/skin/webRTC-shareScreen-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
+}
+
+image[control="webRTC-selectMicrophone-menulist"] {
+ background: url(chrome://browser/skin/webRTC-shareMicrophone-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
}
/* INDIVIDUAL NOTIFICATIONS */
/* For the moment we apply the color filter only on the icons listed here.
The first two selectors are used by socialchat.xml (bug 1275558). */
.webRTC-sharingDevices-notification-icon,
.webRTC-sharingMicrophone-notification-icon,
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -467,35 +467,36 @@
]]>
</body>
</method>
</implementation>
</binding>
<binding id="popup-notification">
<content>
- <xul:vbox>
- <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:image class="popup-notification-icon"
+ align="center"
+ xbl:inherits="popupid,src=icon"/>
+ <xul:vbox flex="1" pack="center">
<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:vbox class="popup-notification-contents">
+ <children includes="popupnotificationcontent"/>
+ </xul:vbox>
<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:button anonid="button"
class="popup-notification-menubutton"
--- a/toolkit/themes/linux/global/button.css
+++ b/toolkit/themes/linux/global/button.css
@@ -120,16 +120,36 @@ button[type="menu-button"] {
margin: 0;
}
.button-menu-dropmarker,
.button-menubutton-dropmarker {
-moz-appearance: toolbarbutton-dropdown !important;
}
+.popup-notification-body .button-menubutton-dropmarker {
+ --main-color: #5295e5;
+ -moz-appearance: none !important;
+ background: var(--main-color);
+ border: 1px solid var(--main-color);
+ padding: 1.5rem 1rem;
+ margin: 0;
+ color: #fff;
+}
+
+.popup-notification-body .button-menubutton-dropmarker image {
+ list-style-image: url("chrome://global/skin/icons/panelarrow-down-inverted.svg");
+}
+
+.popup-notification-body .button-menubutton-dropmarker[open="true"] {
+ --main-color: #3579ca;
+ background: var(--main-color);
+ border: 1px solid var(--main-color);
+}
+
.button-menubutton-dropmarker {
margin-inline-end: 3px;
}
/* ::::: plain buttons ::::: */
button.plain {
border: 0px !important;
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -275,20 +275,16 @@ label[disabled="true"] {
outline: 1px dotted;
}
notification > button {
margin-top: 0;
margin-bottom: 0;
}
-popupnotificationcontent {
- margin-top: .5em;
-}
-
/* :::::: autoscroll popup ::::: */
.autoscroller {
height: 28px;
width: 28px;
border: none;
margin: -14px;
padding: 0;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/linux/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ id="svg2"
+ version="1.1">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <polygon
+ points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+ id="polygon4"
+ transform="matrix(0,-1,1,0,0.3125,16.3125)"
+ style="fill:#ffffff" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/linux/global/icons/panelarrow-vertical-notification.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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="20" height="10">
+ <path d="M -0.2,10 L 10,-0.2 20.2,10 z" fill="ThreeDShadow"/>
+ <path d="M 1.2,10 L 10,1.2 18.8,10 z" fill="#fff"/>
+</svg>
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -7,17 +7,17 @@
toolkit.jar:
skin/classic/global/autocomplete.css
skin/classic/global/button.css
skin/classic/global/checkbox.css
skin/classic/global/colorpicker.css
skin/classic/global/commonDialog.css
skin/classic/global/dropmarker.css
skin/classic/global/filepicker.css
- skin/classic/global/Filepicker.png (filepicker/Filepicker.png)
+ skin/classic/global/Filepicker.png (filepicker/Filepicker.png)
skin/classic/global/findBar.css
skin/classic/global/global.css
skin/classic/global/groupbox.css
skin/classic/global/listbox.css
skin/classic/global/menu.css
skin/classic/global/menulist.css
skin/classic/global/netError.css
* skin/classic/global/notification.css
@@ -29,31 +29,33 @@ toolkit.jar:
skin/classic/global/radio.css
skin/classic/global/scrollbox.css
skin/classic/global/splitter.css
skin/classic/global/tabbox.css
skin/classic/global/textbox.css
skin/classic/global/toolbar.css
skin/classic/global/toolbarbutton.css
skin/classic/global/tree.css
- skin/classic/global/alerts/alert.css (alerts/alert.css)
- skin/classic/global/console/console.css (console/console.css)
- skin/classic/global/console/console.png (console/console.png)
- skin/classic/global/console/console-toolbar.png (console/console-toolbar.png)
- skin/classic/global/dirListing/remote.png (dirListing/remote.png)
+ skin/classic/global/alerts/alert.css (alerts/alert.css)
+ skin/classic/global/console/console.css (console/console.css)
+ skin/classic/global/console/console.png (console/console.png)
+ skin/classic/global/console/console-toolbar.png (console/console-toolbar.png)
+ skin/classic/global/dirListing/remote.png (dirListing/remote.png)
- skin/classic/global/icons/Authentication.png (icons/Authentication.png)
- skin/classic/global/icons/autocomplete-search.svg (icons/autocomplete-search.svg)
- skin/classic/global/icons/autoscroll.png (icons/autoscroll.png)
- skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png)
- skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png)
- skin/classic/global/icons/close.svg (icons/close.svg)
- skin/classic/global/icons/loading.png (icons/loading.png)
- skin/classic/global/icons/panelarrow-horizontal.svg (icons/panelarrow-horizontal.svg)
- skin/classic/global/icons/panelarrow-vertical.svg (icons/panelarrow-vertical.svg)
- skin/classic/global/icons/resizer.png (icons/resizer.png)
- skin/classic/global/icons/sslWarning.png (icons/sslWarning.png)
+ skin/classic/global/icons/Authentication.png (icons/Authentication.png)
+ skin/classic/global/icons/autocomplete-search.svg (icons/autocomplete-search.svg)
+ skin/classic/global/icons/autoscroll.png (icons/autoscroll.png)
+ skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png)
+ skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png)
+ skin/classic/global/icons/close.svg (icons/close.svg)
+ skin/classic/global/icons/loading.png (icons/loading.png)
+ skin/classic/global/icons/panelarrow-down-inverted.svg (icons/panelarrow-down-inverted.svg)
+ skin/classic/global/icons/panelarrow-horizontal.svg (icons/panelarrow-horizontal.svg)
+ skin/classic/global/icons/panelarrow-vertical.svg (icons/panelarrow-vertical.svg)
+ skin/classic/global/icons/panelarrow-vertical-notification.svg (icons/panelarrow-vertical-notification.svg)
+ skin/classic/global/icons/resizer.png (icons/resizer.png)
+ skin/classic/global/icons/sslWarning.png (icons/sslWarning.png)
-* skin/classic/global/in-content/common.css (in-content/common.css)
-* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
- skin/classic/global/toolbar/spring.png (toolbar/spring.png)
- skin/classic/global/tree/twisty-clsd.png (tree/twisty-clsd.png)
- skin/classic/global/tree/twisty-open.png (tree/twisty-open.png)
+* skin/classic/global/in-content/common.css (in-content/common.css)
+* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
+ skin/classic/global/toolbar/spring.png (toolbar/spring.png)
+ skin/classic/global/tree/twisty-clsd.png (tree/twisty-clsd.png)
+ skin/classic/global/tree/twisty-open.png (tree/twisty-open.png)
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -64,17 +64,56 @@ notification[type="critical"] {
.messageCloseButton {
padding-left: 11px;
padding-right: 11px;
}
/* Popup notification */
.popup-notification-body {
- max-width: 25em;
+ max-width: 30em;
+}
+
+.popup-notification-menubutton {
+ margin: 0;
+}
+
+.popup-notification-contents,
+.popup-notification-learnmore-link {
+ margin: 0;
+ /* icon margin left (spacing size) + icon width (*2 spacing size) + icon margin right */
+ margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 10px) !important;
+}
+
+.popup-notification-body hbox:first-of-type {
+ margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 var(--panel-arrowcontent-spacing-size) !important;
+}
+
+.popup-notification-body hbox:first-of-type vbox * {
+ margin-inline-start: 0;
+}
+
+.popup-notification-origin:first-child {
+ margin-block-start: 0;
+}
+
+.popup-notification-body .button-menubutton-button {
+ --main-color: #5295e5;
+ -moz-appearance: none;
+ background: var(--main-color);
+ border: 1px solid var(--main-color);
+ padding: 1.5rem 2rem;
+ margin: 0;
+ color: #fff;
+}
+
+.popup-notification-body .button-menubutton-button[buttondown="true"] {
+ --main-color: #3579ca;
+ background: var(--main-color);
+ border: 1px solid var(--main-color);
}
.popup-notification-origin:not([value]),
.popup-notification-learnmore-link:not([href]) {
display: none;
}
.popup-notification-origin {
@@ -85,15 +124,15 @@ notification[type="critical"] {
margin-top: .5em !important;
}
.popup-notification-button-container {
margin-top: 17px;
}
.popup-notification-closebutton {
- margin-inline-end: -10px;
- margin-top: -6px;
+ margin-inline-end: -16px;
+ margin-top: -16px;
}
.popup-notification-menubutton > .button-menubutton-button[disabled] {
opacity: 0.5;
}
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@@ -1,22 +1,32 @@
/* 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");
/* ::::: Variables ::::: */
.panel-arrowcontent {
+ --panel-arrowcontent-spacing-size: 22px;
--panel-arrowcontent-padding: 10px;
--panel-arrowcontent-background: -moz-Dialog;
--panel-arrowcontent-color: -moz-DialogText;
--panel-arrowcontent-border: 1px solid ThreeDShadow;
}
+#notification-popup .panel-arrowcontent {
+ --panel-arrowcontent-padding: 0px;
+ --panel-arrowcontent-background: white;
+}
+
+#notification-popup .popup-notification-button-container, #notification-popup .panel-arrowcontent popupnotification {
+ margin: 0;
+}
+
/* ::::: menupopup ::::: */
menupopup,
panel {
-moz-appearance: menupopup;
min-width: 1px;
color: MenuText;
}
@@ -49,16 +59,21 @@ panel[type="arrow"][side="right"] {
.panel-arrow[side="top"],
.panel-arrow[side="bottom"] {
list-style-image: url("chrome://global/skin/icons/panelarrow-vertical.svg");
position: relative;
margin-left: 6px;
margin-right: 6px;
}
+#notification-popup .panel-arrow[side="top"],
+#notification-popup .panel-arrow[side="bottom"] {
+ list-style-image: url("chrome://global/skin/icons/panelarrow-vertical-notification.svg");
+}
+
.panel-arrow[side="top"] {
margin-bottom: -1px;
}
.panel-arrow[side="bottom"] {
transform: scaleY(-1);
margin-top: -1px;
}
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -260,20 +260,16 @@ notification > button:-moz-focusring {
notification > button:active:hover:-moz-focusring {
box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
}
notification > button > .button-box > .button-text {
margin: 0 !important;
}
-popupnotificationcontent {
- margin-top: .5em;
-}
-
/* :::::: autoscroll popup ::::: */
.autoscroller {
height: 28px;
width: 28px;
border: none;
margin: -14px;
padding: 0;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/osx/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ id="svg2"
+ version="1.1">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <polygon
+ points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+ id="polygon4"
+ transform="matrix(0,-1,1,0,0.3125,16.3125)"
+ style="fill:#ffffff" />
+</svg>
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -63,16 +63,17 @@ toolkit.jar:
skin/classic/global/arrow/arrow-rit-dis.gif (arrow/arrow-rit-dis.gif)
skin/classic/global/arrow/arrow-rit-hov.gif (arrow/arrow-rit-hov.gif)
skin/classic/global/arrow/arrow-rit-sharp-end.gif (arrow/arrow-rit-sharp-end.gif)
skin/classic/global/arrow/arrow-rit-sharp.gif (arrow/arrow-rit-sharp.gif)
skin/classic/global/arrow/arrow-rit.gif (arrow/arrow-rit.gif)
skin/classic/global/arrow/arrow-up-dis.gif (arrow/arrow-up-dis.gif)
skin/classic/global/arrow/arrow-up-sharp.gif (arrow/arrow-up-sharp.gif)
skin/classic/global/arrow/arrow-up.gif (arrow/arrow-up.gif)
+ skin/classic/global/icons/panelarrow-down-inverted.svg (icons/panelarrow-down-inverted.svg)
skin/classic/global/arrow/panelarrow-horizontal.png (arrow/panelarrow-horizontal.png)
skin/classic/global/arrow/panelarrow-horizontal@2x.png (arrow/panelarrow-horizontal@2x.png)
skin/classic/global/arrow/panelarrow-vertical.png (arrow/panelarrow-vertical.png)
skin/classic/global/arrow/panelarrow-vertical@2x.png (arrow/panelarrow-vertical@2x.png)
skin/classic/global/checkbox/cbox-check.gif (checkbox/cbox-check.gif)
skin/classic/global/checkbox/cbox-check-dis.gif (checkbox/cbox-check-dis.gif)
skin/classic/global/console/console-error-caret.gif (console/console-error-caret.gif)
skin/classic/global/console/console-error-dash.gif (console/console-error-dash.gif)
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -101,17 +101,44 @@ notification[type="info"]:not([value="tr
.messageCloseButton > .toolbarbutton-icon {
width: 16px;
}
}
/* Popup notification */
.popup-notification-body {
- max-width: 25em;
+ max-width: 30em;
+}
+
+.popup-notification-menubutton {
+ margin: 0;
+}
+
+.popup-notification-control menulist {
+ margin-inline-start: 0;
+}
+
+.popup-notification-contents,
+.popup-notification-learnmore-link {
+ margin: 0;
+ /* icon margin left (spacing size) + icon width (*2 spacing size) + icon margin right */
+ margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 10px) !important;
+}
+
+.popup-notification-body hbox:first-of-type {
+ margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 var(--panel-arrowcontent-spacing-size) !important;
+}
+
+.popup-notification-body hbox:first-of-type vbox * {
+ margin-inline-start: 0 !important;
+}
+
+.popup-notification-origin:first-child {
+ margin-block-start: 0;
}
.popup-notification-origin:not([value]),
.popup-notification-learnmore-link:not([href]) {
display: none;
}
.popup-notification-origin {
@@ -122,57 +149,64 @@ notification[type="info"]:not([value="tr
margin-top: .5em !important;
}
.popup-notification-button-container {
margin-top: 17px;
}
.popup-notification-menubutton {
+ --main-color: #5295e5;
-moz-appearance: none;
+ background: var(--main-color) !important;
}
.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-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 {
+.popup-notification-menubutton > .button-menubutton-button,
+.popup-notification-body .button-menubutton-dropmarker {
-moz-appearance: none;
+ border: 1px solid var(--main-color);
+ border-radius: 0;
+ padding: 1.5rem 2rem;
margin: 0;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-inline-start: 8px;
- padding-inline-end: 5px;
+ color: #fff;
}
-.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-body .button-menubutton-button[buttondown="true"] {
+ --main-color: #3579ca;
+ background: var(--main-color);
+}
+
+.popup-notification-body .button-menubutton-dropmarker {
+ padding: 1.5rem 1rem;
+}
+
+.popup-notification-body .button-menubutton-dropmarker image {
+ list-style-image: url("chrome://global/skin/icons/panelarrow-down-inverted.svg");
+}
+
+.popup-notification-body .button-menubutton-dropmarker[open="true"] {
+ --main-color: #3579ca;
+ background: var(--main-color) !important;
}
.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;
}
@@ -184,18 +218,18 @@ notification[type="info"]:not([value="tr
.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;
+ margin-inline-end: -16px;
+ margin-top: -16px;
}
.popup-notification-closeitem > .menu-iconic-left {
display: none;
}
.popup-notification-menubutton > .button-menubutton-button[disabled] {
opacity: 0.5;
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -1,22 +1,32 @@
/* 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");
.panel-arrowcontent {
+ --panel-arrowcontent-spacing-size: 22px;
--panel-arrowcontent-padding: 16px;
--panel-arrowcontent-background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975));
--panel-arrowcontent-color: hsl(0,0%,10%);
--panel-arrowcontent-border: none;
--panel-arrowcontent-border-radius: 3.5px;
}
+#notification-popup .panel-arrowcontent {
+ --panel-arrowcontent-padding: 0px;
+ --panel-arrowcontent-background: white;
+}
+
+#notification-popup .popup-notification-button-container, #notification-popup .panel-arrowcontent popupnotification {
+ margin: 0;
+}
+
menupopup,
panel {
-moz-appearance: menupopup;
background-color: Menu;
}
menupopup > menu > menupopup {
margin-top: -4px;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/windows/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ id="svg2"
+ version="1.1">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <polygon
+ points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+ id="polygon4"
+ transform="matrix(0,-1,1,0,0.3125,16.3125)"
+ style="fill:#ffffff" />
+</svg>
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -44,16 +44,17 @@ toolkit.jar:
skin/classic/global/icons/blacklist_favicon.png (icons/blacklist_favicon.png)
skin/classic/global/icons/blacklist_large.png (icons/blacklist_large.png)
skin/classic/global/icons/close-XPVista7.png (icons/close-XPVista7.png)
skin/classic/global/icons/close-XPVista7@2x.png (icons/close-XPVista7@2x.png)
skin/classic/global/icons/close-inverted-XPVista7.png (icons/close-inverted-XPVista7.png)
skin/classic/global/icons/close-inverted-XPVista7@2x.png (icons/close-inverted-XPVista7@2x.png)
skin/classic/global/icons/loading.png (icons/loading.png)
skin/classic/global/icons/loading@2x.png (icons/loading@2x.png)
+ skin/classic/global/icons/panelarrow-down-inverted.svg (icons/panelarrow-down-inverted.svg)
skin/classic/global/icons/resizer.png (icons/resizer.png)
skin/classic/global/icons/sslWarning.png (icons/sslWarning.png)
* skin/classic/global/in-content/common.css (in-content/common.css)
* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
skin/classic/global/toolbar/spring.png (toolbar/spring.png)
skin/classic/global/console/console-toolbar-XP.png (console/console-toolbar-XP.png)
skin/classic/global/dirListing/folder-XP.png (dirListing/folder-XP.png)
--- a/toolkit/themes/windows/global/notification.css
+++ b/toolkit/themes/windows/global/notification.css
@@ -64,17 +64,22 @@ notification[type="critical"] {
.messageCloseButton > .toolbarbutton-icon {
margin-inline-end: 5px;
}
/* Popup notification */
.popup-notification-body {
- max-width: 25em;
+ max-width: 30em;
+}
+
+
+.popup-notification-body hbox:first-of-type {
+ margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 var(--panel-arrowcontent-spacing-size);
}
.popup-notification-origin:not([value]),
.popup-notification-learnmore-link:not([href]) {
display: none;
}
.popup-notification-origin {
@@ -84,123 +89,87 @@ notification[type="critical"] {
.popup-notification-learnmore-link {
margin-top: .5em !important;
}
.popup-notification-button-container {
margin-top: 17px;
}
+.popup-notification-menubutton {
+ --main-color: #5295e5;
+ -moz-appearance: none;
+ background: var(--main-color);
+ padding: 0;
+}
+
+.popup-notification-contents,
+.popup-notification-learnmore-link {
+ margin: 0;
+ /* icon margin left (spacing size) + icon width (*2 spacing size) + icon margin right */
+ margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 10px) !important;
+}
+
%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);
+ border: 1px solid var(--main-color);
+ border-radius: 0;
+ padding: 1.5rem 2rem;
+ color: #fff;
+ }
- 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);
+ .popup-notification-menubutton > .button-menubutton-dropmarker {
+ --main-color: #5295e5;
+ margin: 0;
+ -moz-appearance: none !important;
+ background: var(--main-color);
+ border: 1px solid var(--main-color);
+ padding: 1.5rem 1rem;
+ color: #fff;
+ }
+ .popup-notification-menubutton > .button-menubutton-dropmarker image {
+ list-style-image: url("chrome://global/skin/icons/panelarrow-down-inverted.svg");
+ }
+
+ .popup-notification-menubutton > .button-menubutton-button[buttondown="true"],
+ .popup-notification-menubutton > .button-menubutton-dropmarker[open="true"] {
+ --main-color: #3579ca;
+ background: var(--main-color);
}
@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;
}
--- a/toolkit/themes/windows/global/popup.css
+++ b/toolkit/themes/windows/global/popup.css
@@ -1,22 +1,33 @@
/* 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");
/* ::::: Variables ::::: */
.panel-arrowcontent {
+ --panel-arrowcontent-spacing-size: 22px;
--panel-arrowcontent-padding: 10px;
--panel-arrowcontent-background: -moz-field;
--panel-arrowcontent-color: -moz-FieldText;
--panel-arrowcontent-border: 1px solid ThreeDShadow;
}
+#notification-popup .panel-arrowcontent {
+ --panel-arrowcontent-padding: 0;
+ --panel-arrowcontent-background: #fff;
+}
+
+#notification-popup .panel-notification-button-container,
+#notification-popup .panel-arrowcontent popupnotification {
+ margin: 0;
+}
+
/* ::::: menupopup ::::: */
menupopup,
panel {
border: 3px solid transparent;
-moz-border-top-colors : ThreeDLightShadow ThreeDHighlight ThreeDFace;
-moz-border-left-colors : ThreeDLightShadow ThreeDHighlight ThreeDFace;
-moz-border-right-colors : ThreeDDarkShadow ThreeDShadow ThreeDFace;