Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences r=jaws

--HG--
extra : rebase_source : 84dfe24d8d81a14d7be39d4149af4d54ce5068b5

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);
   },
 

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;"

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;"

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 {

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;
 }

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 {