Bug 1441198 - Part 2 - Fix side spacing and line breaking of items adjacent to the site data description in about:preferences. r=nhnt11
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 28 Feb 2018 09:58:47 +0100
changeset 405958 86dbf9b038d475000cf7fa62edba8714a60c43b9
parent 405957 17ec5ecc5057aa69378e260aff120b0317efd0af
child 405959 a8f35224e73f485c6c9367a741cbc56faca065c4
push id33537
push usertoros@mozilla.com
push dateThu, 01 Mar 2018 17:29:37 +0000
treeherdermozilla-central@40ba247350da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1441198, 1441138
milestone60.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 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;