Bug 1330977 - Flex the labels of boxes that have Learn More links on them. r=mconley draft
authorJared Wein <jwein@mozilla.com>
Fri, 13 Jan 2017 12:50:25 -0500
changeset 464369 ee2d9607cdc45b05625c7d392e0c9ff5076f8454
parent 464206 3cedab21a7e65e6a1c4c2294ecfb5502575a46e3
child 542905 c401c94f8c21a3e93628df78829d5186aaadef43
push id42338
push userjwein@mozilla.com
push dateFri, 20 Jan 2017 21:37:40 +0000
reviewersmconley
bugs1330977
milestone53.0a1
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;
 }