Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(18)

Side by Side Diff: chrome/browser/resources/extensions/extension_options_overlay.js

Issue 900623003: extensions: focus options overlay content when shown. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@policy-icon-label
Patch Set: merge Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 cr.define('extensions', function() { 5 cr.define('extensions', function() {
6 'use strict'; 6 'use strict';
7 7
8 /** 8 /**
9 * The ExtensionOptionsOverlay will show an extension's options page using 9 * The ExtensionOptionsOverlay will show an extension's options page using
10 * an <extensionoptions> element. 10 * an <extensionoptions> element.
(...skipping 22 matching lines...) Expand all
33 initializePage: function(showOverlay) { 33 initializePage: function(showOverlay) {
34 var overlay = $('overlay'); 34 var overlay = $('overlay');
35 35
36 cr.ui.overlay.setupOverlay(overlay); 36 cr.ui.overlay.setupOverlay(overlay);
37 cr.ui.overlay.globalInitialization(); 37 cr.ui.overlay.globalInitialization();
38 overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this)); 38 overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this));
39 39
40 this.showOverlay_ = showOverlay; 40 this.showOverlay_ = showOverlay;
41 }, 41 },
42 42
43 setInitialFocus: function() {
44 this.getExentionOptions_().focus();
45 },
46
47 /** @return {?Element} */
48 getExentionOptions_: function() {
not at google - send to devlin 2015/02/03 20:52:04 Exention -> Extension kudos on being consistent,
Dan Beam 2015/02/04 17:15:38 Done. (ah, the magic of Ctrl+n)
49 return $('extension-options-overlay-guest').querySelector(
50 'extensionoptions');
51 },
52
43 /** 53 /**
44 * Handles a click on the close button. 54 * Handles a click on the close button.
45 * @param {Event} event The click event. 55 * @param {Event} event The click event.
46 * @private 56 * @private
47 */ 57 */
48 handleDismiss_: function(event) { 58 handleDismiss_: function(event) {
49 this.setVisible_(false); 59 this.setVisible_(false);
50 var extensionoptions = 60 var extensionoptions = this.getExentionOptions_();
51 $('extension-options-overlay-guest')
52 .querySelector('extensionoptions');
53
54 if (extensionoptions) 61 if (extensionoptions)
55 $('extension-options-overlay-guest').removeChild(extensionoptions); 62 $('extension-options-overlay-guest').removeChild(extensionoptions);
56 63
57 $('extension-options-overlay-icon').removeAttribute('src'); 64 $('extension-options-overlay-icon').removeAttribute('src');
58 65
59 // Remove the options query string. 66 // Remove the options query string.
60 uber.replaceState({}, ''); 67 uber.replaceState({}, '');
61 }, 68 },
62 69
63 /** 70 /**
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
118 var newHeight = Math.min(evt.height, maxHeight); 125 var newHeight = Math.min(evt.height, maxHeight);
119 126
120 // animationTime is the amount of time in ms that will be used to resize 127 // animationTime is the amount of time in ms that will be used to resize
121 // the overlay. It is calculated by multiplying the pythagorean distance 128 // the overlay. It is calculated by multiplying the pythagorean distance
122 // between old and the new size (in px) with a constant speed of 129 // between old and the new size (in px) with a constant speed of
123 // 0.25 ms/px. 130 // 0.25 ms/px.
124 var animationTime = 0.25 * Math.sqrt( 131 var animationTime = 0.25 * Math.sqrt(
125 Math.pow(newWidth - oldWidth, 2) + 132 Math.pow(newWidth - oldWidth, 2) +
126 Math.pow(newHeight - oldHeight, 2)); 133 Math.pow(newHeight - oldHeight, 2));
127 134
128 if (animation) { 135 if (animation)
129 animation.cancel(); 136 animation.cancel();
130 } 137
131 animation = overlay.animate([ 138 animation = overlay.animate([
132 {width: oldWidth + 'px', height: oldHeight + 'px'}, 139 {width: oldWidth + 'px', height: oldHeight + 'px'},
133 {width: newWidth + 'px', height: newHeight + 'px'} 140 {width: newWidth + 'px', height: newHeight + 'px'}
134 ], { 141 ], {
135 duration: animationTime, 142 duration: animationTime,
136 delay: 0 143 delay: 0
137 }); 144 });
138 145
139 animation.onfinish = function(e) { 146 animation.onfinish = function(e) {
140 animation = null; 147 animation = null;
148
141 // The <extensionoptions> element is ready to place back in the 149 // The <extensionoptions> element is ready to place back in the
142 // overlay. Make sure that it's sized to take up the full 150 // overlay. Make sure that it's sized to take up the full width/height
143 // width/height of the overlay. 151 // of the overlay.
144 overlayGuest.style.position = ''; 152 overlayGuest.style.position = '';
145 overlayGuest.style.left = ''; 153 overlayGuest.style.left = '';
146 overlayGuest.style.width = newWidth + 'px'; 154 overlayGuest.style.width = newWidth + 'px';
147 overlayGuest.style.height = newHeight + 'px'; 155 overlayGuest.style.height = newHeight + 'px';
156
157 cr.dispatchSimpleEvent($('overlay'), 'animationFinished');
148 }; 158 };
149 }.bind(this); 159 }.bind(this);
150 160
151 // Move the <extensionoptions> off screen until the overlay is ready. 161 // Move the <extensionoptions> off screen until the overlay is ready.
152 overlayGuest.style.position = 'fixed'; 162 overlayGuest.style.position = 'fixed';
153 overlayGuest.style.left = window.outerWidth + 'px'; 163 overlayGuest.style.left = window.outerWidth + 'px';
154 // Begin rendering at the default dimensions. This is also necessary to 164 // Begin rendering at the default dimensions. This is also necessary to
155 // cancel any width/height set on a previous render. 165 // cancel any width/height set on a previous render.
156 // TODO(kalman): This causes a visual jag where the overlay guest shows 166 // TODO(kalman): This causes a visual jag where the overlay guest shows
157 // up briefly. It would be better to render this off-screen first, then 167 // up briefly. It would be better to render this off-screen first, then
(...skipping 15 matching lines...) Expand all
173 /** @type {HTMLDivElement} */($('extension-options-overlay')) : 183 /** @type {HTMLDivElement} */($('extension-options-overlay')) :
174 null); 184 null);
175 } 185 }
176 }; 186 };
177 187
178 // Export 188 // Export
179 return { 189 return {
180 ExtensionOptionsOverlay: ExtensionOptionsOverlay 190 ExtensionOptionsOverlay: ExtensionOptionsOverlay
181 }; 191 };
182 }); 192 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698