Revert r217952 to make behavior of horizontal scroll bar in page chrome://extensions keep consistence with chrome://settings.

This patch also fix issue 269450 using a "no-scroll" css style to remove the
scroll bar when showing the overlay in page chrome://extensions.

BUG=277974, 269450
TEST=1.Launch chrome & navigate to chrome://extensions/;
2.Zoom the page to 300% or till horizontal scroll bar appears;
3.Try to move the horizontal scroll bar & observe

Review URL: https://chromiumcodereview.appspot.com/22859067

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@219671 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 62 insertions, 68 deletions

diff --git a/chrome/browser/resources/extensions/extensions.css b/chrome/browser/resources/extensions/extensions.css
index 98bbdfe..b0745d7 100644
--- a/chrome/browser/resources/extensions/extensions.css
+++ b/chrome/browser/resources/extensions/extensions.css
@@ -2,18 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-}
-
-@media print {
-  body {
-    height: auto;
-  }
-}
-
 html.loading * {
   -webkit-transition-duration: 0 !important;
 }
@@ -24,6 +12,10 @@ html:not(.focus-outline-visible)
   border-color: rgba(0, 0, 0, 0.25);
 }
 
+.no-scroll {
+  overflow-y: hidden;
+}
+
 /* Developer mode */
 
 #dev-controls {
@@ -102,11 +94,6 @@ html:not(.focus-outline-visible)
 
 /* Contents */
 
-#page-container {
-  height: 100%;
-  overflow-y: auto;
-}
-
 #extension-settings {
   max-width: 738px;
 }
diff --git a/chrome/browser/resources/extensions/extensions.html b/chrome/browser/resources/extensions/extensions.html
index a381365..b9c1ab1 100644
--- a/chrome/browser/resources/extensions/extensions.html
+++ b/chrome/browser/resources/extensions/extensions.html
@@ -54,63 +54,61 @@
   </div>
 </div>
 
-<div id="page-container">
-  <div class="page" id="extension-settings">
-    <header id="page-header"><h1 i18n-content="extensionSettings"></h1>
-      <div id="header-controls" class="header-extras">
-        <div id="dev-toggle" class="checkbox">
-          <label>
-            <input id="toggle-dev-on" type="checkbox">
-            <span i18n-content="extensionSettingsDeveloperMode"></span>
-          </label>
-        </div>
-      </div>
-      <div class="page-banner profile-is-managed-banner">
-        <div class="page-banner-gradient">
-          <span class="page-banner-text"
-              i18n-content="extensionSettingsManagedMode"></span>
-        </div>
-      </div>
-    </header>
-    <div id="dev-controls" hidden>
-      <div id="apps-dev-tool-banner">
-        <div class="apps-dev-tool-banner-text"
-            i18n-content="extensionSettingsUseAppsDevTools"></div>
-        <button id="open-apps-dev-tools"
-            i18n-content="extensionSettingsOpenAppsDevTools"></button>
+<div class="page" id="extension-settings">
+  <header id="page-header"><h1 i18n-content="extensionSettings"></h1>
+    <div id="header-controls" class="header-extras">
+      <div id="dev-toggle" class="checkbox">
+        <label>
+          <input id="toggle-dev-on" type="checkbox">
+          <span i18n-content="extensionSettingsDeveloperMode"></span>
+        </label>
       </div>
-      <div class="buttons-container">
-        <button id="load-unpacked"
-            i18n-content="extensionSettingsLoadUnpackedButton"></button>
-        <button id="pack-extension"
-            i18n-content="extensionSettingsPackButton"></button>
-<if expr="pp_ifdef('chromeos')">
-        <button id="add-kiosk-app"
-            i18n-content="addKioskAppButton" hidden></button>
-</if>
-        <div id="dev-controls-spacer"></div>
-        <button id="update-extensions-now"
-            i18n-content="extensionSettingsUpdateButton"></button>
+    </div>
+    <div class="page-banner profile-is-managed-banner">
+      <div class="page-banner-gradient">
+        <span class="page-banner-text"
+            i18n-content="extensionSettingsManagedMode"></span>
       </div>
     </div>
-    <div id="extension-settings-list" class="empty-extension-list"></div>
-    <div id="no-extensions">
-      <span id="no-extensions-message"
-          i18n-content="extensionSettingsNoExtensions"></span>
-      <span id="suggest-gallery" class="more-extensions-link"
-          i18n-values=".innerHTML:extensionSettingsSuggestGallery">
-      </span>
+  </header>
+  <div id="dev-controls" hidden>
+    <div id="apps-dev-tool-banner">
+      <div class="apps-dev-tool-banner-text"
+          i18n-content="extensionSettingsUseAppsDevTools"></div>
+      <button id="open-apps-dev-tools"
+          i18n-content="extensionSettingsOpenAppsDevTools"></button>
     </div>
-    <div id="footer-section">
-      <a target="_blank" class="more-extensions-link"
-          i18n-values="href:extensionSettingsGetMoreExtensionsUrl"
-          i18n-content="extensionSettingsGetMoreExtensions"></a>
-      <a target="_blank" hidden
-          class="extension-commands-config"
-          i18n-content="extensionSettingsCommandsLink"
-          href="#"></a>
+    <div class="buttons-container">
+      <button id="load-unpacked"
+          i18n-content="extensionSettingsLoadUnpackedButton"></button>
+      <button id="pack-extension"
+          i18n-content="extensionSettingsPackButton"></button>
+<if expr="pp_ifdef('chromeos')">
+      <button id="add-kiosk-app"
+          i18n-content="addKioskAppButton" hidden></button>
+</if>
+      <div id="dev-controls-spacer"></div>
+      <button id="update-extensions-now"
+          i18n-content="extensionSettingsUpdateButton"></button>
     </div>
   </div>
+  <div id="extension-settings-list" class="empty-extension-list"></div>
+  <div id="no-extensions">
+    <span id="no-extensions-message"
+        i18n-content="extensionSettingsNoExtensions"></span>
+    <span id="suggest-gallery" class="more-extensions-link"
+        i18n-values=".innerHTML:extensionSettingsSuggestGallery">
+    </span>
+  </div>
+  <div id="footer-section">
+    <a target="_blank" class="more-extensions-link"
+        i18n-values="href:extensionSettingsGetMoreExtensionsUrl"
+        i18n-content="extensionSettingsGetMoreExtensions"></a>
+    <a target="_blank" hidden
+        class="extension-commands-config"
+        i18n-content="extensionSettingsCommandsLink"
+        href="#"></a>
+  </div>
 </div>
 
 <span id="font-measuring-div"></span>
diff --git a/chrome/browser/resources/extensions/extensions.js b/chrome/browser/resources/extensions/extensions.js
index b1d5a57..f71292e 100644
--- a/chrome/browser/resources/extensions/extensions.js
+++ b/chrome/browser/resources/extensions/extensions.js
@@ -356,6 +356,15 @@ cr.define('extensions', function() {
    *     are hidden.
    */
   ExtensionSettings.showOverlay = function(node) {
+    var pageDiv = $('extension-settings');
+    if (node) {
+      pageDiv.style.width = window.getComputedStyle(pageDiv).width;
+      document.body.classList.add('no-scroll');
+    } else {
+      document.body.classList.remove('no-scroll');
+      pageDiv.style.width = '';
+    }
+
     var currentlyShowingOverlay = ExtensionSettings.getCurrentOverlay();
     if (currentlyShowingOverlay)
       currentlyShowingOverlay.classList.remove('showing');