Bug 1392532 - Polish Preferences font size depending on platforms r=dao
authorRicky Chien <ricky060709@gmail.com>
Mon, 04 Sep 2017 11:06:10 +0800
changeset 428378 9aa2e9106aa353198a228d32186c4a9cddfdcb21
parent 428377 9d2fb90da23683a14c4d7b947bc1e397567ca3c7
child 428379 dd6a6ffa8d22ff349af8f8ec6018924b9867c2b1
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1392532
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1392532 - Polish Preferences font size depending on platforms r=dao MozReview-Commit-ID: IiqSSl7wQ6h
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/privacy.xul
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/preferences/preferences.dtd
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -905,17 +905,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>
@@ -926,18 +926,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/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -175,17 +175,17 @@
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
     <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
 
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
         <hbox class="search-container" pack="end">
-          <textbox type="search" id="searchInput" hidden="true" clickSelectsAll="true"/>
+          <textbox type="search" id="searchInput" style="width: &searchField.width;" hidden="true" clickSelectsAll="true"/>
         </hbox>
         <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul
 #include search.xul
 #include privacy.xul
 #include containers.xul
 #include sync.xul
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/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/sync.xul
+++ b/browser/components/preferences/in-content/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/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -8,16 +8,21 @@
 <!-- LOCALIZATION NOTE (prefWindow.titleGNOME): This is not used for in-content preferences -->
 <!ENTITY  prefWindow.titleGNOME   "&brandShortName; Preferences">
 <!-- When making changes to prefWindow.styleWin test both Windows Classic and
      Luna since widget heights are different based on the OS theme -->
 <!ENTITY  prefWinMinSize.styleWin2      "width: 42em; min-height: 37.5em;">
 <!ENTITY  prefWinMinSize.styleMac       "width: 47em; min-height: 40em;">
 <!ENTITY  prefWinMinSize.styleGNOME     "width: 45.5em; min-height: 40.5em;">
 
+<!-- LOCALIZATION NOTE: (searchField.width): This is used to determine the width
+     of the search field in about:preferences, in order to make entire placeholder
+     string visible -->
+<!ENTITY  searchField.width             "15.4em">
+
 <!ENTITY  paneSearchResults.title       "Search Results">
 <!ENTITY  paneGeneral.title             "General">
 <!ENTITY  paneSearch.title              "Search">
 <!ENTITY  paneFilesApplications.title   "Files &amp; Applications">
 <!ENTITY  panePrivacySecurity.title     "Privacy &amp; Security">
 <!ENTITY  paneContainers.title          "Container Tabs">
 <!ENTITY  paneUpdates.title             "Updates">
 
--- 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/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/search.svg");
@@ -149,16 +132,21 @@ separator.thin:not([orient="vertical"]) 
   justify-content: space-between;
 }
 
 .header[hidden=true] {
   display: none;
 }
 
 /* General Pane */
+
+#isDefaultLabel {
+  font-weight: 600;
+}
+
 #startupPageBox {
   padding-top: 32px;
 }
 
 #browserHomePage {
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
@@ -170,21 +158,16 @@ separator.thin:not([orient="vertical"]) 
 .homepage-button:last-of-type {
   margin-inline-end: 0;
 }
 
 #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;
 }
@@ -498,17 +481,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;
 }
@@ -526,31 +508,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 {
@@ -605,17 +582,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;
@@ -660,17 +636,16 @@ separator.thin:not([orient="vertical"]) 
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }
 
 #searchInput {
-  width: 250px;
   margin: 20px 0 30px 0;
 }
 
 #searchInput .textbox-search-icons:not([selectedIndex="1"]) {
   display: none;
 }
 
 .search-tooltip {
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -101,19 +101,41 @@ xul|spinbuttons {
   -moz-appearance: none;
 }
 
 xul|treechildren::-moz-tree-row(multicol, odd) {
   background-color: var(--in-content-box-background-odd);
 }
 
 /* These rules are duplicated from common.inc.css
- * because above -moz-tree-row(multicol, odd) rule 
- * overrides also hover/selected states. 
+ * because above -moz-tree-row(multicol, odd) rule
+ * overrides also hover/selected states.
  */
 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: 1rem;
+}
--- 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/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;
+}