diff options
author | ericzeng <ericzeng@chromium.org> | 2014-08-23 14:28:02 -0700 |
---|---|---|
committer | Commit bot <commit-bot@chromium.org> | 2014-08-23 21:35:27 +0000 |
commit | a9438c47225d119a953ebf195210e655cb88dbc5 (patch) | |
tree | 60f3d4807e4501f47141fc2282bcd1fea919cb57 /chrome/renderer | |
parent | 9a3ddb332a5ec5e21a5767b2891ba161cda5a3d0 (diff) | |
download | chromium_src-a9438c47225d119a953ebf195210e655cb88dbc5.zip chromium_src-a9438c47225d119a953ebf195210e655cb88dbc5.tar.gz chromium_src-a9438c47225d119a953ebf195210e655cb88dbc5.tar.bz2 |
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}
Diffstat (limited to 'chrome/renderer')
-rw-r--r-- | chrome/renderer/resources/extensions/extension_options.js | 89 | ||||
-rw-r--r-- | chrome/renderer/resources/extensions/extension_options_events.js | 12 |
2 files changed, 92 insertions, 9 deletions
diff --git a/chrome/renderer/resources/extensions/extension_options.js b/chrome/renderer/resources/extensions/extension_options.js index b3adb0b..8cd4e80 100644 --- a/chrome/renderer/resources/extensions/extension_options.js +++ b/chrome/renderer/resources/extensions/extension_options.js @@ -25,6 +25,8 @@ function ExtensionOptionsInternal(extensionoptionsNode) { this.extensionoptionsNode = extensionoptionsNode; this.viewInstanceId = IdGenerator.GetNextId(); + this.autosizeDeferred = false; + // on* Event handlers. this.eventHandlers = {}; @@ -138,9 +140,18 @@ ExtensionOptionsInternal.prototype.init = function() { this.createGuest(); }; -ExtensionOptionsInternal.prototype.onSizeChanged = function(width, height) { - this.browserPluginNode.style.width = width + 'px'; - this.browserPluginNode.style.height = height + 'px'; +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.parseExtensionAttribute = function() { @@ -151,6 +162,32 @@ 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.guestInstanceId, { + '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) { @@ -216,7 +253,35 @@ 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); @@ -255,6 +320,22 @@ 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}); 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); } |