56fdf83248
Patch by kpatenio <kpatenio@mozilla.com>. 1. Allows for selecting a custom path or the default (Documents) path for saving backups. The selection is passed from the "turn-on-scheduled-backups" dialog to "BackupService". 2. After pressing the "Choose" button in the dialog, a filepicker will appear so that a folder can be selected. 3. Once the dialog is confirmed, the absolute path is saved to a pref called "browser.backup.location" and saved in the service state. Other changes: - Added the Documents folder as the default save location - Added an onUpdate function for "browser.backup.location" that passes the updated BackupService state to registered widgets (backup settings section, dialogs) - Added Storybook entries and tests for the newly updated input and filepicker Figma: https://www.figma.com/design/vNbX4c0ws0L1qr0mxpKvsW/Fx-Backup?node-id=147-4568&t=tILUMKfg8c6Ed1Ul-0 (turn on backup dialog) Differential Revision: https://phabricator.services.mozilla.com/D210850
120 lines
2.7 KiB
CSS
120 lines
2.7 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 https://mozilla.org/MPL/2.0/. */
|
|
|
|
@import url("chrome://global/skin/in-content/common.css");
|
|
|
|
:host {
|
|
--margin-inline-start-checkbox-content: calc(var(--checkbox-margin-inline) + var(--checkbox-size));
|
|
}
|
|
|
|
#backup-turn-on-scheduled-wrapper {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header"
|
|
"content"
|
|
"button-group";
|
|
grid-template-rows: auto auto auto;
|
|
|
|
#backup-turn-on-scheduled-header {
|
|
grid-area: header;
|
|
margin: 0;
|
|
}
|
|
|
|
& fieldset {
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#backup-turn-on-scheduled-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: content;
|
|
margin-block-start: var(--space-small);
|
|
margin-block-end: var(--space-large);
|
|
row-gap: var(--space-large);
|
|
}
|
|
|
|
#all-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: var(--space-xlarge);
|
|
}
|
|
|
|
#backup-location-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: var(--space-xsmall);
|
|
|
|
#backup-location-filepicker {
|
|
display: flex;
|
|
column-gap: var(--space-small);
|
|
align-items: center;
|
|
}
|
|
|
|
.backup-location-filepicker-input {
|
|
flex: 1;
|
|
margin-block: var(--space-xsmall);
|
|
margin-inline-start: 0;
|
|
padding-inline-start: var(--space-xxlarge);
|
|
background-repeat: no-repeat;
|
|
background-size: var(--icon-size-default);
|
|
background-position: var(--space-small) 50%;
|
|
|
|
/* For the placeholder icon */
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
|
|
&:dir(rtl) {
|
|
background-position: calc(100% - var(--space-small)) 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sensitive-data-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: var(--space-large);
|
|
|
|
#sensitive-data-checkbox-label {
|
|
display: flex;
|
|
gap: var(--checkbox-margin-inline);
|
|
align-items: center;
|
|
}
|
|
|
|
#sensitive-data-checkbox-label > input {
|
|
margin: 0;
|
|
}
|
|
|
|
#sensitive-data-checkbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: var(--space-xsmall);
|
|
}
|
|
|
|
#sensitive-data-checkbox > span {
|
|
margin-inline-start: var(--margin-inline-start-checkbox-content);
|
|
}
|
|
}
|
|
|
|
#passwords {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-inline-start: var(--margin-inline-start-checkbox-content);
|
|
|
|
& > #new-password-label, #repeat-password-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
& > #new-password-label > input, #repeat-password-label > input {
|
|
margin-inline-start: 0px;
|
|
}
|
|
}
|
|
|
|
#backup-turn-on-scheduled-button-group {
|
|
grid-area: button-group;
|
|
}
|
|
}
|