From 1eab0124a73d4cbb9ba6a1d9cf0b9e2a8f4b1463 Mon Sep 17 00:00:00 2001
From: Ricky Chien <ricky060709@gmail.com>
Date: Thu, 24 Aug 2017 11:58:50 +0800
Subject: [PATCH] Bug 1388796 - Remove unexpected horizontal scrollbar in
 about:preferences r=jaws

--HG--
extra : rebase_source : 84dfe24d8d81a14d7be39d4149af4d54ce5068b5
---
 .../base/content/aboutDialog-appUpdater.js    |  6 +--
 .../preferences/in-content-new/main.xul       | 42 ++++++++++---------
 .../preferences/in-content-new/privacy.xul    |  4 +-
 .../shared/incontentprefs/preferences.inc.css | 33 +++++++++++----
 .../in-content-new/preferences.css            |  2 +
 .../themes/shared/in-content/common.inc.css   |  2 +-
 6 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/browser/base/content/aboutDialog-appUpdater.js b/browser/base/content/aboutDialog-appUpdater.js
index 8ac796f92ab0..e196f93214fd 100644
--- a/browser/base/content/aboutDialog-appUpdater.js
+++ b/browser/base/content/aboutDialog-appUpdater.js
@@ -55,7 +55,7 @@ function appUpdater() {
 
   let manualURL = Services.urlFormatter.formatURLPref("app.update.url.manual");
   let manualLink = document.getElementById("manualLink");
-  manualLink.value = manualURL;
+  manualLink.textContent = manualURL;
   manualLink.href = manualURL;
   document.getElementById("failedLink").href = manualURL;
 
@@ -327,7 +327,7 @@ appUpdater.prototype =
    */
   setupDownloadingUI() {
     this.downloadStatus = document.getElementById("downloadStatus");
-    this.downloadStatus.value =
+    this.downloadStatus.textContent =
       DownloadUtils.getTransferTotal(0, this.update.selectedPatch.size);
     this.selectPanel("downloading");
     this.aus.addDownloadListener(this);
@@ -414,7 +414,7 @@ appUpdater.prototype =
    * See nsIProgressEventSink.idl
    */
   onProgress(aRequest, aContext, aProgress, aProgressMax) {
-    this.downloadStatus.value =
+    this.downloadStatus.textContent =
       DownloadUtils.getTransferTotal(aProgress, aProgressMax);
   },
 
diff --git a/browser/components/preferences/in-content-new/main.xul b/browser/components/preferences/in-content-new/main.xul
index c88dffa36bbb..b6fa04f5a6eb 100644
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -780,54 +780,54 @@
 #ifdef MOZ_UPDATER
   <vbox id="updateBox">
     <deck id="updateDeck" orient="vertical">
-      <hbox id="checkForUpdates" align="center">
+      <hbox id="checkForUpdates" align="start">
         <spacer flex="1"/>
         <button id="checkForUpdatesButton"
                 label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 oncommand="gAppUpdater.checkForUpdates();"/>
       </hbox>
-      <hbox id="downloadAndInstall" align="center">
+      <hbox id="downloadAndInstall" align="start">
         <spacer flex="1"/>
         <button id="downloadAndInstallButton"
                 oncommand="gAppUpdater.startDownload();"/>
                 <!-- label and accesskey will be filled by JS -->
       </hbox>
-      <hbox id="apply" align="center">
+      <hbox id="apply" align="start">
         <spacer flex="1"/>
         <button id="updateButton"
                 label="&update.updateButton.label3;"
                 accesskey="&update.updateButton.accesskey;"
                 oncommand="gAppUpdater.buttonRestartAfterDownload();"/>
       </hbox>
-      <hbox id="checkingForUpdates" align="center">
+      <hbox id="checkingForUpdates" align="start">
         <image class="update-throbber"/><label>&update.checkingForUpdates;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
-      <hbox id="downloading" align="center">
+      <hbox id="downloading" align="start">
         <image class="update-throbber"/><label>&update.downloading.start;</label><label id="downloadStatus"/><label>&update.downloading.end;</label>
       </hbox>
-      <hbox id="applying" align="center">
+      <hbox id="applying" align="start">
         <image class="update-throbber"/><label>&update.applying;</label>
       </hbox>
-      <hbox id="downloadFailed" align="center">
+      <hbox id="downloadFailed" align="start">
         <label>&update.failed.start;</label><label id="failedLink" class="text-link">&update.failed.linkText;</label><label>&update.failed.end;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 oncommand="gAppUpdater.checkForUpdates();"/>
       </hbox>
-      <hbox id="adminDisabled" align="center">
+      <hbox id="adminDisabled" align="start">
         <label>&update.adminDisabled;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
-      <hbox id="noUpdatesFound" align="center">
+      <hbox id="noUpdatesFound" align="start">
         <image class="face-smile"/>
         <label>&update.noUpdatesFound;</label>
         <spacer flex="1"/>
@@ -835,31 +835,33 @@
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 oncommand="gAppUpdater.checkForUpdates();"/>
       </hbox>
-      <hbox id="otherInstanceHandlingUpdates" align="center">
+      <hbox id="otherInstanceHandlingUpdates" align="start">
         <label>&update.otherInstanceHandlingUpdates;</label>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
-      <hbox id="manualUpdate" align="center">
+      <hbox id="manualUpdate" align="start">
         <image class="face-sad"/>
-        <label>&update.manual.start;</label><label id="manualLink" class="text-link"/><label>&update.manual.end;</label>
-        <spacer flex="1"/>
-        <button label="&update.checkForUpdatesButton.label;"
-                accesskey="&update.checkForUpdatesButton.accesskey;"
-                disabled="true"/>
-      </hbox>
-      <hbox id="unsupportedSystem" align="center">
         <description flex="1">
-          <label>&update.unsupported.start;</label><label id="unsupportedLink" class="text-link">&update.unsupported.linkText;</label><label>&update.unsupported.end;</label>
+          <label>&update.manual.start;</label><label id="manualLink" class="text-link"/><label>&update.manual.end;</label>
         </description>
         <spacer flex="1"/>
         <button label="&update.checkForUpdatesButton.label;"
                 accesskey="&update.checkForUpdatesButton.accesskey;"
                 disabled="true"/>
       </hbox>
-      <hbox id="restarting" align="center">
+      <hbox id="unsupportedSystem" align="start">
+        <description flex="1">
+          <label>&update.unsupported.start;</label><label id="unsupportedLink" class="learnMore text-link">&update.unsupported.linkText;</label><label>&update.unsupported.end;</label>
+        </description>
+        <spacer flex="1"/>
+        <button label="&update.checkForUpdatesButton.label;"
+                accesskey="&update.checkForUpdatesButton.accesskey;"
+                disabled="true"/>
+      </hbox>
+      <hbox id="restarting" align="start">
         <image class="update-throbber"/><label>&update.restarting;</label>
         <spacer flex="1"/>
         <button label="&update.updateButton.label3;"
diff --git a/browser/components/preferences/in-content-new/privacy.xul b/browser/components/preferences/in-content-new/privacy.xul
index 9deb930e175f..0b63d7a0fa3d 100644
--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -762,7 +762,7 @@
               flex="1" />
     <vbox>
       <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
-      <hbox>
+      <hbox pack="end">
         <button id="viewCertificatesButton"
                 class="accessory-button"
                 label="&viewCerts2.label;"
@@ -785,7 +785,7 @@
                                 &certmgr.delete2.label;"/>
       </hbox>
       <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
-      <hbox>
+      <hbox pack="end">
         <button id="viewSecurityDevicesButton"
                 class="accessory-button"
                 label="&viewSecurityDevices2.label;"
diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css
index ee3effbc9a15..2dae9618fa57 100644
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -21,7 +21,6 @@
   /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
   display: block;
   width: 664px;
-  min-width: 530px;
 }
 
 #mainPrefPane {
@@ -158,6 +157,7 @@ separator.thin:not([orient="vertical"]) {
 
 #startupTable {
   margin-top: 32px;
+  margin-inline-end: -4px;
   border-collapse: collapse;
 }
 
@@ -203,7 +203,7 @@ separator.thin:not([orient="vertical"]) {
 }
 
 .content-cell-item {
-  margin: 0 4px;
+  margin: 2px 4px;
 }
 
 #getStarted {
@@ -239,23 +239,32 @@ separator.thin:not([orient="vertical"]) {
   margin-bottom: 32px;
 }
 
-#updateBox button {
+#updateDeck > hbox > button {
   margin-top: 0;
   margin-bottom: 0;
+  margin-inline-end: 0;
 }
 
