| 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 |