Bug 1441198 - Part 2 - Fix side spacing and line breaking of items adjacent to the site data description in about:preferences. r=nhnt11 draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 28 Feb 2018 09:58:47 +0100
changeset 761023 249290d0d0a2a2ffbe3293edabc1548f7f5ab82f
parent 761022 94a2c51952b556e0ca9304ec3929462048098303
child 761024 9fd16608bc4f38ef8d94e7b57d2732c54e8bd318
push id100814
push userjhofmann@mozilla.com
push dateWed, 28 Feb 2018 14:52:37 +0000
reviewersnhnt11
bugs1441198, 1441138
milestone60.0a1
Bug 1441198 - Part 2 - Fix side spacing and line breaking of items adjacent to the site data description in about:preferences. r=nhnt11 When adding more characters to the description in the site data section, the display of the adjacent items breaks in two ways: - The "Learn More" link is pushed to the next line while it should stay on the same line as the description. I didn't really find a way to fix this while using a XUL label, so I switched to an html:span which has the correct layout. I don't see any drawbacks with using a span here. - The description text could in certain edge cases get too close to the "Clear Data" button. To fix that I added a new class which adds some padding. This isn't a problem in other parts of preferences except the history section (bug 1441138), where I also added this class. MozReview-Commit-ID: FO5tEx19ZUm
browser/components/preferences/in-content/privacy.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -96,24 +96,24 @@
     </hbox>
     <label>&historyHeader.post.label;</label>
   </hbox>
   <hbox>
     <deck id="historyPane" flex="1">
       <vbox id="historyRememberPane">
         <hbox align="center" flex="1">
           <vbox flex="1">
-            <description>&rememberDescription1.label;</description>
+            <description class="description-with-side-element">&rememberDescription1.label;</description>
           </vbox>
         </hbox>
       </vbox>
       <vbox id="historyDontRememberPane">
         <hbox align="center" flex="1">
           <vbox flex="1">
-            <description>&dontrememberDescription.label;</description>
+            <description class="description-with-side-element">&dontrememberDescription.label;</description>
           </vbox>
         </hbox>
       </vbox>
       <vbox id="historyCustomPane">
         <vbox>
           <checkbox id="privateBrowsingAutoStart"
                     label="&privateBrowsingPermanent2.label;"
                     accesskey="&privateBrowsingPermanent2.accesskey;"
@@ -167,72 +167,72 @@
 </groupbox>
 
 <!-- Site Data -->
 <groupbox id="siteDataGroup" hidden="true" data-category="panePrivacy" data-hidden-from-search="true">
   <caption><label>&siteData1.label;</label></caption>
 
   <hbox data-subcategory="sitedata" align="baseline">
     <vbox flex="1">
+      <description class="description-with-side-element" flex="1">
+        <html:span id="totalSiteDataSize" class="tail-with-learn-more"></html:span>
+        <label id="siteDataLearnMoreLink" class="learnMore text-link">&siteDataLearnMoreLink.label;</label>
+      </description>
       <radiogroup id="acceptCookies"
                   preference="network.cookie.cookieBehavior"
                   onsyncfrompreference="return gPrivacyPane.readAcceptCookies();"
                   onsynctopreference="return gPrivacyPane.writeAcceptCookies();">
