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

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

Issue 2201553002: [MD settings] only add overscroll if needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: described math 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 * @fileoverview 6 * @fileoverview
7 * 'settings-main' displays the selected settings page. 7 * 'settings-main' displays the selected settings page.
8 */ 8 */
9 Polymer({ 9 Polymer({
10 is: 'settings-main', 10 is: 'settings-main',
(...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after
134 134
135 if (this.showPages_.advanced) { 135 if (this.showPages_.advanced) {
136 assert(!this.pageVisibility || 136 assert(!this.pageVisibility ||
137 this.pageVisibility.advancedSettings !== false); 137 this.pageVisibility.advancedSettings !== false);
138 this.advancedToggleExpanded_ = true; 138 this.advancedToggleExpanded_ = true;
139 } 139 }
140 } 140 }
141 141
142 // Wait for any other changes prior to calculating the overflow padding. 142 // Wait for any other changes prior to calculating the overflow padding.
143 setTimeout(function() { 143 setTimeout(function() {
144 // Ensure any dom-if reflects the current properties.
145 Polymer.dom.flush();
146
144 this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px'; 147 this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';
145 }.bind(this)); 148 }.bind(this));
146 }, 149 },
147 150
148 /** 151 /**
149 * Return the height that the over scroll padding should be set to. 152 * Return the height that the overscroll padding should be set to.
150 * This is used to determine how much padding to apply to the end of the 153 * This is used to determine how much padding to apply to the end of the
151 * content so that the last element may align with the top of the content 154 * content so that the last element may align with the top of the content
152 * area. 155 * area.
153 * @return {number} 156 * @return {number}
154 * @private 157 * @private
155 */ 158 */
156 overscrollHeight_: function() { 159 overscrollHeight_: function() {
157 if (!this.currentRoute || this.currentRoute.subpage.length != 0 || 160 if (!this.currentRoute || this.currentRoute.subpage.length != 0 ||
158 this.showPages_.about) { 161 this.showPages_.about) {
159 return 0; 162 return 0;
160 } 163 }
161 164
162 // Ensure any dom-if reflects the current properties. 165 var query = 'settings-section[section="' + this.currentRoute.section + '"]';
163 Polymer.dom.flush(); 166 var topSection = this.$$('settings-basic-page').$$(query);
167 if (!topSection && this.showPages_.advanced)
168 topSection = this.$$('settings-advanced-page').$$(query);
164 169
165 /** 170 if (!topSection)
166 * @param {!Element} element 171 return 0;
167 * @return {number}
168 */
169 var calcHeight = function(element) {
170 var style = getComputedStyle(element);
171 var height = this.parentNode.scrollHeight - element.offsetHeight +
172 parseFloat(style.marginTop) + parseFloat(style.marginBottom);
173 assert(height >= 0);
174 return height;
175 }.bind(this);
176 172
177 if (this.showPages_.advanced) { 173 // Offset to the selected section (relative to the scrolling window).
178 var lastSection = this.$$('settings-advanced-page').$$( 174 let sectionTop = topSection.offsetParent.offsetTop + topSection.offsetTop;
179 'settings-section:last-of-type'); 175 // The height of the selected section and remaining content (sections).
180 // |lastSection| may be null in unit tests. 176 let heightOfShownSections = this.$.overscroll.offsetTop - sectionTop;
181 if (!lastSection) 177 return Math.max(0, this.parentNode.scrollHeight - heightOfShownSections);
182 return 0;
183 return calcHeight(lastSection);
184 }
185
186 assert(this.showPages_.basic);
187 var lastSection = this.$$('settings-basic-page').$$(
188 'settings-section:last-of-type');
189 // |lastSection| may be null in unit tests.
190 if (!lastSection)
191 return 0;
192 var toggleContainer = this.$$('#toggleContainer');
193 return calcHeight(lastSection) -
194 (toggleContainer ? toggleContainer.offsetHeight : 0);
195 }, 178 },
196 179
197 /** @private */ 180 /** @private */
198 toggleAdvancedPage_: function() { 181 toggleAdvancedPage_: function() {
199 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_); 182 this.fire('toggle-advanced-page', !this.advancedToggleExpanded_);
200 }, 183 },
201 184
202 /** 185 /**
203 * Navigates to the default search page (if necessary). 186 * Navigates to the default search page (if necessary).
204 * @private 187 * @private
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
241 224
242 /** 225 /**
243 * @param {(boolean|undefined)} visibility 226 * @param {(boolean|undefined)} visibility
244 * @return {boolean} True unless visibility is false. 227 * @return {boolean} True unless visibility is false.
245 * @private 228 * @private
246 */ 229 */
247 showAdvancedSettings_: function(visibility) { 230 showAdvancedSettings_: function(visibility) {
248 return visibility !== false; 231 return visibility !== false;
249 }, 232 },
250 }); 233 });
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