Bug 1330977 - Flex the labels of boxes that have Learn More links on them. r=mconley
authorJared Wein <jwein@mozilla.com>
Fri, 13 Jan 2017 12:50:25 -0500
changeset 375449 b3f4b8aa71e00e282583f9383267c17acc00a108
parent 375335 41d8ef56d03b9b5b382d0575def6712d9d51b1df
child 375450 329a64f144d29a7ba8237c0f4d55414ec2ba546d
push id6996
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 20:48:21 +0000
treeherdermozilla-beta@d89512dab048 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1330977
milestone53.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 1330977 - Flex the labels of boxes that have Learn More links on them. r=mconley This is to make sure that the text will wrap and not force the box to have its full width. Also set white-space:nowrap on the Learn More link to prevent the short text from breaking across lines since it is expected to be such a short string in most locales. MozReview-Commit-ID: IhTKomU3WbW
browser/components/preferences/in-content/advanced.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -204,49 +204,49 @@
     <tabpanel id="dataChoicesPanel" orient="vertical">
 #ifdef MOZ_TELEMETRY_REPORTING
       <groupbox>
         <caption>
           <checkbox id="submitHealthReportBox" label="&enableHealthReport.label;"
                     accesskey="&enableHealthReport.accesskey;"/>
         </caption>
         <vbox>
-          <hbox class="indent">
-            <label>&healthReportDesc.label;</label>
-            <label id="FHRLearnMore"
+          <hbox class="indent" flex="1">
+            <label flex="1">&healthReportDesc.label;</label>
+            <label id="FHRLearnMore" flex="1"
                    class="learnMore text-link">&healthReportLearnMore.label;</label>
           </hbox>
           <hbox class="indent">
             <groupbox flex="1">
               <caption>
                 <checkbox id="submitTelemetryBox" preference="toolkit.telemetry.enabled"
                           label="&enableTelemetryData.label;"
                           accesskey="&enableTelemetryData.accesskey;"/>
               </caption>
-              <hbox class="indent">
-                <label id="telemetryDataDesc">&telemetryDesc.label;</label>
-                <label id="telemetryLearnMore"
+              <hbox class="indent" flex="1">
+                <label id="telemetryDataDesc" flex="1">&telemetryDesc.label;</label>
+                <label id="telemetryLearnMore" flex="1"
                        class="learnMore text-link">&telemetryLearnMore.label;</label>
               </hbox>
             </groupbox>
           </hbox>
         </vbox>
       </groupbox>
 #endif
 #ifdef MOZ_CRASHREPORTER
       <groupbox>
         <caption>
           <checkbox id="automaticallySubmitCrashesBox"
                     preference="browser.crashReports.unsubmittedCheck.autoSubmit"
                     label="&alwaysSubmitCrashReports.label;"
                     accesskey="&alwaysSubmitCrashReports.accesskey;"/>
         </caption>
-        <hbox class="indent">
-          <label>&crashReporterDesc2.label;</label>
-          <label id="crashReporterLearnMore"
+        <hbox class="indent" flex="1">
+          <label flex="1">&crashReporterDesc2.label;</label>
+          <label id="crashReporterLearnMore" flex="1"
                  class="learnMore text-link">&crashReporterLearnMore.label;</label>
         </hbox>
       </groupbox>
 #endif
     </tabpanel>
 #endif
 
     <!-- Network -->
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -38,20 +38,20 @@ treecol {
 #blocklistsTree treechildren::-moz-tree-row {
   min-height: 36px;
 }
 
 #selectionCol {
   min-width: 26px;
 }
 
-/* For the "learn more" links, line up after text */
 .learnMore {
   margin-inline-start: 1.5em;
   font-weight: normal;
+  white-space: nowrap;
 }
 
 /* Category List */
 
 #categories {
   max-height: 100vh;
 }