-      <description flex="1">
-        <label id="totalSiteDataSize" class="tail-with-learn-more"></label>
-        <label id="siteDataLearnMoreLink" class="learnMore text-link">&siteDataLearnMoreLink.label;</label>
-      </description>
-      <hbox id="cookiesBox">
-        <radio label="&acceptCookies3.label;"
-               value="0"
-               accesskey="&acceptCookies3.accesskey;"
-               flex="1" />
-      </hbox>
-      <hbox id="keepRow"
-            class="indent"
-            align="center">
-        <label id="keepUntil"
-               control="keepCookiesUntil"
-               accesskey="&keepUntil2.accesskey;">&keepUntil2.label;</label>
-        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
-        <hbox>
-          <menulist id="keepCookiesUntil"
-                    preference="network.cookie.lifetimePolicy">
-            <menupopup>
-              <menuitem label="&expire.label;" value="0"/>
-              <menuitem label="&close.label;" value="2"/>
-            </menupopup>
-          </menulist>
+        <hbox id="cookiesBox">
+          <radio label="&acceptCookies4.label;"
+                 value="0"
+                 accesskey="&acceptCookies4.accesskey;"
+                 flex="1" />
+        </hbox>
+        <hbox id="keepRow"
+              class="indent"
+              align="center">
+          <label id="keepUntil"
+                 control="keepCookiesUntil"
+                 accesskey="&keepUntil2.accesskey;">&keepUntil2.label;</label>
+          <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+          <hbox>
+            <menulist id="keepCookiesUntil"
+                      preference="network.cookie.lifetimePolicy">
+              <menupopup>
+                <menuitem label="&expire.label;" value="0"/>
+                <menuitem label="&close.label;" value="2"/>
+              </menupopup>
+            </menulist>
+          </hbox>
         </hbox>
-      </hbox>
-      <hbox id="acceptThirdPartyRow"
-            class="indent"
-            align="center">
-        <label id="acceptThirdPartyLabel" control="acceptThirdPartyMenu"
-               accesskey="&acceptThirdParty3.pre.accesskey;">&acceptThirdParty3.pre.label;</label>
-        <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
-        <hbox>
-          <menulist id="acceptThirdPartyMenu" preference="network.cookie.cookieBehavior"
-          onsyncfrompreference="return gPrivacyPane.readAcceptThirdPartyCookies();"
-          onsynctopreference="return gPrivacyPane.writeAcceptThirdPartyCookies();">
-            <menupopup>
-              <menuitem label="&acceptThirdParty.always.label;" value="always"/>
-              <menuitem label="&acceptThirdParty.visited.label;" value="visited"/>
-              <menuitem label="&acceptThirdParty.never.label;" value="never"/>
-            </menupopup>
-          </menulist>
+        <hbox id="acceptThirdPartyRow"
+              class="indent"
+              align="center">
+          <label id="acceptThirdPartyLabel" control="acceptThirdPartyMenu"
+                 accesskey="&acceptThirdParty3.pre.accesskey;">&acceptThirdParty3.pre.label;</label>
+          <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+          <hbox>
+            <menulist id="acceptThirdPartyMenu" preference="network.cookie.cookieBehavior"
+            onsyncfrompreference="return gPrivacyPane.readAcceptThirdPartyCookies();"
+            onsynctopreference="return gPrivacyPane.writeAcceptThirdPartyCookies();">
+              <menupopup>
+                <menuitem label="&acceptThirdParty.always.label;" value="always"/>
+                <menuitem label="&acceptThirdParty.visited.label;" value="visited"/>
+                <menuitem label="&acceptThirdParty.never.label;" value="never"/>
+              </menupopup>
+            </menulist>
+          </hbox>
         </hbox>
-      </hbox>
-      <radio label="&blockCookies.label;"
-             value="2"
-             accesskey="&blockCookies.accesskey;"
-             flex="1" />
-    </radiogroup>
+        <radio label="&blockCookies.label;"
+               value="2"
+               accesskey="&blockCookies.accesskey;"
+               flex="1" />
+      </radiogroup>
     </vbox>
-    <vbox align="end">
+    <vbox>
       <button id="clearSiteDataButton"
           class="accessory-button"
           icon="clear"
           label="&clearSiteData1.label;" accesskey="&clearSiteData1.accesskey;"/>
       <button id="siteDataSettings"
               class="accessory-button"
               label="&siteDataSettings.label;"
               accesskey="&siteDataSettings.accesskey;"
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -80,16 +80,22 @@ button > hbox > label {
   height: 20px;
 }
 
 .tail-with-learn-more {
   margin-inline-start: 0px;
   margin-inline-end: 10px;
 }
 
+/* Add a bit of space to the end of descriptions to
+ * leave margin with e.g. additional buttons on the side. */
+.description-with-side-element {
+  margin-inline-end: 10px !important;
+}
+
 .learnMore {
   margin-inline-start: 0px;
   font-weight: normal;
   white-space: nowrap;
 }
 
 .accessory-button {
   height: 30px;