Revert 291286: broke 'ExtensionOptionsApiTest.ExtensionCanEmbedOwnOptions'.

The test is failing on all platforms with the following error message:
"[FAIL] createGuestViewDOM: uncaught exception: Error in event handler for extensionOptionsInternal.onSizeChanged: Invocation of form guestViewInternal.setAutoSize(undefined, object) doesn't match definition guestViewInternal.setAutoSize(integer instanceId, object params)
Stack trace: Error: Invocation of form guestViewInternal.setAutoSize(undefined, object) doesn't match definition guestViewInternal.setAutoSize(integer instanceId, object params)
    at Object.normalizeArgumentsAndValidate (extensions::schemaUtils:113:11)
    at Object.\u003Canonymous> (extensions::binding:326:30)
    at ExtensionOptionsInternal.resize (extensions::extensionOptions:178:21)
    at ExtensionOptionsInternal.onSizeChanged (extensions::extensionOptions:153:10)
    at ExtensionOptionsEvents.handleSizeChangedEvent (extensions::extensionOptionsEvents:66:33)
    at Object.EXTENSION_OPTIONS_EVENTS.sizechanged.customHandler (extensions::extensionOptionsEvents:20:15)
    at info.evt.addListener.instanceId (extensions::extensionOptionsEvents:55:12)
    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:94:26)
    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
Error
    at extensions::test:93:22
    at exports.handle (extensions::uncaught_exception_handler:15:3)
    at EventImpl.dispatch_ (extensions::event_bindings:384:9)
    at dispatchArgs (extensions::event_bindings:247:26)
    at dispatchEvent (extensions::event_bindings:256:7)", source: chrome-extension://obocclgnomgjhjnenilbpmgkgfmdhecn/test.html (0)

> Implement smoother autosizing of the extension options overlay
> 
>  - Use element.animate to resize the overlay for embedded extension
>    options. When an <extensionoptions> element is embedded in a WebUI
>    overlay, if its size changes the overlay will smoothly expand to
>    surround the element.
>  - Add an API to <extensionoptions> to defer autosizing until its
>    embedder is ready. This is used to 'pin' the element's size until
>    the overlay is done expanding.
>  - Move the <extensionoptions> off screen until the overlay is done
>    expanding.
>  - Prevent <extensionoptions> from shrinking after the initial sizing.
>    This makes the look of the embedded options page more consistent.
> 
> BUG=386842
> 
> Review URL: https://codereview.chromium.org/480243003

TBR=ericzeng@chromium.org

Review URL: https://codereview.chromium.org/498633002

Cr-Commit-Position: refs/heads/master@{#291328}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@291328 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/guest_view/extension_options/extension_options_constants.cc

@@ -17,11 +17,7 @@ const char kAttributeMinHeight[] = "minheight";
 const char kAttributeMinWidth[] = "minwidth";
 
 const char kExtensionId[] = "extensionId";
-
-const char kNewHeight[] = "newHeight";
-const char kNewWidth[] = "newWidth";
-const char kOldHeight[] = "oldHeight";
-const char kOldWidth[] = "oldWidth";
-
+const char kHeight[] = "height";
+const char kWidth[] = "width";
 
 }  // namespace extensionoptions

chrome/browser/guest_view/extension_options/extension_options_constants.h

@@ -18,12 +18,8 @@ extern const char kAttributeMinHeight[];
 extern const char kAttributeMinWidth[];
 
 extern const char kExtensionId[];
-
-// SizeChanged event properties.
-extern const char kNewHeight[];
-extern const char kNewWidth[];
-extern const char kOldHeight[];
-extern const char kOldWidth[];
+extern const char kHeight[];
+extern const char kWidth[];
 
 }  // namespace extensionoptions
 

chrome/browser/guest_view/extension_options/extension_options_guest.cc

