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. r=jaws

MozReview-Commit-ID: Bf69OW3xaxY

--HG--
extra : rebase_source : 19e19ac7cb422f697039a3dcef298fb9b592fa88

browser/components/preferences/in-content-new/preferences.xul

@@ -177,7 +177,7 @@
 
     <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"/>

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -18,8 +18,10 @@
 }
 
 .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 {

toolkit/themes/shared/in-content/common.inc.css

@@ -684,7 +684,7 @@ xul|*.radio-label-box {
   fill-opacity: 1;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 830px) {
   #categories {
     width: 118px;
   }
@@ -693,8 +693,24 @@ xul|*.radio-label-box {
     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;
   }
 }