Bug 1377174 - Tweak margin to match the spec r?jaws draft
authorRicky Chien <ricky060709@gmail.com>
Wed, 26 Jul 2017 15:00:55 +0800
changeset 619543 93a578303fb7b9136e9d33564b855b844608c7dd
parent 619534 689f63cc68b2a24f734b8b80ea60a590edf10706
child 640423 c0f6a87f46d47018672e28ef0be6ae1e357beaab
push id71707
push userbmo:rchien@mozilla.com
push dateWed, 02 Aug 2017 06:34:55 +0000
reviewersjaws
bugs1377174
milestone56.0a1
Bug 1377174 - Tweak margin to match the spec r?jaws MozReview-Commit-ID: GKZb427Ahum
browser/components/preferences/in-content-new/main.xul
browser/components/preferences/in-content-new/search.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -442,16 +442,18 @@
                 accesskey="&browserContainersSettings.accesskey;"
                 searchkeywords="&addButton.label;
                                 &preferencesButton.label;
                                 &removeButton.label;"/>
       </hbox>
     </hbox>
 </groupbox>
 
+<separator/>
+
 <hbox id="languageAndAppearanceCategory"
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&languageAndAppearance.label;</label>
 </hbox>
 
 <!-- Fonts and Colors -->
@@ -738,27 +740,28 @@
   </grid>
 </groupbox>
 
 #ifdef HAVE_SHELL_SERVICE
   <stringbundle id="bundleShell" src="chrome://browser/locale/shellservice.properties"/>
   <stringbundle id="bundleBrand" src="chrome://branding/locale/brand.properties"/>
 #endif
 
+<separator/>
+
 <hbox id="updatesCategory"
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&updateApplication.label;</label>
 </hbox>
 
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneGeneral" hidden="true">
   <label>&updateApplicationDescription.label;</label>
-  <separator/>
   <hbox align="start">
     <vbox flex="1">
       <description>
         &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
         <label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
       </description>
       <description id="distribution" class="text-blurb" hidden="true"/>
       <description id="distributionId" class="text-blurb" hidden="true"/>
@@ -864,17 +867,16 @@
         <button label="&update.updateButton.label3;"
                 accesskey="&update.updateButton.accesskey;"
                 disabled="true"/>
       </hbox>
     </deck>
   </vbox>
 #endif
 
-  <separator/>
 #ifdef MOZ_UPDATER
   <description>&updateApplication.description;</description>
   <radiogroup id="updateRadioGroup">
     <radio id="autoDesktop"
            value="auto"
            label="&updateAuto3.label;"
            accesskey="&updateAuto3.accesskey;"/>
     <radio value="checkOnly"
--- a/browser/components/preferences/in-content-new/search.xul
+++ b/browser/components/preferences/in-content-new/search.xul
@@ -18,23 +18,23 @@
             src="chrome://browser/content/preferences/in-content-new/search.js"/>
 
     <stringbundle id="engineManagerBundle" src="chrome://browser/locale/engineManager.properties"/>
 
     <hbox id="searchCategory"
           class="subcategory"
           hidden="true"
           data-category="paneSearch">
-      <label class="header-name" flex="1">&paneSearch.title;</label>
+      <description class="header-name" flex="1">&paneSearch.title;</description>
     </hbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" data-category="paneSearch">
       <caption label="&defaultSearchEngine.label;"/>
-      <label>&chooseYourDefaultSearchEngine2.label;</label>
+      <description>&chooseYourDefaultSearchEngine2.label;</description>
       <hbox>
         <!-- 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="defaultEngine">
             <menupopup/>
           </menulist>
         </hbox>
       </hbox>
@@ -50,17 +50,17 @@
               align="center" class="indent">
           <label flex="1">&urlBarSuggestionsPermanentPB.label;</label>
         </hbox>
       </vbox>
     </groupbox>
 
     <groupbox id="oneClickSearchProvidersGroup" data-category="paneSearch">
       <caption label="&oneClickSearchEngines.label;"/>
-      <label>&chooseWhichOneToDisplay2.label;</label>
+      <description>&chooseWhichOneToDisplay2.label;</description>
 
       <tree id="engineList" flex="1" rows="8" hidecolumnpicker="true" editable="true"
             seltype="single">
         <treechildren id="engineChildren" flex="1"/>
         <treecols>
           <treecol id="engineShown" type="checkbox" editable="true" sortable="false"/>
           <treecol id="engineName" flex="4" label="&engineNameColumn.label;" sortable="false"/>
           <treecol id="engineKeyword" flex="1" label="&engineKeywordColumn.label;" editable="true"
@@ -77,14 +77,12 @@
         <button id="removeEngineButton"
                 class="searchEngineAction"
                 label="&removeEngine.label;"
                 accesskey="&removeEngine.accesskey;"
                 disabled="true"
                 />
       </hbox>
 
-      <separator class="thin"/>
-
       <hbox id="addEnginesBox" pack="start">
         <label id="addEngines" class="text-link" value="&findMoreSearchEngines.label;"/>
       </hbox>
     </groupbox>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -150,16 +150,20 @@ html|option {
 }
 
 /* General Pane */
 
 #startupTable {
   border-collapse: collapse;
 }
 
+#startupTable > tr > .content-cell:not(:first-child) {
+  padding-inline-start: 8px;
+}
+
 #startupTable > tr > td {
   padding: 0; /* remove the padding from html.css */
 }
 
 #startupTable > tr:not(:first-child) > td {
   padding-top: 0.5em; /* add a spacing between the rows */
 }
 
