diff options
Diffstat (limited to 'chromium/chrome/browser/resources/ntp4')
9 files changed, 71 insertions, 124 deletions
diff --git a/chromium/chrome/browser/resources/ntp4/apps_page.js b/chromium/chrome/browser/resources/ntp4/apps_page.js index 8136080e008..647ec829aa0 100644 --- a/chromium/chrome/browser/resources/ntp4/apps_page.js +++ b/chromium/chrome/browser/resources/ntp4/apps_page.js @@ -295,7 +295,7 @@ cr.define('ntp', function() { this.addEventListener('mousedown', this.onMousedown_, true); this.addEventListener('keydown', this.onKeydown_); - this.addEventListener('keyup', this.onKeyup_); + this.addEventListener('blur', this.onBlur_); }, /** @@ -378,6 +378,11 @@ cr.define('ntp', function() { this.style.top = toCssPx(y); }, + onBlur_: function(e) { + this.classList.remove('click-focus'); + this.appContents_.classList.remove('suppress-active'); + }, + /** * Invoked when an app is clicked. * @param {Event} e The click event. @@ -410,33 +415,6 @@ cr.define('ntp', function() { e.preventDefault(); e.stopPropagation(); } - this.onKeyboardUsed_(e.keyCode); - }, - - /** - * Invoked when the user releases a key while the app is focused. - * @param {Event} e The key event. - * @private - */ - onKeyup_: function(e) { - this.onKeyboardUsed_(e.keyCode); - }, - - /** - * Called when the keyboard has been used (key down or up). The .click-focus - * hack is removed if the user presses a key that can change focus. - * @param {number} keyCode The key code of the keyboard event. - * @private - */ - onKeyboardUsed_: function(keyCode) { - switch (keyCode) { - case 9: // Tab. - case 37: // Left arrow. - case 38: // Up arrow. - case 39: // Right arrow. - case 40: // Down arrow. - this.classList.remove('click-focus'); - } }, /** diff --git a/chromium/chrome/browser/resources/ntp4/guest_tab.css b/chromium/chrome/browser/resources/ntp4/guest_tab.css index ae24211242a..b3912c8c22f 100644 --- a/chromium/chrome/browser/resources/ntp4/guest_tab.css +++ b/chromium/chrome/browser/resources/ntp4/guest_tab.css @@ -2,30 +2,6 @@ * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ -body { - margin: 10px 8px; -} - -.icon { - -webkit-margin-end: 3px; - -webkit-margin-start: 6px; -} - -html[dir='ltr'] .icon { - float: right; -} - -html[dir='rtl'] .icon { - float: left; -} - -.content { - background-color: #eee; - border-radius: 5px; - color: black; - margin-left: auto; - margin-right: auto; - margin-top: 66px; - max-width: 600px; - padding: 10px; +a { + color: rgb(51, 103, 214); } diff --git a/chromium/chrome/browser/resources/ntp4/guest_tab.html b/chromium/chrome/browser/resources/ntp4/guest_tab.html index 9c1150a09e6..704140ab1ef 100644 --- a/chromium/chrome/browser/resources/ntp4/guest_tab.html +++ b/chromium/chrome/browser/resources/ntp4/guest_tab.html @@ -4,28 +4,17 @@ <meta charset="utf-8"> <title i18n-content="title"></title> <link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> +<link rel="stylesheet" href="guest_tab.css"> <link rel="stylesheet" href="incognito_and_guest_tab.css"> -<script> -// Until themes can clear the cache, force-reload the theme stylesheet. -document.write('<link id="guestthemecss" rel="stylesheet" ' + - 'href="chrome://theme/css/incognito_new_tab_theme.css?' + - Date.now() + '">'); -</script> </head> <body> <div class="content"> <h1 i18n-content="guestTabHeading"></h1> <p> <span i18n-content="guestTabDescription"></span> - <a i18n-content="learnMore" i18n-values=".href:learnMoreLink"></a> </p> + <a i18n-content="learnMore" i18n-values=".href:learnMoreLink"></a> </div> </body> <script src="chrome://resources/js/cr.js"></script> -<script> -function themeChanged() { - document.getElementById('guestthemecss').href = - 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); -} -</script> </html> 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 5ba37137c8b..90e52d921d9 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css +++ b/chromium/chrome/browser/resources/ntp4/incognito_and_guest_tab.css @@ -5,24 +5,22 @@ * Incognito and guest mode NTP shared CSS. */ -html { - background: #fafafa; +h1 { + font-size: 200%; + font-weight: 300; + margin-bottom: 1.33em; } -body { +p { line-height: 1.5; -} - -h1 { - font-size: 1.7em; - font-weight: normal; - line-height: 1.2em; - margin-top: 0; + margin-bottom: 2em; + text-align: start; } a { - color: rgb(39, 110, 242); + font-size: 108.3%; text-decoration: none; + text-transform: uppercase; } a:hover { @@ -30,24 +28,21 @@ a:hover { } .content { - background-color: white; - border-radius: 2px; - box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14); box-sizing: border-box; - color: black; - line-height: 1.5; - margin: 5.5em auto 0; - max-width: 640px; - padding: 30px 35px 30px 37px; - width: 100%; + margin: 3.5em auto 0; + max-width: 420px; + min-width: 240px; + padding: 30px 35px; + text-align: center; } -.content > span { - display: block; +html[hascustombackground='true'] .content { + border-radius: 2px; + box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.4); } -.content p:last-child { - margin-bottom: 4px; +.content > span { + display: block; } @media (max-width:700px) { @@ -60,6 +55,11 @@ a:hover { body { margin: 3em 1.5em 2em; } + + /* Adjustment for narrow screen to prevent horizontal scrollbar. */ + .content { + padding: 16px 8px; + } } @media (max-height:480px) and (max-width:400px) { diff --git a/chromium/chrome/browser/resources/ntp4/incognito_tab.css b/chromium/chrome/browser/resources/ntp4/incognito_tab.css index c836f2d323d..6994b2cb0ac 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_tab.css +++ b/chromium/chrome/browser/resources/ntp4/incognito_tab.css @@ -2,30 +2,28 @@ * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ -.content > span { - max-width: 416px; +body { + margin-top: 0; +} + +.content { + background-color: #323232; + color: white; } .icon { - -webkit-margin-start: 25px; - content: -webkit-image-set( - url(../../../../ui/webui/resources/images/incognito_icon.png) 1x, - url(../../../../ui/webui/resources/images/2x/incognito_icon.png) 2x); - float: right; - height: 128px; - margin-bottom: 10px; - margin-top: 4px; - width: 128px; + content: url(../../../../ui/webui/resources/images/incognito_splash.svg); + display: inline-block; + height: 120px; + width: 120px; } -html[dir='rtl'] .icon { - float: left; +h1 { + margin-top: 1em; } -@media (max-width:400px) { - .icon { - -webkit-margin-start: 15px; - height: 96px; - width: 96px; - } +a { + color: rgb(3, 169, 244); + display: inline-block; + padding: 10.5px 12px; } diff --git a/chromium/chrome/browser/resources/ntp4/incognito_tab.html b/chromium/chrome/browser/resources/ntp4/incognito_tab.html index 276d854b1d9..4b19819a5d3 100644 --- a/chromium/chrome/browser/resources/ntp4/incognito_tab.html +++ b/chromium/chrome/browser/resources/ntp4/incognito_tab.html @@ -1,11 +1,13 @@ <!doctype html> <html i18n-values="dir:textdirection; + hascustombackground:hasCustomBackground; bookmarkbarattached:bookmarkbarattached; lang:language"> <head> <meta charset="utf-8"> <title i18n-content="title"></title> -<link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> +<meta name="viewport" content="width=device-width"> +<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="incognito_and_guest_tab.css"> <link rel="stylesheet" href="incognito_tab.css"> <script> @@ -21,13 +23,13 @@ document.write('<link id="incognitothemecss" rel="stylesheet" ' + <span> <h1 i18n-content="incognitoTabHeading"></h1> <p> - <span i18n-values=".innerHTML:incognitoTabDescription"></span> - <a i18n-content="learnMore" i18n-values=".href:learnMoreLink"></a> + <span i18n-content="incognitoTabDescription"></span> </p> <p> - <strong i18n-content="incognitoTabWarning"></strong> + <span i18n-content="incognitoTabWarning"></span> </p> </span> + <a i18n-content="learnMore" i18n-values=".href:learnMoreLink"></a> </div> </body> <script src="chrome://resources/js/cr.js"></script> @@ -42,7 +44,10 @@ cr.define('ntp', function() { document.documentElement.setAttribute('bookmarkbarattached', !!attached); } - function themeChanged() { + /** @param {!{hasCustomBackground: boolean}} themeData */ + function themeChanged(themeData) { + document.documentElement.setAttribute('hascustombackground', + themeData.hasCustomBackground); document.getElementById('incognitothemecss').href = 'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now(); } diff --git a/chromium/chrome/browser/resources/ntp4/new_incognito_tab_theme.css b/chromium/chrome/browser/resources/ntp4/new_incognito_tab_theme.css index dd31189d503..496b95b99f8 100644 --- a/chromium/chrome/browser/resources/ntp4/new_incognito_tab_theme.css +++ b/chromium/chrome/browser/resources/ntp4/new_incognito_tab_theme.css @@ -6,17 +6,20 @@ html { background-attachment: fixed; background-color: ${colorBackground}; - background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?${themeId}); background-position: ${backgroundBarDetached}; background-repeat: ${backgroundTiling}; height: 100%; overflow: auto; } -#attribution-img { - content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?${themeId}); +html[hascustombackground='true'] { + background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?${themeId}); } html[bookmarkbarattached='true'] { background-position: ${backgroundBarAttached}; } + +#attribution-img { + content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?${themeId}); +} diff --git a/chromium/chrome/browser/resources/ntp4/new_tab.js b/chromium/chrome/browser/resources/ntp4/new_tab.js index cb0c42dc9d0..d219ad73b56 100644 --- a/chromium/chrome/browser/resources/ntp4/new_tab.js +++ b/chromium/chrome/browser/resources/ntp4/new_tab.js @@ -333,8 +333,10 @@ 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() { + function themeChanged(opt_themeData) { $('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now(); } diff --git a/chromium/chrome/browser/resources/ntp4/tile_page.js b/chromium/chrome/browser/resources/ntp4/tile_page.js index f20d0f36a28..6cda72cff2e 100644 --- a/chromium/chrome/browser/resources/ntp4/tile_page.js +++ b/chromium/chrome/browser/resources/ntp4/tile_page.js @@ -703,12 +703,8 @@ cr.define('ntp', function() { Array.prototype.indexOf.call(this.focusableElements_, focusable); this.updateFocusElement_(); - } else { - // This prevents the tile page from getting focus when the user clicks - // inside the grid but outside of any tile. - e.preventDefault(); } - }, + }, /** * Handle arrow key focus nav. |