-#updateRadioGroup radio {
+#updateDeck > hbox > label {
+  -moz-box-flex: 1;
+}
+
+#manualLink {
+  margin-inline-start: 6px !important;
+}
+
+#updateRadioGroup > radio {
   height: 30px;
   margin: 2px 0;
 }
 
 #filter {
-  margin-inline-start: 0;
-  margin-bottom: 8px;
+  margin: 4px 0 8px 0;
 }
 
 #handlersView {
   height: 25em;
+  margin-inline-end: 0;
 }
 
 #handlersView > richlistitem {
@@ -535,6 +544,10 @@ separator.thin:not([orient="vertical"]) {
   margin-bottom: 4px;
 }
 
+#noFxaSignIn {
+  margin-inline-start: 8px;
+}
+
 .fxaSyncIllustration {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/sync-devices.svg");
   width: 312px;
@@ -613,7 +626,9 @@ separator.thin:not([orient="vertical"]) {
 .update-throbber {
   width: 16px;
   min-height: 16px;
-  margin-inline-end: 3px;
+  margin-inline-end: 8px;
+  margin-top: 7px;
+  margin-bottom: 7px;
   list-style-image: url("chrome://global/skin/icons/loading.png");
 }
 
@@ -663,6 +678,8 @@ separator.thin:not([orient="vertical"]) {
   width: 20px;
   height: 20px;
   margin-inline-end: 8px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .face-smile {
@@ -670,6 +687,8 @@ separator.thin:not([orient="vertical"]) {
   width: 20px;
   height: 20px;
   margin-inline-end: 8px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .search-container {
diff --git a/browser/themes/windows/preferences/in-content-new/preferences.css b/browser/themes/windows/preferences/in-content-new/preferences.css
index 55e174cbf86a..0f7e63070278 100644
--- a/browser/themes/windows/preferences/in-content-new/preferences.css
+++ b/browser/themes/windows/preferences/in-content-new/preferences.css
@@ -11,4 +11,6 @@
 textbox + button,
 filefield + button {
   margin-inline-start: -4px;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 4e7a8728a0b7..37db74c02483 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -722,7 +722,7 @@ xul|*.radio-label-box {
 
   .category {
     padding-inline-start: 13px; /* make category icons align center */
-    margin-inline-end: 40px;
+    margin-inline-end: 35px;
   }
 
   .help-button {