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

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

Issue 2228783005: MD Settings: Never underscroll (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@RefactorMainPageBehavior2
Patch Set: rebase Created 4 years, 4 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
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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, basic: boolean, advanced: boolean}}
7 */ 7 */
8 var MainPageVisibility; 8 var MainPageVisibility;
9 9
10 /** 10 /**
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
90 this.advancedToggleExpanded_ = e.detail; 90 this.advancedToggleExpanded_ = e.detail;
91 settings.navigateTo(this.advancedToggleExpanded_ ? 91 settings.navigateTo(this.advancedToggleExpanded_ ?
92 settings.Route.ADVANCED : settings.Route.BASIC); 92 settings.Route.ADVANCED : settings.Route.BASIC);
93 }.bind(this)); 93 }.bind(this));
94 94
95 }, 95 },
96 96
97 /** @private */ 97 /** @private */
98 overscrollChanged_: function() { 98 overscrollChanged_: function() {
99 if (!this.overscroll_ && this.boundScroll_) { 99 if (!this.overscroll_ && this.boundScroll_) {
100 this.parentNode.scroller.removeEventListener('scroll', this.boundScroll_); 100 this.offsetParent.removeEventListener('scroll', this.boundScroll_);
101 this.boundScroll_ = null; 101 this.boundScroll_ = null;
102 } else if (this.overscroll_ && !this.boundScroll_) { 102 } else if (this.overscroll_ && !this.boundScroll_) {
103 this.boundScroll_ = this.scrollEventListener_.bind(this); 103 this.boundScroll_ = this.setOverscroll_.bind(this, 0);
104 this.parentNode.scroller.addEventListener('scroll', this.boundScroll_); 104 this.offsetParent.addEventListener('scroll', this.boundScroll_);
105 } 105 }
106 }, 106 },
107 107
108 /** @private */ 108 /**
109 scrollEventListener_: function() { 109 * Sets the overscroll padding. Never forces a scroll, i.e., always leaves
110 var scroller = this.parentNode.scroller; 110 * any currently visible overflow as-is.
111 * @param {number=} opt_minHeight The minimum overscroll height needed.
112 */
113 setOverscroll_: function(opt_minHeight) {
114 var scroller = this.offsetParent;
115 if (!scroller)
116 return;
111 var overscroll = this.$.overscroll; 117 var overscroll = this.$.overscroll;
112 var visibleBottom = scroller.scrollTop + scroller.clientHeight; 118 var visibleBottom = scroller.scrollTop + scroller.clientHeight;
113 var overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight; 119 var overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight;
114 // How much of the overscroll is visible (may be negative). 120 // How much of the overscroll is visible (may be negative).
115 var visibleOverscroll = overscroll.scrollHeight - 121 var visibleOverscroll = overscroll.scrollHeight -
116 (overscrollBottom - visibleBottom); 122 (overscrollBottom - visibleBottom);
117 this.overscroll_ = Math.max(0, visibleOverscroll); 123 this.overscroll_ = Math.max(opt_minHeight || 0, visibleOverscroll);
118 }, 124 },
119 125
120 /** 126 /**
121 * @param {boolean} opened Whether the menu is expanded. 127 * @param {boolean} opened Whether the menu is expanded.
122 * @return {string} Which icon to use. 128 * @return {string} Which icon to use.
123 * @private 129 * @private
124 */ 130 */
125 arrowState_: function(opened) { 131 arrowState_: function(opened) {
126 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down'; 132 return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
127 }, 133 },
(...skipping 27 matching lines...) Expand all
155 this.pageVisibility.advancedSettings !== false); 161 this.pageVisibility.advancedSettings !== false);
156 this.advancedToggleExpanded_ = true; 162 this.advancedToggleExpanded_ = true;
157 } 163 }
158 } 164 }
159 165
160 // Wait for any other changes prior to calculating the overflow padding. 166 // Wait for any other changes prior to calculating the overflow padding.
161 setTimeout(function() { 167 setTimeout(function() {
162 // Ensure any dom-if reflects the current properties. 168 // Ensure any dom-if reflects the current properties.
163 Polymer.dom.flush(); 169 Polymer.dom.flush();
164 170
165 this.overscroll_ = this.overscrollHeight_(); 171 this.setOverscroll_(this.overscrollHeight_());
166 }.bind(this)); 172 }.bind(this));
167 }, 173 },
168 174
169 /** 175 /**
170 * Return the height that the overscroll padding should be set to. 176 * Return the height that the overscroll padding should be set to.
171 * This is used to determine how much padding to apply to the end of the 177 * This is used to determine how much padding to apply to the end of the
172 * content so that the last element may align with the top of the content 178 * content so that the last element may align with the top of the content
173 * area. 179 * area.
174 * @return {number} 180 * @return {number}
175 * @private 181 * @private
176 */ 182 */
177 overscrollHeight_: function() { 183 overscrollHeight_: function() {
178 var route = settings.getCurrentRoute(); 184 var route = settings.getCurrentRoute();
179 if (route.isSubpage() || this.showPages_.about) 185 if (!route.section || route.isSubpage() || this.showPages_.about)
180 return 0; 186 return 0;
181 187
182 var page = this.getPage_(route); 188 var page = this.getPage_(route);
183 var topSection = page && page.getSection(route.section); 189 var section = page && page.getSection(route.section);
184 if (!topSection || !topSection.offsetParent) 190 if (!section || !section.offsetParent)
185 return 0; 191 return 0;
186 192
187 // Offset to the selected section (relative to the scrolling window). 193 // Find the distance from the section's top to the overscroll.
188 let sectionTop = topSection.offsetParent.offsetTop + topSection.offsetTop; 194 var sectionTop = section.offsetParent.offsetTop + section.offsetTop;
189 // The height of the selected section and remaining content (sections). 195 var distance = this.$.overscroll.offsetTop - sectionTop;
190 let heightOfShownSections = this.$.overscroll.offsetTop - sectionTop; 196
191 return Math.max(0, this.parentNode.scrollHeight - heightOfShownSections); 197 return Math.max(0, this.offsetParent.clientHeight - distance);
192 }, 198 },
193 199
194 /** @private */ 200 /** @private */
195 toggleAdvancedPage_: function() { 201 toggleAdvancedPage_: function() {
196 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_); 202 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_);
197 }, 203 },
198 204
199 /** 205 /**
200 * Returns the root page (if it exists) for a route. 206 * Returns the root page (if it exists) for a route.
201 * @param {!settings.Route} route 207 * @param {!settings.Route} route
(...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
279 285
280 /** 286 /**
281 * @param {(boolean|undefined)} visibility 287 * @param {(boolean|undefined)} visibility
282 * @return {boolean} True unless visibility is false. 288 * @return {boolean} True unless visibility is false.
283 * @private 289 * @private
284 */ 290 */
285 showAdvancedSettings_: function(visibility) { 291 showAdvancedSettings_: function(visibility) {
286 return visibility !== false; 292 return visibility !== false;
287 }, 293 },
288 }); 294 });
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698