Alexandre Poirot
f6dd37fcb5
Move all LocalModeMappings out of toolbox (the local-mode-mappings-updated event). Also move some logic from options panel to LocalModeMappings (getNextAvailableOrigin, createNewMapping). If the file location isn't mapped yet, the notification offers two actions: * add to settings to permanently add a mapping while highlighting the new setting in the options panel, so that the user know where to configure it later on. * try a transient mapping that will be lost once devtools is closed. In both cases the mapping is automatically loaded. If the file location is mapped, it offers a navigation button. In all cases, a "don't show me this again" button is shown to permanently dismiss all these type of notifications. Note that there is some smart logic to handle files versus folder, where we will always map the folder or file's folder. We then compute the right URL if a file was given. Differential Revision: https://phabricator.services.mozilla.com/D294238
144 lines
3.4 KiB
CSS
144 lines
3.4 KiB
CSS
/* 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/. */
|
|
|
|
/* Layout */
|
|
|
|
.notificationbox .notificationInner {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 6px 4px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.notificationInner .messageText {
|
|
flex: 1;
|
|
width: 0;
|
|
min-width: max(50%, 100px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.notificationInner .notification-buttons-container {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: end;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.notificationInner .messageImage,
|
|
.notificationbox .notificationButton,
|
|
.notificationbox .messageCloseButton {
|
|
flex: none;
|
|
}
|
|
|
|
.notificationbox .notificationInner:dir(rtl) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Style */
|
|
|
|
.notificationbox .notification {
|
|
color: var(--theme-toolbar-color);
|
|
background-color: var(--theme-body-background);
|
|
text-shadow: none;
|
|
border-color: var(--theme-splitter-color);
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.notificationbox.border-top .notification {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.notificationbox.border-bottom .notification {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="info"] {
|
|
color: -moz-DialogText;
|
|
background-color: -moz-Dialog;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="new"] {
|
|
color: var(--theme-contrast-color);
|
|
background-color: var(--theme-body-alternate-emphasized-background);
|
|
}
|
|
|
|
/**
|
|
* Remove button borders for notifications highlighting New features.
|
|
*/
|
|
.notificationbox .notification .notificationButton {
|
|
border-radius: 2px;
|
|
border-width: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.notificationbox .notification[data-type="critical"] {
|
|
color: white;
|
|
color: var(--theme-text-color-error);
|
|
background-color: var(--theme-toolbar-error-background);
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.notificationbox .messageImage {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Default icons for notifications */
|
|
|
|
.notificationbox .messageImage[data-type="info"] {
|
|
background-image: url("chrome://devtools/skin/images/info.svg");
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="new"] {
|
|
background-image: url("chrome://devtools/skin/images/whatsnew.svg");
|
|
fill: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="warning"] {
|
|
background-image: url("chrome://devtools/skin/images/alert.svg");
|
|
/* Keep the icon colored to make it more eye-catching */
|
|
fill: #ffbf00;
|
|
}
|
|
|
|
.notificationbox .messageImage[data-type="critical"] {
|
|
background-image: url("chrome://devtools/skin/images/error.svg");
|
|
}
|
|
|
|
/* Close button */
|
|
|
|
.notificationbox .messageCloseButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("chrome://devtools/skin/images/close.svg");
|
|
background-position: center;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
border-radius: 2px;
|
|
border-width: 0;
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-color);
|
|
}
|
|
|
|
.notificationbox .messageCloseButton:hover {
|
|
background-color: var(--theme-button-active-background);
|
|
}
|
|
|
|
.notificationbox .messageCloseButton:active {
|
|
background-color: rgba(170, 170, 170, 0.4); /* --toolbar-tab-hover-active */
|
|
}
|
|
|
|
.notificationbox.wrapping .notificationInner .messageText {
|
|
white-space: normal;
|
|
}
|