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

Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=291286

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

Cr-Commit-Position: refs/heads/master@{#291583}

1 files changed, 7 insertions, 5 deletions

diff --git a/chrome/renderer/resources/extensions/extension_options_events.js b/chrome/renderer/resources/extensions/extension_options_events.js
index ded82cf..1bc517c 100644
--- a/chrome/renderer/resources/extensions/extension_options_events.js
+++ b/chrome/renderer/resources/extensions/extension_options_events.js
@@ -20,10 +20,10 @@ var EXTENSION_OPTIONS_EVENTS = {
   },
   'sizechanged': {
     evt: CreateEvent('extensionOptionsInternal.onSizeChanged'),
-    customHandler: function(handler, event, webViewEvent) {
-      handler.handleSizeChangedEvent(event, webViewEvent);
+    customHandler: function(handler, event, extensionOptionsEvent) {
+      handler.handleSizeChangedEvent(event, extensionOptionsEvent);
     },
-    fields:['width', 'height']
+    fields:['newWidth', 'newHeight', 'oldWidth', 'oldHeight']
   }
 }
 
@@ -67,8 +67,10 @@ ExtensionOptionsEvents.prototype.setupEvent = function(name, info) {
 
 ExtensionOptionsEvents.prototype.handleSizeChangedEvent = function(
     event, extensionOptionsEvent) {
-  this.extensionOptionsInternal.onSizeChanged(extensionOptionsEvent.width,
-                                              extensionOptionsEvent.height);
+  this.extensionOptionsInternal.onSizeChanged(extensionOptionsEvent.newWidth,
+                                              extensionOptionsEvent.newHeight,
+                                              extensionOptionsEvent.oldWidth,
+                                              extensionOptionsEvent.oldHeight);
   this.extensionOptionsInternal.dispatchEvent(extensionOptionsEvent);
 }