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

Side by Side Diff: chrome/browser/resources/settings/settings_main/settings_main.js

Issue 2518233004: MD Settings: Move settings-advanced-page into settings-basic-page (Closed)
Patch Set: remove some redundancy Created 4 years, 1 month 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 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 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 /** 5 /**
6 * @typedef {{about: boolean, basic: boolean, advanced: boolean}} 6 * @typedef {{about: boolean, settings: boolean}}
7 */ 7 */
8 var MainPageVisibility; 8 var MainPageVisibility;
9 9
10 /** 10 /**
11 * @fileoverview 11 * @fileoverview
12 * 'settings-main' displays the selected settings page. 12 * 'settings-main' displays the selected settings page.
13 */ 13 */
14 Polymer({ 14 Polymer({
15 is: 'settings-main', 15 is: 'settings-main',
16 16
17 behaviors: [settings.RouteObserverBehavior], 17 behaviors: [settings.RouteObserverBehavior],
18 18
19 properties: { 19 properties: {
20 /** 20 /**
21 * Preferences state. 21 * Preferences state.
22 */ 22 */
23 prefs: { 23 prefs: {
24 type: Object, 24 type: Object,
25 notify: true, 25 notify: true,
26 }, 26 },
27 27
28 advancedToggleExpanded: { 28 advancedToggleExpanded: {
29 type: Boolean, 29 type: Boolean,
30 notify: true, 30 notify: true,
31 observer: 'updatePagesShown_',
32 }, 31 },
33 32
34 /**
35 * True if a section is fully expanded to hide other sections beneath it.
36 * Not true otherwise (even while animating a section open/closed).
37 * @private
38 */
39 hasExpandedSection_: Boolean,
40
41 /** @private */ 33 /** @private */
42 overscroll_: { 34 overscroll_: {
43 type: Number, 35 type: Number,
44 observer: 'overscrollChanged_', 36 observer: 'overscrollChanged_',
45 }, 37 },
46 38
47 /** 39 /**
48 * Controls which main pages are displayed via dom-ifs, based on the current 40 * Controls which main pages are displayed via dom-ifs, based on the current
49 * route and the Advanced toggle state. 41 * route.
50 * @private {!MainPageVisibility} 42 * @private {!MainPageVisibility}
51 */ 43 */
52 showPages_: { 44 showPages_: {
53 type: Object, 45 type: Object,
54 value: function() { 46 value: function() {
55 return {about: false, basic: false, advanced: false}; 47 return {about: false, settings: false};
56 }, 48 },
57 }, 49 },
58 50
59 /** 51 /**
60 * Whether a search operation is in progress or previous search results are 52 * Whether a search operation is in progress or previous search results are
61 * being displayed. 53 * being displayed.
62 * @private {boolean} 54 * @private {boolean}
63 */ 55 */
64 inSearchMode_: { 56 inSearchMode_: {
65 type: Boolean, 57 type: Boolean,
(...skipping 18 matching lines...) Expand all
84 */ 76 */
85 pageVisibility: { 77 pageVisibility: {
86 type: Object, 78 type: Object,
87 value: function() { return {}; }, 79 value: function() { return {}; },
88 }, 80 },
89 }, 81 },
90 82
91 /** @override */ 83 /** @override */
92 attached: function() { 84 attached: function() {
93 this.listen(this, 'freeze-scroll', 'onFreezeScroll_'); 85 this.listen(this, 'freeze-scroll', 'onFreezeScroll_');
94 var currentRoute = settings.getCurrentRoute();
95 this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage();
96 }, 86 },
97 87
98 /** @override */ 88 /** @override */
99 detached: function() { 89 detached: function() {
100 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_'); 90 this.unlisten(this, 'freeze-scroll', 'onFreezeScroll_');
101 }, 91 },
102 92
103 /** @private */ 93 /** @private */
104 overscrollChanged_: function() { 94 overscrollChanged_: function() {
105 if (!this.overscroll_ && this.boundScroll_) { 95 if (!this.overscroll_ && this.boundScroll_) {
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
153 this.offsetParent.style.overflow = 'hidden'; 143 this.offsetParent.style.overflow = 'hidden';
154 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth; 144 var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth;
155 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)'; 145 this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
156 } else { 146 } else {
157 this.ignoreScroll_ = false; 147 this.ignoreScroll_ = false;
158 this.offsetParent.style.overflow = ''; 148 this.offsetParent.style.overflow = '';
159 this.offsetParent.style.width = ''; 149 this.offsetParent.style.width = '';
160 } 150 }
161 }, 151 },
162 152
163 /**
164 * @param {boolean} opened Whether the menu is expanded.
165 * @return {string} Which icon to use.
166 * @private
167 */
168 arrowState_: function(opened) {
169 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
170 },
171
172 /**
173 * @return {boolean}
174 * @private
175 */
176 showAdvancedToggle_: function() {
177 return !this.inSearchMode_ && this.showPages_.basic &&
178 !this.hasExpandedSection_;
179 },
180
181 /**
182 * @return {boolean} Whether to show the basic page, taking into account both
183 * routing and search state.
184 * @private
185 */
186 showBasicPage_: function() {
187 return this.showPages_.basic || (
188 this.inSearchMode_ && !this.hasExpandedSection_);
189 },
190
191 /**
192 * @return {boolean} Whether to show the advanced page, taking into account
193 * both routing and search state.
194 * @private
195 */
196 showAdvancedPage_: function() {
197 return this.showPages_.advanced || (
198 this.inSearchMode_ && !this.hasExpandedSection_);
199 },
200
201 /** @param {!settings.Route} newRoute */ 153 /** @param {!settings.Route} newRoute */
202 currentRouteChanged: function(newRoute) { 154 currentRouteChanged: function(newRoute) {
203 // When the route changes from a sub-page to the main page, immediately
204 // update hasExpandedSection_ to unhide the other sections.
205 if (!newRoute.isSubpage())
206 this.hasExpandedSection_ = false;
207
208 if (settings.Route.ADVANCED.contains(newRoute))
209 this.advancedToggleExpanded = true;
210
211 this.updatePagesShown_(); 155 this.updatePagesShown_();
212 }, 156 },
213 157
214 /** @private */ 158 /** @private */
215 onSubpageExpand_: function() { 159 onSubpageExpand_: function() {
216 // The subpage finished expanding fully. Hide pages other than the current
217 // section's parent page.
218 this.hasExpandedSection_ = true;
219 this.updatePagesShown_(); 160 this.updatePagesShown_();
220 }, 161 },
221 162
222 /** 163 /**
223 * Updates the hidden state of the about, basic and advanced pages, based on 164 * Updates the hidden state of the about and settings pages based on the
224 * the current route and the Advanced toggle state. 165 * current route.
225 * @private 166 * @private
226 */ 167 */
227 updatePagesShown_: function() { 168 updatePagesShown_: function() {
228 var currentRoute = settings.getCurrentRoute(); 169 var inAbout = settings.Route.ABOUT.contains(settings.getCurrentRoute());
229 if (settings.Route.ABOUT.contains(currentRoute)) { 170 this.showPages_ = {about: inAbout, settings: !inAbout};
230 this.showPages_ = {about: true, basic: false, advanced: false};
231 } else {
232 this.showPages_ = {
233 about: false,
234 basic: settings.Route.BASIC.contains(currentRoute) ||
235 !this.hasExpandedSection_,
236 advanced: this.hasExpandedSection_ ?
237 settings.Route.ADVANCED.contains(currentRoute) :
238 this.advancedToggleExpanded,
239 };
240 }
241 171
242 // Calculate and set the overflow padding. 172 // Calculate and set the overflow padding.
243 this.updateOverscrollForPage_(); 173 this.updateOverscrollForPage_();
244 174
245 // Wait for any other changes, then calculate the overflow padding again. 175 // Wait for any other changes, then calculate the overflow padding again.
246 setTimeout(function() { 176 setTimeout(function() {
247 // Ensure any dom-if reflects the current properties. 177 // Ensure any dom-if reflects the current properties.
248 Polymer.dom.flush(); 178 Polymer.dom.flush();
249 this.updateOverscrollForPage_(); 179 this.updateOverscrollForPage_();
250 }.bind(this)); 180 }.bind(this));
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
283 if (!section || !section.offsetParent) 213 if (!section || !section.offsetParent)
284 return 0; 214 return 0;
285 215
286 // Find the distance from the section's top to the overscroll. 216 // Find the distance from the section's top to the overscroll.
287 var sectionTop = section.offsetParent.offsetTop + section.offsetTop; 217 var sectionTop = section.offsetParent.offsetTop + section.offsetTop;
288 var distance = this.$.overscroll.offsetTop - sectionTop; 218 var distance = this.$.overscroll.offsetTop - sectionTop;
289 219
290 return Math.max(0, this.offsetParent.clientHeight - distance); 220 return Math.max(0, this.offsetParent.clientHeight - distance);
291 }, 221 },
292 222
293 /** @private */
294 toggleAdvancedPage_: function() {
295 this.advancedToggleExpanded = !this.advancedToggleExpanded;
296 },
297
298 /** 223 /**
299 * Returns the root page (if it exists) for a route. 224 * Returns the root page (if it exists) for a route.
300 * @param {!settings.Route} route 225 * @param {!settings.Route} route
301 * @return {(?SettingsAboutPageElement|?SettingsAdvancedPageElement| 226 * @return {(?SettingsAboutPageElement|?SettingsBasicPageElement)}
302 * ?SettingsBasicPageElement)}
303 */ 227 */
304 getPage_: function(route) { 228 getPage_: function(route) {
305 if (settings.Route.ABOUT.contains(route)) { 229 if (settings.Route.ABOUT.contains(route)) {
306 return /** @type {?SettingsAboutPageElement} */( 230 return /** @type {?SettingsAboutPageElement} */(
307 this.$$('settings-about-page')); 231 this.$$('settings-about-page'));
308 } 232 }
309 if (settings.Route.ADVANCED.contains(route)) { 233 if (settings.Route.BASIC.contains(route) ||
310 return /** @type {?SettingsAdvancedPageElement} */( 234 settings.Route.ADVANCED.contains(route)) {
311 this.$$('settings-advanced-page'));
312 }
313 if (settings.Route.BASIC.contains(route)) {
314 return /** @type {?SettingsBasicPageElement} */( 235 return /** @type {?SettingsBasicPageElement} */(
315 this.$$('settings-basic-page')); 236 this.$$('settings-basic-page'));
316 } 237 }
317 assertNotReached(); 238 assertNotReached();
318 }, 239 },
319 240
320 /** 241 /**
321 * @param {string} query 242 * @param {string} query
322 * @return {!Promise} A promise indicating that searching finished. 243 * @return {!Promise} A promise indicating that searching finished.
323 */ 244 */
324 searchContents: function(query) { 245 searchContents: function(query) {
325 // Trigger rendering of the basic and advanced pages and search once ready. 246 // Trigger rendering of the basic and advanced pages and search once ready.
326 this.inSearchMode_ = true; 247 this.inSearchMode_ = true;
327 this.toolbarSpinnerActive = true; 248 this.toolbarSpinnerActive = true;
328 249
329 return new Promise(function(resolve, reject) { 250 return new Promise(function(resolve, reject) {
330 setTimeout(function() { 251 setTimeout(function() {
331 var whenSearchDone = settings.getSearchManager().search( 252 var whenSearchDone =
332 query, assert(this.getPage_(settings.Route.BASIC))); 253 assert(this.getPage_(settings.Route.BASIC)).searchContents(query);
333
334 if (this.pageVisibility.advancedSettings !== false) {
335 assert(whenSearchDone === settings.getSearchManager().search(
336 query, assert(this.getPage_(settings.Route.ADVANCED))));
337 }
338
339 whenSearchDone.then(function(request) { 254 whenSearchDone.then(function(request) {
340 resolve(); 255 resolve();
341 if (!request.finished) { 256 if (!request.finished) {
342 // Nothing to do here. A previous search request was canceled 257 // Nothing to do here. A previous search request was canceled
343 // because a new search request was issued before the first one 258 // because a new search request was issued before the first one
344 // completed. 259 // completed.
345 return; 260 return;
346 } 261 }
347 262
348 this.toolbarSpinnerActive = false; 263 this.toolbarSpinnerActive = false;
349 this.inSearchMode_ = !request.isSame(''); 264 this.inSearchMode_ = !request.isSame('');
350 this.showNoResultsFound_ = 265 this.showNoResultsFound_ =
351 this.inSearchMode_ && !request.didFindMatches(); 266 this.inSearchMode_ && !request.didFindMatches();
352 }.bind(this)); 267 }.bind(this));
353 }.bind(this), 0); 268 }.bind(this), 0);
354 }.bind(this)); 269 }.bind(this));
355 }, 270 },
356
357 /**
358 * @param {(boolean|undefined)} visibility
359 * @return {boolean} True unless visibility is false.
360 * @private
361 */
362 showAdvancedSettings_: function(visibility) {
363 return visibility !== false;
364 },
365 }); 271 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698