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. draft
authorEvan Tseng <evan@tseng.io>
Tue, 08 Aug 2017 16:16:21 +0800
changeset 648796 728d0a44bbd3ee99e45bf6f1fd566737022ae741
parent 648573 a6a1f5c1d971dbee67ba6eec7ead7902351ddca2
child 726945 5df0c3709c89e9fbfd3152f648322f1957fb669e
push id74886
push userbmo:evan@tseng.io
push dateFri, 18 Aug 2017 10:10:40 +0000
bugs1386514
milestone57.0a1
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
browser/components/preferences/in-content-new/preferences.xul
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- 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,40 @@ 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;
+    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 */