OLD | NEW |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | 1 // Copyright 2017 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 // Handle the bookmark bar and theme change requests from the C++ side. | |
6 var ntp = { | |
7 /** @param {string} attached */ | |
8 setBookmarkBarAttached: function(attached) { | |
9 document.documentElement.setAttribute('bookmarkbarattached', attached); | |
10 }, | |
11 | |
12 /** @param {!{hasCustomBackground: boolean}} themeData */ | |
13 themeChanged: function(themeData) { | |
14 document.documentElement.setAttribute('hascustombackground', | |
15 themeData.hasCustomBackground); | |
16 $('incognitothemecss').href = | |
17 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); | |
18 }, | |
19 }; | |
20 | |
21 // Let the width of two lists of bulletpoints in a horizontal alignment | 5 // Let the width of two lists of bulletpoints in a horizontal alignment |
22 // determine the maximum content width. | 6 // determine the maximum content width. |
23 window.addEventListener('load', function() { | 7 function recomputeLayoutWidth() { |
24 var bulletpoints = document.querySelectorAll('.bulletpoints'); | 8 var bulletpoints = document.querySelectorAll('.bulletpoints'); |
25 var content = document.querySelector('.content'); | 9 var content = document.querySelector('.content'); |
26 | 10 |
27 // Unless this is the first load of the Incognito NTP in this session and | 11 // Unless this is the first load of the Incognito NTP in this session and |
28 // with this font size, we already have the maximum content width determined. | 12 // with this font size, we already have the maximum content width determined. |
29 var fontSize = window.getComputedStyle(document.body).fontSize; | 13 var fontSize = window.getComputedStyle(document.body).fontSize; |
30 var maxWidth = localStorage[fontSize] || | 14 var maxWidth = localStorage[fontSize] || |
31 (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth + | 15 (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth + |
32 40 /* margin */ + 2 /* offsetWidths may be rounded down */); | 16 40 /* margin */ + 2 /* offsetWidths may be rounded down */); |
33 | 17 |
34 // Save the data for quicker access when the NTP is reloaded. Note that since | 18 // Save the data for quicker access when the NTP is reloaded. Note that since |
35 // we're in the Incognito mode, the local storage is ephemeral and the data | 19 // we're in the Incognito mode, the local storage is ephemeral and the data |
36 // will be discarded when the session ends. | 20 // will be discarded when the session ends. |
37 localStorage[fontSize] = maxWidth; | 21 localStorage[fontSize] = maxWidth; |
38 | 22 |
39 // Limit the maximum width to 600px. That might force the two lists | 23 // Limit the maximum width to 600px. That might force the two lists |
40 // of bulletpoints under each other, in which case we must swap the left | 24 // of bulletpoints under each other, in which case we must swap the left |
41 // and right margin. | 25 // and right margin. |
42 if (maxWidth > 600) { | 26 var MAX_ALLOWED_WIDTH = 600; |
43 maxWidth = 600; | 27 var tooWide = maxWidth > MAX_ALLOWED_WIDTH; |
44 | 28 bulletpoints[1].classList.toggle('too-wide', tooWide); |
45 bulletpoints[1].classList.add('tooWide'); | 29 if (tooWide) |
46 } | 30 maxWidth = MAX_ALLOWED_WIDTH; |
47 | 31 |
48 content.style.maxWidth = maxWidth + "px"; | 32 content.style.maxWidth = maxWidth + "px"; |
49 }); | 33 } |
| 34 |
| 35 window.addEventListener('load', recomputeLayoutWidth); |
| 36 |
| 37 // Handle the bookmark bar, theme, and font size change requests |
| 38 // from the C++ side. |
| 39 var ntp = { |
| 40 /** @param {string} attached */ |
| 41 setBookmarkBarAttached: function(attached) { |
| 42 document.documentElement.setAttribute('bookmarkbarattached', attached); |
| 43 }, |
| 44 |
| 45 /** @param {!{hasCustomBackground: boolean}} themeData */ |
| 46 themeChanged: function(themeData) { |
| 47 document.documentElement.setAttribute('hascustombackground', |
| 48 themeData.hasCustomBackground); |
| 49 $('incognitothemecss').href = |
| 50 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); |
| 51 }, |
| 52 |
| 53 defaultFontSizeChanged: function() { |
| 54 setTimeout(recomputeLayoutWidth, 100); |
| 55 } |
| 56 }; |
OLD | NEW |