@@ -151,10 +151,8 @@ void ExtensionOptionsGuest::GuestSizeChangedDueToAutoSize(
     const gfx::Size& old_size,
     const gfx::Size& new_size) {
   scoped_ptr<base::DictionaryValue> args(new base::DictionaryValue());
-  args->SetInteger(extensionoptions::kNewWidth, new_size.width());
-  args->SetInteger(extensionoptions::kNewHeight, new_size.height());
-  args->SetInteger(extensionoptions::kOldWidth, old_size.width());
-  args->SetInteger(extensionoptions::kOldHeight, old_size.height());
+  args->SetInteger(extensionoptions::kWidth, new_size.width());
+  args->SetInteger(extensionoptions::kHeight, new_size.height());
   DispatchEventToEmbedder(new extensions::GuestViewBase::Event(
       extension_options_internal::OnSizeChanged::kEventName, args.Pass()));
 }

chrome/browser/resources/extensions/extension_options_overlay.css

-/* Copyright 2014 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-#extension-options-overlay {
-  overflow: hidden;
-}

chrome/browser/resources/extensions/extension_options_overlay.html

@@ -6,5 +6,5 @@ in the LICENSE file.
 <div id="extension-options-overlay" class="page">
   <div class="close-button"></div>
   <h1 id="extension-options-overlay-title"></h1>
-  <div id="extension-options-overlay-guest"></div>
+  <div class="extension-options-overlay-guest"></div>
 </div>

chrome/browser/resources/extensions/extension_options_overlay.js

@@ -49,7 +49,7 @@ cr.define('extensions', function() {
       this.setVisible_(false);
       var extensionoptions = document.querySelector('extensionoptions');
       if (extensionoptions)
-        $('extension-options-overlay-guest').removeChild(extensionoptions);
+        $('extension-options-overlay').removeChild(extensionoptions);
     },
 
     /**
@@ -60,68 +60,20 @@ cr.define('extensions', function() {
      *     as the header of the overlay.
      */
     setExtensionAndShowOverlay: function(extensionId, extensionName) {
-      $('extension-options-overlay-title').textContent = extensionName;
-
       var extensionoptions = new ExtensionOptions();
       extensionoptions.extension = extensionId;
       extensionoptions.autosize = 'on';
 
-      // The <extensionoptions> content's size needs to be restricted to the
-      // bounds of the overlay window. The overlay gives a min width and
-      // max height, but the maxheight does not include our header height
-      // (title and close button), so we need to subtract that to get the
-      // max height for the extension options.
-      var headerHeight = $('extension-options-overlay-title').offsetHeight;
-      var overlayMaxHeight =
-          parseInt($('extension-options-overlay').style.maxHeight);
-      extensionoptions.maxheight = overlayMaxHeight - headerHeight;
-
-      extensionoptions.minwidth =
-          parseInt(window.getComputedStyle($('extension-options-overlay'))
-              .minWidth);
-
-      // Resize the overlay if the <extensionoptions> changes size.
+      // TODO(ericzeng): Resize in a non-jarring way.
       extensionoptions.onsizechanged = function(evt) {
-        var overlayStyle =
-            window.getComputedStyle($('extension-options-overlay'));
-        var oldWidth = parseInt(overlayStyle.width);
-        var oldHeight = parseInt(overlayStyle.height);
-
-        // animationTime is the amount of time in ms that will be used to resize
-        // the overlay. It is calculated by multiplying the pythagorean distance
-        // between old and the new size (in px) with a constant speed of
-        // 0.25 ms/px.
-        var animationTime = 0.25 * Math.sqrt(
-            Math.pow(evt.newWidth - oldWidth, 2) +
-            Math.pow(evt.newHeight - oldHeight, 2));
-
-        var player = $('extension-options-overlay').animate([
-          {width: oldWidth + 'px', height: oldHeight + 'px'},
-          {width: evt.newWidth + 'px', height: evt.newHeight + 'px'}
-        ], {
-          duration: animationTime,
-          delay: 0
-        });
-
-        player.onfinish = function(e) {
-          // Allow the <extensionoptions> to autosize now that the overlay
-          // has resized, and move it back on-screen.
-          extensionoptions.resumeDeferredAutoSize();
-          $('extension-options-overlay-guest').style.position = 'static';
-          $('extension-options-overlay-guest').style.left = 'auto';
-        };
+        $('extension-options-overlay').style.width = evt.width;
+        $('extension-options-overlay').style.height = evt.height;
       }.bind(this);
 
-      // Don't allow the <extensionoptions> to autosize until the overlay
-      // animation is complete.
-      extensionoptions.setDeferAutoSize(true);
+      $('extension-options-overlay').appendChild(extensionoptions);
 
-      // Move the <extensionoptions> off screen until the overlay is ready
-      $('extension-options-overlay-guest').style.position = 'fixed';
-      $('extension-options-overlay-guest').style.left =
-          window.outerWidth + 'px';
+      $('extension-options-overlay-title').textContent = extensionName;
 
-      $('extension-options-overlay-guest').appendChild(extensionoptions);
       this.setVisible_(true);
     },
 

