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 // 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 |
6 // determine the maximum content width. | 6 // determine the maximum content width. |
7 function recomputeLayoutWidth() { | 7 function recomputeLayoutWidth() { |
8 var bulletpoints = document.querySelectorAll('.bulletpoints'); | 8 var bulletpoints = document.querySelectorAll('.bulletpoints'); |
9 var content = document.querySelector('.content'); | 9 var content = document.querySelector('.content'); |
10 | 10 |
11 // 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 |
12 // 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. |
13 var fontSize = window.getComputedStyle(document.body).fontSize; | 13 var fontSize = window.getComputedStyle(document.body).fontSize; |
14 var maxWidth = localStorage[fontSize] || | 14 var maxWidth = localStorage[fontSize] || |
15 (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth + | 15 (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth + |
16 40 /* margin */ + 2 /* offsetWidths may be rounded down */); | 16 40 /* margin */ + 2 /* offsetWidths may be rounded down */); |
17 | 17 |
18 // 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 |
19 // 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 |
20 // will be discarded when the session ends. | 20 // will be discarded when the session ends. |
21 localStorage[fontSize] = maxWidth; | 21 localStorage[fontSize] = maxWidth; |
22 | 22 |
23 // 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 |
24 // 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 |
25 // and right margin. | 25 // and right margin. |
26 var MAX_ALLOWED_WIDTH = 600; | 26 var MAX_ALLOWED_WIDTH = 600; |
27 var tooWide = maxWidth > MAX_ALLOWED_WIDTH; | 27 var tooWide = maxWidth > MAX_ALLOWED_WIDTH; |
28 bulletpoints[1].classList.toggle('too-wide', tooWide); | 28 bulletpoints[1].classList.toggle('too-wide', tooWide); |
29 if (tooWide) | 29 if (tooWide) |
30 maxWidth = MAX_ALLOWED_WIDTH; | 30 maxWidth = MAX_ALLOWED_WIDTH; |
31 | 31 |
32 content.style.maxWidth = maxWidth + "px"; | 32 content.style.maxWidth = maxWidth + 'px'; |
33 } | 33 } |
34 | 34 |
35 window.addEventListener('load', recomputeLayoutWidth); | 35 window.addEventListener('load', recomputeLayoutWidth); |
36 | 36 |
37 // Handle the bookmark bar, theme, and font size change requests | 37 // Handle the bookmark bar, theme, and font size change requests |
38 // from the C++ side. | 38 // from the C++ side. |
39 var ntp = { | 39 var ntp = { |
40 /** @param {string} attached */ | 40 /** @param {string} attached */ |
41 setBookmarkBarAttached: function(attached) { | 41 setBookmarkBarAttached: function(attached) { |
42 document.documentElement.setAttribute('bookmarkbarattached', attached); | 42 document.documentElement.setAttribute('bookmarkbarattached', attached); |
43 }, | 43 }, |
44 | 44 |
45 /** @param {!{hasCustomBackground: boolean}} themeData */ | 45 /** @param {!{hasCustomBackground: boolean}} themeData */ |
46 themeChanged: function(themeData) { | 46 themeChanged: function(themeData) { |
47 document.documentElement.setAttribute('hascustombackground', | 47 document.documentElement.setAttribute( |
48 themeData.hasCustomBackground); | 48 'hascustombackground', themeData.hasCustomBackground); |
49 $('incognitothemecss').href = | 49 $('incognitothemecss').href = |
50 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); | 50 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); |
51 }, | 51 }, |
52 | 52 |
53 defaultFontSizeChanged: function() { | 53 defaultFontSizeChanged: function() { |
54 setTimeout(recomputeLayoutWidth, 100); | 54 setTimeout(recomputeLayoutWidth, 100); |
55 } | 55 } |
56 }; | 56 }; |
OLD | NEW |