Bug 1386514 - Implement Responsive Web Design to make `.pane-container` element's width as 530px to 664px and make category and question mark icons align center when window's width is smaller than 830px.
MozReview-Commit-ID: Bf69OW3xaxY
--- a/browser/components/preferences/in-content-new/preferences.xul
+++ b/browser/components/preferences/in-content-new/preferences.xul
@@ -172,17 +172,17 @@
</richlistbox>
<keyset>
<key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
</keyset>
<html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
- <vbox class="main-content" flex="1">
+ <vbox class="main-content" flex="1" align="start">
<vbox class="pane-container">
<hbox class="search-container" pack="end">
<textbox type="search" id="searchInput" hidden="true" clickSelectsAll="true"/>
</hbox>
<prefpane id="mainPrefPane">
#include searchResults.xul
#include main.xul
#include search.xul
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -13,18 +13,20 @@
--in-content-category-background: #fafafc;
}
.main-content {
padding-top: 0;
}
.pane-container {
+ /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
display: block;
- max-width: 800px;
+ width: 664px;
+ min-width: 530px;
}
#mainPrefPane {
width: 100%;
padding: 0;
font: message-box;
color: currentColor;
}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -679,27 +679,43 @@ xul|*.radio-label-box {
fill: currentColor;
fill-opacity: 0.8;
}
*|*.category[selected] > *|*.category-icon {
fill-opacity: 1;
}
-@media (max-width: 960px) {
+@media (max-width: 830px) {
#categories {
width: 118px;
}
.category-icon ~ .category-name {
display: none;
}
+ .category {
+ padding-inline-start: 47px; /* make category icons align center */
+ }
+
.help-button {
font-size: 0 !important;
+ margin-inline-start: 51px !important; /* make the question mark icon align center */
+ background-position: 0px !important;
+ padding-inline-start: 0px !important;
+ }
+
+ .main-content {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .pane-container {
+ margin-inline-end: 10px;
}
}
/* header */
*|*.header {
border-bottom: 1px solid var(--in-content-header-border-color);
margin-inline-end: 4px; /* add the 4px end-margin of other elements */