diff options
Diffstat (limited to 'chromium/chrome/browser/resources/ntp4')
10 files changed, 84 insertions, 38 deletions
diff --git a/chromium/chrome/browser/resources/ntp4/apps_page.js b/chromium/chrome/browser/resources/ntp4/apps_page.js index 026b45813c5..460883b526e 100644 --- a/chromium/chrome/browser/resources/ntp4/apps_page.js +++ b/chromium/chrome/browser/resources/ntp4/apps_page.js @@ -105,7 +105,7 @@ cr.define('ntp', function() { */ appendMenuItem_: function(opt_textId) { const button = - /** @type {!HTMLButtonElement} */ (cr.doc.createElement('button')); + /** @type {!HTMLButtonElement} */ (document.createElement('button')); this.menu.appendChild(button); cr.ui.decorate(button, cr.ui.MenuItem); if (opt_textId) { @@ -248,7 +248,7 @@ cr.define('ntp', function() { * @extends {HTMLDivElement} */ function App(appData) { - const el = cr.doc.createElement('div'); + const el = /** @type {!App} */ (document.createElement('div')); el.__proto__ = App.prototype; el.initialize(appData); diff --git a/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css b/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css index 1e2b3cc2b3c..95c06095f56 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css +++ b/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css @@ -11,7 +11,7 @@ body { @media (prefers-color-scheme: dark) { html { - background: rgb(50, 54, 57); + background: rgb(53, 54, 58); color: rgb(232, 234, 237); /* --google-grey-200 */ } } diff --git a/chromium/chrome/browser/resources/ntp4/incognito_tab.css b/chromium/chrome/browser/resources/ntp4/incognito_tab.css index c2beff126d3..a5f3cbb6931 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_tab.css +++ b/chromium/chrome/browser/resources/ntp4/incognito_tab.css @@ -8,12 +8,16 @@ body { margin: 0; } +[hidden] { + display: none !important; +} + /** Typography -------------------------------------------------------------- */ .content { /* This is identical to the default background color. It's necessary to set it for the case when a theme with a background image is installed. */ - background-color: rgb(50, 54, 57); + background-color: rgb(53, 54, 58); color: rgb(232, 234, 237); /* --google-grey-200 */ font-size: calc(100% - 2px); line-height: calc(100% + 6px); @@ -96,6 +100,34 @@ em { } } +/** Cookie Controls --------------------------------------------------------- */ + +#cookie-controls { + align-items: center; + background-color: rgb(60, 64, 67); /* --google-grey-800 */ + border-radius: 4px; + box-sizing: border-box; + display: flex; + padding: 12px 20px; +} + +#cookie-controls-description { + flex: 1; + padding-inline-end: 20px; +} + +#cookie-controls-description em { + display: block; +} + +#cookie-controls-toggle { + flex: none; +} + +#cookie-controls-toggle:not(:defined) { + width: 34px; +} + /** Layout ------------------------------------------------------------------ */ /* Align the content, icon, and title to to the center. */ @@ -167,7 +199,8 @@ h1 { .icon, h1, #subtitle, - .bulletpoints { + .bulletpoints, + #cookie-controls { margin-bottom: 1.5rem; } @@ -209,7 +242,8 @@ h1 { .learn-more-button, .bulletpoints, - .icon { + .icon, + #cookie-controls { margin-bottom: 16px; } } @@ -230,7 +264,8 @@ h1 { } .bulletpoints, - .learn-more-button { + .learn-more-button, + #cookie-controls { margin-bottom: 1.5rem; } @@ -248,7 +283,8 @@ h1 { } .bulletpoints, - .learn-more-button { + .learn-more-button, + #cookie-controls { margin-bottom: 1rem; } } diff --git a/chromium/chrome/browser/resources/ntp4/incognito_tab.html b/chromium/chrome/browser/resources/ntp4/incognito_tab.html index 888489f7ccb..48631cb04f8 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_tab.html +++ b/chromium/chrome/browser/resources/ntp4/incognito_tab.html @@ -30,10 +30,21 @@ document.write('<link id="incognitothemecss" rel="stylesheet" ' + <div class="bulletpoints first">$i18nRaw{incognitoTabFeatures}</div> <div class="bulletpoints">$i18nRaw{incognitoTabWarning}</div> </div> + <div id="cookie-controls" $i18n{hideCookieControls}> + <div id="cookie-controls-description"> + <em>$i18n{cookieControlsTitle}</em> + $i18n{cookieControlsDescription} + </div> + <cr-toggle id="cookie-controls-toggle" + aria-label="$i18n{cookieControlsTitle}" + $i18n{cookieControlsToggleChecked} dark></cr-toggle> + </div> <a class="learn-more-button" href="$i18n{learnMoreLink}">$i18n{learnMore}</a> </div> <script src="chrome://resources/js/cr.js"></script> <script src="chrome://resources/js/util.js"></script> <script src="incognito_tab.js"></script> +<!-- Lazy-load cr_toggle to avoid performance penalty introduced by loading Polymer --> +<script type="module" src="chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js" async></script> </body> </html> diff --git a/chromium/chrome/browser/resources/ntp4/incognito_tab.js b/chromium/chrome/browser/resources/ntp4/incognito_tab.js index bca80d57e69..aa7de31ab36 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_tab.js +++ b/chromium/chrome/browser/resources/ntp4/incognito_tab.js @@ -3,7 +3,25 @@ // found in the LICENSE file. window.addEventListener('load', function() { + cr.addWebUIListener('theme-changed', themeData => { + document.documentElement.setAttribute( + 'hascustombackground', themeData.hasCustomBackground); + $('incognitothemecss').href = + 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); + }); chrome.send('observeThemeChanges'); + + cr.addWebUIListener('cookie-controls-changed', checked => { + $('cookie-controls-toggle').checked = checked; + }); + cr.addWebUIListener( + 'third-party-cookie-blocking-changed', shouldHideCookieControls => { + $('cookie-controls').hidden = shouldHideCookieControls; + }); + $('cookie-controls-toggle').addEventListener('change', event => { + chrome.send('cookieControlsToggleChanged', [event.detail]); + }); + chrome.send('observeCookieControlsSettingsChanges'); }); // Handle the bookmark bar, theme, and font size change requests @@ -13,12 +31,4 @@ const ntp = { setBookmarkBarAttached: function(attached) { document.documentElement.setAttribute('bookmarkbarattached', attached); }, - - /** @param {!{hasCustomBackground: boolean}} themeData */ - themeChanged: function(themeData) { - document.documentElement.setAttribute( - 'hascustombackground', themeData.hasCustomBackground); - $('incognitothemecss').href = - 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); - }, }; diff --git a/chromium/chrome/browser/resources/ntp4/nav_dot.js b/chromium/chrome/browser/resources/ntp4/nav_dot.js index 22109133114..8193fe15190 100644 --- a/chromium/chrome/browser/resources/ntp4/nav_dot.js +++ b/chromium/chrome/browser/resources/ntp4/nav_dot.js @@ -22,7 +22,7 @@ cr.define('ntp', function() { * @implements {cr.ui.DragWrapperDelegate} */ function NavDot(page, title, titleIsEditable, animate) { - const dot = cr.doc.createElement('li'); + const dot = /** @type {!NavDot} */ (document.createElement('li')); dot.__proto__ = NavDot.prototype; dot.initialize(page, title, titleIsEditable, animate); diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.css b/chromium/chrome/browser/resources/ntp4/new_tab.css index 132872957df..eba46bcfe5f 100644 --- a/chromium/chrome/browser/resources/ntp4/new_tab.css +++ b/chromium/chrome/browser/resources/ntp4/new_tab.css @@ -95,10 +95,9 @@ html[dir='rtl'] #attribution { } #footer { - background-image: linear-gradient( - rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9)); + background-color: white; bottom: 0; - color: #7F7F7F; + color: #666; font-size: 0.9em; font-weight: bold; overflow: hidden; @@ -273,7 +272,7 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid { #chrome-web-store-link { -webkit-order: 3; - color: inherit; + color: rgb(26, 115, 232); cursor: pointer; display: inline-block; margin: 0; @@ -291,10 +290,6 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid { padding-inline-start: 15px; } -#chrome-web-store-link:hover { - color: #666; -} - html[dir='rtl'] #chrome-web-store-title { background-position-x: left; } diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.html b/chromium/chrome/browser/resources/ntp4/new_tab.html index de19cad2443..2b60f4a75a6 100644 --- a/chromium/chrome/browser/resources/ntp4/new_tab.html +++ b/chromium/chrome/browser/resources/ntp4/new_tab.html @@ -80,7 +80,7 @@ document.write('<link id="themecss" rel="stylesheet" ' + <div id="footer-border"></div> <div id="footer-content"> <div id="logo-img"> - <img alt="" src="chrome://theme/IDR_PRODUCT_LOGO"> + <img alt="" src="chrome://theme/IDR_PRODUCT_LOGO_32"> </div> <ul id="dot-list"> diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.js b/chromium/chrome/browser/resources/ntp4/new_tab.js index 0be7cd9f7a7..d6f7b960b48 100644 --- a/chromium/chrome/browser/resources/ntp4/new_tab.js +++ b/chromium/chrome/browser/resources/ntp4/new_tab.js @@ -108,6 +108,10 @@ cr.define('ntp', function() { startTime = Date.now(); + cr.addWebUIListener('theme-changed', () => { + $('themecss').href = + 'chrome://theme/css/new_tab_theme.css?' + Date.now(); + }); chrome.send('observeThemeChanges'); }); } @@ -207,15 +211,6 @@ cr.define('ntp', function() { } } - /** - * Called when the theme has changed. - * @param {Object=} opt_themeData Not used; only exists to match equivalent - * function in incognito NTP. - */ - function themeChanged(opt_themeData) { - $('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now(); - } - function setBookmarkBarAttached(attached) { document.documentElement.setAttribute('bookmarkbarattached', attached); } @@ -390,7 +385,6 @@ cr.define('ntp', function() { setAppToBeHighlighted: setAppToBeHighlighted, setBookmarkBarAttached: setBookmarkBarAttached, setFaviconDominantColor: setFaviconDominantColor, - themeChanged: themeChanged, updateLogin: updateLogin }; }); diff --git a/chromium/chrome/browser/resources/ntp4/tile_page.js b/chromium/chrome/browser/resources/ntp4/tile_page.js index f6de15ab41c..600fc1f09b4 100644 --- a/chromium/chrome/browser/resources/ntp4/tile_page.js +++ b/chromium/chrome/browser/resources/ntp4/tile_page.js @@ -41,7 +41,7 @@ cr.define('ntp', function() { * @extends {HTMLDivElement} */ function Tile(contents) { - const tile = cr.doc.createElement('div'); + const tile = /** @type {!Tile} */ (document.createElement('div')); tile.__proto__ = Tile.prototype; tile.initialize(contents); @@ -372,7 +372,7 @@ cr.define('ntp', function() { * @implements {cr.ui.DragWrapperDelegate} */ function TilePage(gridValues) { - const el = cr.doc.createElement('div'); + const el = /** @type {!TilePage} */ (document.createElement('div')); el.gridValues_ = gridValues; el.__proto__ = TilePage.prototype; el.initialize(); |