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
--- 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;