Bug 1413162 - Set width to manageAddresses and manageCreditCards dialogs and move button styles to common stylesheets. r=lchang,flod,jaws
Increased the dialog width and align html button styles with XUL button styles (padding, min-width) in common stylesheets.
MozReview-Commit-ID: Czzu0Ar6JfP
--- a/browser/extensions/formautofill/content/manageDialog.css
+++ b/browser/extensions/formautofill/content/manageDialog.css
@@ -1,45 +1,39 @@
/* 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/. */
div {
display: flex;
}
-button {
- padding: 3px 2em;
-}
-
fieldset {
margin: 0;
padding: 0;
border: none;
}
fieldset > legend {
box-sizing: border-box;
width: 100%;
padding: 0.4em 0.7em;
- font-size: 0.9em;
color: #808080;
background-color: var(--in-content-box-background-hover);
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px 2px 0 0;
-moz-user-select: none;
}
option:nth-child(even) {
background-color: -moz-oddtreerow;
}
#addresses,
#credit-cards {
- font-size: 0.85em;
width: 100%;
height: 16.6em;
margin: 0;
border-top: none;
border-radius: 0 0 2px 2px;
}
#addresses > option,
@@ -48,17 +42,16 @@ option:nth-child(even) {
align-items: center;
height: 1.6em;
padding-inline-start: 0.6em;
}
#controls-container {
flex: 0 1 100%;
justify-content: end;
- font-size: 0.9em;
margin-top: 1em;
}
#remove {
margin-inline-start: 0;
margin-inline-end: auto;
}
--- a/browser/extensions/formautofill/content/manageDialog.js
+++ b/browser/extensions/formautofill/content/manageDialog.js
@@ -44,16 +44,17 @@ class ManageRecords {
uninit() {
log.debug("uninit");
this.detachEventListeners();
this._elements = null;
}
localizeDocument() {
+ document.documentElement.style.width = FormAutofillUtils.stringBundle.GetStringFromName("manageDialogsWidth");
FormAutofillUtils.localizeMarkup(AUTOFILL_BUNDLE_URI, document);
}
/**
* Get the selected options on the addresses element.
*
* @returns {array<DOMElement>}
*/
--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -100,16 +100,19 @@ manageCreditCardsTitle = Saved Credit Ca
# in browser preferences.
addressesListHeader = Addresses
creditCardsListHeader = Credit Cards
showCreditCardsBtnLabel = Show Credit Cards
hideCreditCardsBtnLabel = Hide Credit Cards
removeBtnLabel = Remove
addBtnLabel = Add…
editBtnLabel = Edit…
+# LOCALIZATION NOTE (manageDialogsWidth): This strings sets the default width for windows used to manage addresses and
+# credit cards.
+manageDialogsWidth = 560px
# LOCALIZATION NOTE (addNewAddressTitle, editAddressTitle): The dialog title for creating or editing addresses
# in browser preferences.
addNewAddressTitle = Add New Address
editAddressTitle = Edit Address
givenName = First Name
additionalName = Middle Name
familyName = Last Name
--- a/browser/extensions/formautofill/skin/shared/editDialog.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog.css
@@ -32,22 +32,16 @@ div > span {
option {
padding: 0.3em 0.5em;
}
textarea {
resize: none;
}
-button {
- padding: 3px 2em;
- margin-inline-start: 10px;
- margin-inline-end: 0;
-}
-
input,
select {
box-sizing: border-box;
flex: 1 0 auto;
}
#controls-container {
flex: 0 1 100%;
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -103,8 +103,13 @@ xul|treechildren::-moz-tree-row(selected
*|*.header-name {
font-size: 1.64rem;
}
*|*.category-name {
font-size: 1.19rem;
}
+
+html|button {
+ /* XUL button min-width */
+ min-width: 6.3em;
+}
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -118,8 +118,13 @@ xul|textbox[type="search"]:not([searchbu
*|*.header-name {
font-size: 2rem;
}
*|*.category-name {
font-size: 1.45rem;
}
+
+html|button {
+ /* XUL button min-width */
+ min-width: 79px;
+}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -259,16 +259,17 @@ xul|button.primary:not([disabled="true"]
background-color: var(--in-content-primary-button-background-active);
}
xul|colorpicker[type="button"] {
padding: 6px;
width: 50px;
}
+html|button,
xul|button > xul|*.button-box,
xul|menulist > xul|*.menulist-label-box {
padding-right: 10px !important;
padding-left: 10px !important;
}
xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
margin-inline-end: 5px;
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -57,8 +57,13 @@ html|input[type="checkbox"]:-moz-focusri
*|*.header-name {
font-size: 1.83rem;
}
*|*.category-name {
font-size: 1.33rem;
}
+
+html|button {
+ /* XUL button min-width */
+ min-width: 6.3em;
+}