chrome/browser/resources/extensions/extensions.html

@@ -8,7 +8,6 @@
 <link rel="stylesheet" href="extension_error.css">
 <link rel="stylesheet" href="extension_error_overlay.css">
 <link rel="stylesheet" href="extension_load_error.css">
-<link rel="stylesheet" href="extension_options_overlay.css">
 <link rel="stylesheet" href="pack_extension_overlay.css">
 <link rel="stylesheet" href="chrome://resources/css/alert_overlay.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">

chrome/renderer/resources/extensions/extension_options.js

@@ -25,8 +25,6 @@ function ExtensionOptionsInternal(extensionoptionsNode) {
   this.extensionoptionsNode = extensionoptionsNode;
   this.viewInstanceId = IdGenerator.GetNextId();
 
-  this.autosizeDeferred = false;
-
   // on* Event handlers.
   this.eventHandlers = {};
 
@@ -140,18 +138,9 @@ ExtensionOptionsInternal.prototype.init = function() {
   this.createGuest();
 };
 
-ExtensionOptionsInternal.prototype.onSizeChanged =
-    function(newWidth, newHeight, oldWidth, oldHeight) {
-  if (this.autosizeDeferred) {
-    this.deferredAutoSizeState = {
-      newWidth: newWidth,
-      newHeight: newHeight,
-      oldWidth: oldWidth,
-      oldHeight: oldHeight
-    };
-  } else {
-    this.resize(newWidth, newHeight, oldWidth, oldHeight);
-  }
+ExtensionOptionsInternal.prototype.onSizeChanged = function(width, height) {
+  this.browserPluginNode.style.width = width + 'px';
+  this.browserPluginNode.style.height = height + 'px';
 };
 
 ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
@@ -162,32 +151,6 @@ ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
   return false;
 };
 
-ExtensionOptionsInternal.prototype.resize =
-    function(newWidth, newHeight, oldWidth, oldHeight) {
-  this.browserPluginNode.style.width = newWidth + 'px';
-  this.browserPluginNode.style.height = newHeight + 'px';
-
-  // Do not allow the options page's dimensions to shrink so that the options
-  // page has a consistent UI. If the new size is larger than the minimum,
-  // make that the new minimum size.
-  if (newWidth > this.minwidth)
-    this.minwidth = newWidth;
-  if (newHeight > this.minheight)
-    this.minheight = newHeight;
-
-  GuestViewInternal.setAutoSize(this.instanceId, {
-    'enableAutoSize': this.extensionoptionsNode.hasAttribute('autosize'),
-    'min': {
-      'width': parseInt(this.minwidth || 0),
-      'height': parseInt(this.minheight || 0)
-    },
-    'max': {
-      'width': parseInt(this.maxwidth || 0),
-      'height': parseInt(this.maxheight || 0)
-    }
-  });
-};
-
 // Adds an 'on<event>' property on the view, which can be used to set/unset
 // an event handler.
 ExtensionOptionsInternal.prototype.setupEventProperty = function(eventName) {
@@ -253,35 +216,7 @@ ExtensionOptionsInternal.prototype.resetSizeConstraintsIfInvalid = function () {
     this.minwidth = AUTO_SIZE_ATTRIBUTES.minwidth;
     this.maxwidth = AUTO_SIZE_ATTRIBUTES.maxwidth;
   }
-};
-
-/**
- * Toggles whether the element should automatically resize to its preferred
- * size. If set to true, when the element receives new autosize dimensions,
- * it passes them to the embedder in a sizechanged event, but does not resize
- * itself to those dimensions until the embedder calls resumeDeferredAutoSize.
- * This allows the embedder to defer the resizing until it is ready.
- * When set to false, the element resizes whenever it receives new autosize
- * dimensions.
- */
-ExtensionOptionsInternal.prototype.setDeferAutoSize = function(value) {
-  if (!value)
-    resumeDeferredAutoSize();
-  this.autosizeDeferred = value;
-};
-
-/**
- * Allows the element to resize to most recent set of autosize dimensions if
- * autosizing is being deferred.
- */
-ExtensionOptionsInternal.prototype.resumeDeferredAutoSize = function() {
-  if (this.autosizeDeferred) {
-    this.resize(this.deferredAutoSizeState.newWidth,
-                this.deferredAutoSizeState.newHeight,
-                this.deferredAutoSizeState.oldWidth,
-                this.deferredAutoSizeState.oldHeight);
-  }
-};
+}
 
 function registerBrowserPluginElement() {
   var proto = Object.create(HTMLObjectElement.prototype);
@@ -320,22 +255,6 @@ function registerExtensionOptionsElement() {
     internal.handleExtensionOptionsAttributeMutation(name, oldValue, newValue);
   };
 
-  var methods = [
-    'setDeferAutoSize',
-    'resumeDeferredAutoSize'
-  ];
-
-  // Forward proto.foo* method calls to ExtensionOptionsInternal.foo*.
-  for (var i = 0; methods[i]; ++i) {
-    var createHandler = function(m) {
-      return function(var_args) {
-        var internal = privates(this).internal;
-        return $Function.apply(internal[m], internal, arguments);
-      };
-    };
-    proto[methods[i]] = createHandler(methods[i]);
-  }
-
   window.ExtensionOptions =
       DocumentNatives.RegisterElement('extensionoptions', {prototype: proto});
 

chrome/renderer/resources/extensions/extension_options_events.js

@@ -16,10 +16,10 @@ var EXTENSION_OPTIONS_EVENTS = {
   },
   'sizechanged': {
     evt: CreateEvent('extensionOptionsInternal.onSizeChanged'),
-    customHandler: function(handler, event, extensionOptionsEvent) {
-      handler.handleSizeChangedEvent(event, extensionOptionsEvent);
+    customHandler: function(handler, event, webViewEvent) {
+      handler.handleSizeChangedEvent(event, webViewEvent);
     },
-    fields:['newWidth', 'newHeight', 'oldWidth', 'oldHeight']
+    fields:['width', 'height']
   }
 }
 
@@ -63,10 +63,8 @@ ExtensionOptionsEvents.prototype.setupEvent = function(name, info) {
 
 ExtensionOptionsEvents.prototype.handleSizeChangedEvent = function(
     event, extensionOptionsEvent) {
-  this.extensionOptionsInternal.onSizeChanged(extensionOptionsEvent.newWidth,
-                                              extensionOptionsEvent.newHeight,
-                                              extensionOptionsEvent.oldWidth,
-                                              extensionOptionsEvent.oldHeight);
+  this.extensionOptionsInternal.onSizeChanged(extensionOptionsEvent.width,
+                                              extensionOptionsEvent.height);
   this.extensionOptionsInternal.dispatchEvent(extensionOptionsEvent);
 }
 

chrome/test/data/extensions/api_test/extension_options/embed_self/test.js

@@ -125,10 +125,10 @@ chrome.test.runTests([
 
     extensionoptions.onsizechanged = function(evt) {
       try {
-        chrome.test.assertTrue(evt.newWidth >= 499);
-        chrome.test.assertTrue(evt.newHeight >= 499);
-        chrome.test.assertTrue(evt.newWidth <= 501);
-        chrome.test.assertTrue(evt.newHeight <= 501);
+        chrome.test.assertTrue(evt.width >= 499);
+        chrome.test.assertTrue(evt.height >= 499);
+        chrome.test.assertTrue(evt.width <= 501);
+        chrome.test.assertTrue(evt.height <= 501);
         done();
       } finally {
         document.body.removeChild(extensionoptions);