@@ -626,21 +630,20 @@ groupbox {
 .help-button {
   position: fixed;
   left: 0;
   /* Needs to have enough gap from the bottom to not
      get behind the status panel (bug 1357841). */
   bottom: 2rem;
   font-size: 13px;
   line-height: 13px;
+  height: 14px;
   background-position: 15px;
   padding-inline-start: 35px;
   white-space: nowrap;
-  fill: #0C0C0D;
-  stroke: #0C0C0D;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   left: auto;
   right: 0;
   background-position: right 15px top 0;
 }
 
@@ -729,16 +732,42 @@ menulist[indicator=true] > menupopup men
   width: 30px;
   height: 30px;
   padding: 3px;
   -moz-context-properties: fill, fill-opacity;
   fill: #0C0C0D;
   fill-opacity: 0.8;
 }
 
+#categories {
+  padding-top: 70px;
+}
+
+#categories .category {
+  width: 240px;
+  height: 48px;
+  padding-inline-start: 44px;
+  padding-inline-end: 10px;
+  border-inline-start: none;
+}
+
+#categories .category-icon {
+  width: 30px;
+  height: 30px;
+  padding: 3px;
+}
+
+#categories .category-name {
+  padding-inline-start: 8px;
+}
+
+#category-general > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg#normal");
+}
+
 #category-general > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
 }
 
@@ -797,9 +826,208 @@ menulist[indicator=true] > menupopup men
 .androidLink {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-android.svg");
 }
 
 .iOSLink {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-ios.svg");
 }
 
+.help-button {
+  bottom: 36px;
+  background-position: 8px;
+  padding-inline-start: 38px;
+  margin-inline-start: 44px;
+  fill: #0C0C0D;
+  stroke: #0C0C0D;
+}
+
+.help-button:-moz-locale-dir(rtl) {
+  background-position: right 8px top 0;
+}
+
+.help-button:hover {
+  fill: #0A84FF;
+  stroke: #0A84FF;
+  stroke-opacity: 0;
+}
+
+.subcategory {
+  margin: 16px 0;
+}
+
+.subcategory > .header-name {
+  line-height: 30px;
+}
+
+checkbox {
+  height: 30px;
+  margin: 2px 0;
+}
+
+groupbox {
+  margin-top: 0px !important;
+  padding: 0;
+}
+
+menulist {
+  margin: 0 8px;
+}
+
+prefpane .groupbox-title > caption {
+  padding: 4px 0;
+}
+
+prefpane .groupbox-title {
+  margin: 0 0 2px 0 !important;
+  height: 30px;
+}
+
+prefpane .groupbox-body {
+  margin-bottom: 32px;
+  margin-top: 2px;
+}
+
+separator:not([orient="vertical"]) {
+  height: 4px;
+}
+
+#updateDeck button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#startupTable {
+  margin-top: 32px;
+}
+
+#startupTable > tr:nth-child(2) > td {
+  padding-top: 32px;
+}
+
+#startupTable > tr:nth-child(3) > td {
+  padding-top: 8px;
+}
+
+#fontSettings,
+#colorsSettings,
+#languagesBox {
+  margin: 2px 0;
+}
+
+#filter {
+  margin-bottom: 8px;
+}
+
+#startupGroup {
+  margin-top: 0px !important;
+}
+
+#updateApp > .groupbox-body > label {
+  margin: 0 0 4px 0;
+  line-height: 30px;
+}
+
+#updateApp > .groupbox-body > description {
+  line-height: 30px;
+  margin: 0;
+}
+
+#updateBox {
+  margin-top: 8px;
+  margin-bottom: 32px;
+}
+
+#updateRadioGroup radio {
+  height: 30px;
+  margin: 2px 0;
+}
+
+.content-cell-item {
+  margin: 0 4px;
+}
+
+.accessory-button {
+  margin: 0;
+}
+
+separator:not([class]) {
+  background-color: #0C0C0D;
+  opacity: 0.15;
+  height: 1px;
+}
+
+description {
+  line-height: 30px;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+#defaultEngine {
+  margin-top: 2px;
+  margin-bottom: 6px;
+}
+
+.checkbox-check {
+  margin-inline-end: 8px;
+}
+
+.indent {
+  margin-inline-start: 28px !important;
+}
+
+prefpane #engineList {
+  margin: 2px 0 5px 0;
+}
+
+.accessory-button {
+  max-height: 30px;
+  margin: 4px;
+}
+
+#formAutofillGroup {
+  margin-top: 28px;
+}
+
+#historyPane {
+  margin-top: 4px;
+}
+
+.separator.thin:not([orient="vertical"]) {
+  height: 8px;
+}
+
+#locationBarGroup > .text-link {
+  margin-top: 6px;
+}
+
+#allowSmartSize {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
+#doNotTrackLearnMoreBox {
+  margin-top: 32px;
+}
+
+#updateApp > .groupbox-title,
+#performanceGroup > .groupbox-title,
+#browsingGroup > .groupbox-title,
+#connectionGroup > .groupbox-title,
+#permissionsGroup > .groupbox-title,
+#dataCollectionGroup > .groupbox-title,
+#noFxaGroup > .groupbox-title {
+  display: none;
+}
+
+description > checkbox {
+  vertical-align: bottom;
+}
+
+#TelemetryDisabledDesc {
+  margin-inline-start: 31px !important;
+}
+
+#defaultFontSizeLabel {
+  margin-inline-start: 0px !important;
+}
+
 %endif