Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* Smart Window "Organize Tabs" panels. These are chrome-side XUL <panel>s */
#smartwindow-group-tabs-panel,
#smartwindow-group-tabs-flyout {
--panel-padding: var(--space-small) 0;
font: menu;
}
#smartwindow-group-tabs-panel {
--panel-width: 23em;
}
#smartwindow-group-tabs-flyout {
--panel-width: 22em;
}
.swgt-card,
.swgt-flyout {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.swgt-header {
margin: 0;
padding: var(--panel-menuitem-padding);
font-size: inherit;
font-weight: var(--font-weight-semibold);
text-align: center;
}
.swgt-separator {
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */
height: var(--border-width);
background-color: var(--panel-separator-color);
/* stylelint-enable stylelint-plugin-mozilla/use-design-tokens */
margin: var(--panel-separator-padding);
border: none;
}
/* The same treatment .subview-subheader gives every other panel subheading, so
* "Suggested groups" reads as a heading rather than another menu item. */
.swgt-section {
box-sizing: border-box;
margin: var(--panel-menuitem-margin);
margin-block: var(--space-xsmall);
padding: var(--panel-menuitem-padding);
padding-block: var(--space-xsmall);
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens --
matching panelUI-shared.css's .subview-subheader; chrome has no font-size
token, --font-size-small is unset outside the brand token set. */
font-size: 0.9em;
font-weight: inherit;
color: var(--text-color-deemphasized);
}
.swgt-row,
.swgt-flyout-tab {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--space-small);
margin: var(--panel-menuitem-margin);
padding: var(--panel-menuitem-padding);
appearance: none;
border: none;
border-radius: var(--panel-menuitem-border-radius);
background-color: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.swgt-row:hover,
.swgt-row.is-active,
.swgt-flyout-tab:hover {
background-color: var(--button-background-color-menu-hover);
color: var(--button-text-color-menu-hover);
}
/* The card takes programmatic focus when the panel opens (to move screen-reader
* focus into the dialog); it is not a keyboard stop, so it shows no ring. The
* controls inside it do. */
.swgt-card:focus-visible {
outline: none;
}
.swgt-row:focus-visible,
.swgt-flyout-tab:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
.swgt-row-label,
.swgt-flyout-tab-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.swgt-favicons {
display: flex;
align-items: center;
flex: none;
}
.swgt-favicon {
width: var(--size-item-small);
height: var(--size-item-small);
border-radius: var(--border-radius-xsmall);
background-color: var(--background-color-box);
box-shadow: var(--box-shadow-level-1);
flex: none;
@media (forced-colors: active) {
/* Without the shadow the overlapping edges need an outline to stay apart. */
box-shadow: none;
outline: var(--border-width) solid var(--border-color);
}
}
/* Overlap the row's favicons, leading icon on top. */
.swgt-favicons > .swgt-favicon {
position: relative;
&:not(:first-child) {
margin-inline-start: calc(-1 * var(--space-small));
}
&:nth-child(1) {
z-index: 2;
}
&:nth-child(2) {
z-index: 1;
}
}
/* Same chicklet the tab strip and the tab groups list use, so it picks up the
* Nova shape on its own. The --tab-group-* colors are set inline per group by
* the card. */
.swgt-group-icon {
width: var(--icon-size-small);
height: var(--icon-size-small);
flex: none;
-moz-context-properties: fill, stroke;
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */
fill: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
stroke: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
@media -moz-pref("browser.nova.enabled") {
fill: var(--tab-group-background-color);
stroke: var(--tab-group-background-color);
}
/* stylelint-enable stylelint-plugin-mozilla/use-design-tokens */
}
.swgt-message {
margin: var(--panel-menuitem-margin);
padding: var(--panel-menuitem-padding);
color: var(--text-color-deemphasized);
}
@media not (prefers-contrast) {
.swgt-loading {
--swgt-loading-gradient: linear-gradient(
90deg,
var(--color-violet-50) 0%,
var(--color-violet-40) 22%,
var(--color-pink-40) 42%,
var(--color-pink-30) 52%,
var(--color-violet-40) 72%,
var(--color-violet-50) 100%
);
background-image: var(--swgt-loading-gradient);
background-size: 200% auto;
background-clip: text;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens --
the gradient above is the text color. */
color: transparent;
font-weight: var(--font-weight-semibold);
}
@media (prefers-reduced-motion: no-preference) {
.swgt-loading {
animation: swgtLoadingShimmer 2s ease-in-out infinite;
}
}
}
@keyframes swgtLoadingShimmer {
from {
background-position: 100% center;
}
to {
background-position: -100% center;
}
}
.swgt-note {
--swgt-note-background: var(--background-color-box);
--swgt-note-border-color: var(--border-color);
display: flex;
align-items: center;
margin: var(--space-medium) var(--panel-menuitem-margin-inline);
padding: var(--space-medium);
background-color: var(--swgt-note-background);
border: var(--border-width) solid var(--swgt-note-border-color);
border-radius: var(--border-radius-medium);
overflow: hidden;
@media not (prefers-contrast) {
--swgt-note-background: light-dark(var(--color-violet-0), color-mix(in srgb, var(--color-violet-50) 12%, transparent));
--swgt-note-border-color: light-dark(var(--color-violet-10), color-mix(in srgb, var(--color-violet-50) 35%, transparent));
}
}
.swgt-note > .swgt-message {
flex: 1;
min-width: 0;
margin: 0;
padding: 0;
}
/* Spans the note's full height, so the note's bottom edge crops the artwork
* the way the design crops it. */
.swgt-note-art {
flex: none;
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens --
the artwork is cropped at 56px in the design and no size token matches. */
width: 56px;
height: 56px;
/* stylelint-enable stylelint-plugin-mozilla/use-design-tokens */
margin-block: calc(-1 * var(--space-medium));
margin-inline-start: var(--space-medium);
background-image: url("chrome://browser/content/aiwindow/assets/kit-meditating.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
@media (forced-colors: active) {
display: none;
}
}
.swgt-flyout-list {
display: flex;
flex-direction: column;
}
#smartwindow-group-tabs-flyout tab-groups-list {
> #tab-groups-list-create-group,
> hr {
display: none;
}
}
.swgt-ungroup {
color: var(--text-color-deemphasized);
}
.swgt-view-tab-groups {
&::after {
content: url("chrome://global/skin/icons/arrow-right.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--opacity-deemphasized-strong);
display: flex;
}
&:-moz-locale-dir(rtl)::after {
content: url("chrome://global/skin/icons/arrow-left.svg");
}
}
.swgt-create-all-icon,
.swgt-ungroup-icon {
width: var(--icon-size);
height: var(--icon-size);
flex: none;
background-color: currentColor;
mask: no-repeat center / var(--icon-size) var(--icon-size);
}
.swgt-create-all-icon {
mask-image: url("chrome://global/skin/icons/edit-copy.svg");
}
.swgt-ungroup-icon {
mask-image: url("chrome://global/skin/icons/undo.svg");
}