Bug 1392532 - Set specific font size with rem unit for each OS platform to optimize Photon visual refresh work since the default system font size values are different on different OS platform.
* The default system font size on Ubuntu is 14.6667px, Windows is 12px, and Mac is 11px.
MozReview-Commit-ID: 8qzsi3YRXaL
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -912,17 +912,17 @@
<hbox align="center">
<checkbox id="useRecommendedPerformanceSettings"
label="&useRecommendedPerformanceSettings2.label;"
accesskey="&useRecommendedPerformanceSettings2.accesskey;"
preference="browser.preferences.defaultPerformanceSettings.enabled"/>
<label id="performanceSettingsLearnMore" class="learnMore text-link">&performanceSettingsLearnMore.label;</label>
</hbox>
- <description class="indent">&useRecommendedPerformanceSettings2.description;</description>
+ <description class="indent tip-caption">&useRecommendedPerformanceSettings2.description;</description>
<vbox id="performanceSettings" class="indent" hidden="true">
<checkbox id="allowHWAccel"
label="&allowHWAccel.label;"
accesskey="&allowHWAccel.accesskey;"
preference="layers.acceleration.disabled"/>
<hbox align="center">
<label id="limitContentProcess" accesskey="&limitContentProcessOption.accesskey;" control="contentProcessCount">&limitContentProcessOption.label;</label>
@@ -933,18 +933,18 @@
<menuitem label="3" value="3"/>
<menuitem label="4" value="4"/>
<menuitem label="5" value="5"/>
<menuitem label="6" value="6"/>
<menuitem label="7" value="7"/>
</menupopup>
</menulist>
</hbox>
- <description id="contentProcessCountEnabledDescription">&limitContentProcessOption.description;</description>
- <description id="contentProcessCountDisabledDescription">&limitContentProcessOption.disabledDescription;<label class="text-link" href="https://wiki.mozilla.org/Electrolysis">&limitContentProcessOption.disabledDescriptionLink;</label></description>
+ <description id="contentProcessCountEnabledDescription" class="tip-caption">&limitContentProcessOption.description;</description>
+ <description id="contentProcessCountDisabledDescription" class="tip-caption">&limitContentProcessOption.disabledDescription;<label class="text-link" href="https://wiki.mozilla.org/Electrolysis">&limitContentProcessOption.disabledDescriptionLink;</label></description>
</vbox>
</groupbox>
<hbox id="browsingCategory"
class="subcategory"
hidden="true"
data-category="paneGeneral">
<label class="header-name" flex="1">&browsing.label;</label>
--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -697,17 +697,17 @@
</description>
<description flex="1">
<checkbox id="submitHealthReportBox" label="&enableHealthReport1.label;"
accesskey="&enableHealthReport1.accesskey;"/>
<label id="FHRLearnMore"
class="learnMore text-link">&healthReportLearnMore.label;</label>
</description>
#ifndef MOZ_TELEMETRY_REPORTING
- <description id="TelemetryDisabledDesc" class="indent" control="telemetryGroup">&healthReportingDisabled.label;</description>
+ <description id="TelemetryDisabledDesc" class="indent tip-caption" control="telemetryGroup">&healthReportingDisabled.label;</description>
#endif
</vbox>
#ifdef MOZ_CRASHREPORTER
<hbox align="center">
<checkbox id="automaticallySubmitCrashesBox"
preference="browser.crashReports.unsubmittedCheck.autoSubmit"
label="&alwaysSubmitCrashReports1.label;"
accesskey="&alwaysSubmitCrashReports1.accesskey;"/>
--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -40,31 +40,31 @@
data-category="paneSync">
<label class="header-name" flex="1">&paneSync1.title;</label>
</hbox>
<deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
<groupbox id="noFxaAccount">
<hbox>
<vbox flex="1">
- <label id="noFxaCaption">&signedOut.caption;</label>
+ <caption><label id="noFxaCaption">&signedOut.caption;</label></caption>
<description id="noFxaDescription" flex="1">&signedOut.description;</description>
</vbox>
<vbox>
<image class="fxaSyncIllustration"/>
</vbox>
</hbox>
<hbox id="fxaNoLoginStatus" align="center" flex="1">
<vbox>
<image class="fxaProfileImage"/>
</vbox>
<vbox flex="1">
<hbox align="center" flex="1">
<hbox align="center" flex="1">
- <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
+ <caption><label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label></caption>
</hbox>
<button id="noFxaSignIn"
class="accessory-button"
label="&signedOut.accountBox.signin2;"
accesskey="&signedOut.accountBox.signin2.accesskey;"/>
</hbox>
<hbox align="center" flex="1">
<html:a id="noFxaSignUp"
@@ -99,18 +99,18 @@
<!-- logged in and verified and all is good -->
<hbox id="fxaLoginVerified" align="center" flex="1">
<image class="fxaProfileImage actionable"
role="button"
onclick="gSyncPane.openChangeProfileImage(event);"
onkeypress="gSyncPane.openChangeProfileImage(event);"
tooltiptext="&profilePicture.tooltip;"/>
<vbox flex="1" pack="center">
- <hbox flex="1" align="center">
- <label id="fxaDisplayName" hidden="true"/>
+ <hbox flex="1" align="baseline">
+ <caption><label id="fxaDisplayName" hidden="true"/></caption>
<label class="fxaEmailAddress" flex="1" crop="end"/>
<button id="fxaUnlinkButton"
class="accessory-button"
label="&disconnect3.label;"
accesskey="&disconnect3.accesskey;"/>
</hbox>
<hbox>
<html:a id="verifiedManage" class="openLink"
--- a/browser/themes/linux/preferences/in-content-new/preferences.css
+++ b/browser/themes/linux/preferences/in-content-new/preferences.css
@@ -29,8 +29,12 @@ menulist.actionsMenu > .menulist-dropmar
margin-top: 11px;
margin-bottom: 11px;
}
textbox + button,
filefield + button {
margin-inline-start: -4px;
}
+
+#searchInput input {
+ font-size: 0.97rem;
+}
--- a/browser/themes/osx/preferences/in-content-new/preferences.css
+++ b/browser/themes/osx/preferences/in-content-new/preferences.css
@@ -22,8 +22,12 @@ filefield + button {
#popupPolicyRow {
/* Override styles from
browser/themes/osx/preferences/preferences.css */
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none;
}
+
+#searchInput input {
+ font-size: 1.18rem;
+}
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -25,41 +25,29 @@
#mainPrefPane {
width: 100%;
padding: 0;
font: message-box;
color: currentColor;
}
-#mainPrefPane groupbox,
-#mainPrefPane deck,
-#mainPrefPane description {
- font-size: 1.36rem;
-}
-
groupbox + groupbox {
margin-top: 16px;
}
groupbox + groupbox > .groupbox-body,
groupbox + vbox groupbox > .groupbox-body {
margin-top: 4px;
}
.groupbox-title {
margin-top: 16px;
}
-input,
-description.indent,
-.indent > description {
- font-size: 1.18rem !important;
-}
-
description.indent,
.indent > description {
color: #737373;
}
button,
treecol,
html|option {
@@ -114,21 +102,16 @@ separator.thin:not([orient="vertical"])
*/
.subcategory:not([hidden]) ~ .subcategory {
margin-top: 32px;
padding-top: 15px;
border-top: 1px solid rgba(12, 12, 13, 0.15);
}
-.header-name {
- font-size: 2rem;
- font-weight: 300;
-}
-
/* Category List */
#category-general > .category-icon {
list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
}
#category-search > .category-icon {
list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
@@ -150,16 +133,20 @@ separator.thin:not([orient="vertical"])
}
.header[hidden=true] {
display: none;
}
/* General Pane */
+#isDefaultLabel {
+ font-weight: 600;
+}
+
#startupGroup {
margin-top: 0px !important;
}
#startupTable {
margin-top: 32px;
margin-inline-end: -4px;
border-collapse: collapse;
@@ -209,21 +196,16 @@ separator.thin:not([orient="vertical"])
.content-cell-item {
margin: 2px 4px;
}
#getStarted {
font-size: 90%;
}
-#isNotDefaultLabel,
-#signedOutAccountBoxTitle {
- font-weight: 600;
-}
-
#downloadFolder {
margin-inline-start: 0;
}
#browserHomePage:-moz-locale-dir(rtl) input {
unicode-bidi: plaintext;
direction: rtl;
}
@@ -537,17 +519,16 @@ separator.thin:not([orient="vertical"])
margin-bottom: 0;
}
#tosPP-small-ToS {
margin-bottom: 14px;
}
#noFxaCaption {
- font-weight: bold;
line-height: 30px;
margin-top: 0;
margin-bottom: 4px;
}
#noFxaSignIn {
margin-inline-start: 8px;
}
@@ -565,31 +546,26 @@ separator.thin:not([orient="vertical"])
.separator {
border-bottom: 1px solid var(--in-content-box-border-color);
}
#fxaGroup {
margin-bottom: 32px;
}
-#signedOutAccountBoxTitle {
- font-weight: bold;
-}
-
.openLink {
line-height: 30px;
cursor: pointer;
}
.openLink:visited {
color: var(--in-content-link-color);
}
#fxaDisplayName {
- font-weight: bold;
margin-inline-end: 10px !important;
}
.fxaEmailAddress {
margin-inline-end: 8px !important;
}
.fxaLoginRejectedWarning {
@@ -644,17 +620,16 @@ separator.thin:not([orient="vertical"])
.help-button {
position: fixed;
left: 0;
bottom: 36px;
background-image: url("chrome://global/skin/icons/help.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
- font-size: 13px;
line-height: 36px;
height: 36px;
width: 168px;
background-position: left 10px top 10px;
background-size: 16px;
padding-inline-start: 38px;
margin-inline-start: 34px;
white-space: nowrap;
--- a/browser/themes/windows/preferences/in-content-new/preferences.css
+++ b/browser/themes/windows/preferences/in-content-new/preferences.css
@@ -9,8 +9,12 @@
}
textbox + button,
filefield + button {
margin-inline-start: -4px;
margin-top: 4px;
margin-bottom: 4px;
}
+
+#searchInput input {
+ font-size: 1.08rem;
+}
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -112,8 +112,30 @@ xul|treechildren::-moz-tree-row(multicol
xul|treechildren::-moz-tree-row(hover) {
background-color: var(--in-content-item-hover);
}
xul|treechildren::-moz-tree-row(selected) {
background-color: var(--in-content-item-selected);
}
+html|html *,
+xul|page *,
+xul|window * {
+ font-size: 1.11rem;
+}
+
+*|*.header-name {
+ font-size: 1.64rem;
+}
+
+*|*.category-name {
+ font-size: 1.19rem;
+}
+
+xul|caption > xul|label {
+ font-size: 1.27rem;
+}
+
+.tip-caption,
+.help-button {
+ font-size: 0.97rem;
+}
--- a/toolkit/themes/linux/mozapps/extensions/extensions.css
+++ b/toolkit/themes/linux/mozapps/extensions/extensions.css
@@ -37,8 +37,12 @@
padding: 0 1px;
}
.meta-rating > .star[on="true"],
.meta-rating[showrating="user"] > .star[hover] {
list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
padding: 0 1px;
}
+
+#header-search input {
+ font-size: 0.97rem;
+}
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -72,17 +72,16 @@ xul|*.radio-icon {
}
xul|*.numberbox-input-box {
-moz-appearance: none;
border-width: 0;
}
xul|description {
- font-size: 1.25rem;
line-height: 22px;
}
xul|*.text-link:-moz-focusring {
color: var(--in-content-link-highlight);
text-decoration: underline;
box-shadow: none;
}
@@ -125,8 +124,30 @@ xul|*.spinbuttons-button > xul|*.button-
display: none;
}
xul|textbox[type="search"]:not([searchbutton]) > .textbox-input-box > .textbox-search-sign {
list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
margin-inline-end: 5px;
}
+html|html *,
+xul|page *,
+xul|window * {
+ font-size: 1.36rem;
+}
+
+*|*.header-name {
+ font-size: 2rem;
+}
+
+*|*.category-name {
+ font-size: 1.45rem;
+}
+
+xul|caption > xul|label {
+ font-size: 1.55rem;
+}
+
+.tip-caption,
+.help-button {
+ font-size: 1.18rem;
+}
--- a/toolkit/themes/osx/mozapps/extensions/extensions.css
+++ b/toolkit/themes/osx/mozapps/extensions/extensions.css
@@ -46,8 +46,12 @@
.meta-rating > .star {
list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
padding: 0 1px;
}
.meta-rating > .star[on="true"] {
list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
}
+
+#header-search input {
+ font-size: 1.18rem;
+}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -74,18 +74,17 @@ html|hr {
xul|caption {
-moz-appearance: none;
margin: 0;
}
html|h2,
xul|caption > xul|checkbox,
xul|caption > xul|label {
- font-size: 1.3rem;
- font-weight: bold;
+ font-weight: 600;
line-height: 22px;
}
xul|caption > xul|checkbox,
xul|caption > xul|label {
margin: 0 !important;
}
@@ -687,17 +686,16 @@ xul|*.radio-label-box {
*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
border: var(--in-content-category-border-focus);
border-inline-start: none;
}
*|*.category-name {
line-height: 22px;
- font-size: 1.45rem;
padding-bottom: 2px;
padding-inline-start: 9px;
margin: 0;
-moz-user-select: none;
}
*|*.category-icon {
width: 24px;
@@ -748,17 +746,16 @@ xul|*.radio-label-box {
*|*.header {
margin-inline-end: 4px; /* add the 4px end-margin of other elements */
margin-bottom: 15px;
padding-bottom: 15px;
-moz-box-align: baseline;
}
*|*.header-name {
- font-size: 2rem;
font-weight: 300;
line-height: 30px;
margin: 0;
-moz-user-select: none;
}
/* File fields */
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -72,8 +72,31 @@ html|input[type="checkbox"]:-moz-focusri
/* Use a 2px border so that selected row highlight is still visible behind
an existing high-contrast border that uses the background color */
@media (-moz-windows-default-theme: 0) {
xul|treechildren::-moz-tree-row(selected),
xul|listbox xul|listitem[selected="true"] {
border: 2px dotted Highlight;
}
}
+
+html|html *,
+xul|page *,
+xul|window * {
+ font-size: 1.25rem;
+}
+
+*|*.header-name {
+ font-size: 1.83rem;
+}
+
+*|*.category-name {
+ font-size: 1.33rem;
+}
+
+xul|caption > xul|label {
+ font-size: 1.42rem;
+}
+
+.tip-caption,
+.help-button {
+ font-size: 1.08rem;
+}
--- a/toolkit/themes/windows/mozapps/extensions/extensions.css
+++ b/toolkit/themes/windows/mozapps/extensions/extensions.css
@@ -41,8 +41,12 @@
.meta-rating > .star[on="true"] {
list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
}
#detail-view .legacy-warning {
margin-top: 1rem;
}
+
+#header-search input {
+ font-size: 1.08rem;
+}