Skip to content

GitLab

T
tangled
Commit 2221f6c1 authored by Kyle Milka's avatar Kyle Milka Committed by Commit Bot
Browse files
Options

[NTP] Move mv-notice-container out of user-content 

Moving the notices out of the user-content div allows
them to always appear on top of other elements on the page,
as z-index is no longer -1.

Remove the .md-icon class and make MD style the default. This
styles the notices correctly since they no longer inherit
.md-icon from the most visited div. As a side effect third-party
NTPs now have MD styled notices.

Screencast: http://go/scrcast/NjQwNTg0OTI5NTYxODA0OHw0NzI4NDMzOS1kNQ

Bug: 939766
Change-Id: Icecdab3d684e6ae504a0d2f83ae59d3cb2b443a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1531021Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#646536}
parent e4aafb67
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 172 deletions
chrome/browser/resources/local_ntp/local_ntp.css
View file @ 2221f6c1
......@@ -376,15 +376,11 @@ body.remove-fakebox #user-content {
}
#most-visited {
margin-top: 56px;
text-align: -webkit-center;
user-select: none;
}
#most-visited.md-icons {
/* Total of 40px margin between fakebox and MV tiles: 8px fakebox
* margin-bottom + 22px here margin-top + 10px MV margin-top */
margin-top: 22px;
text-align: -webkit-center;
user-select: none;
}
/* Non-Google pages have no Fakebox, so don't need top margin. */
......@@ -393,197 +389,116 @@ body.remove-fakebox #user-content {
}
#mv-tiles {
/* Two rows of tiles of 128px each, 16px of spacing between the rows, and
* 4px/8px of margin on top and bottom respectively. If you change this, also
* change the corresponding values in most_visited_single.css. */
height: calc(2*var(--tile-height) + var(--tile-margin) + 4px + 8px);
margin: 0;
position: relative;
text-align: -webkit-auto;
width: var(--content-width);
}
.md-icons #mv-tiles {
/* Two rows of tiles of 112px each, 16px of spacing after each row, and 10px
* of margin on top. If you change this, also change the corresponding values
* in most_visited_single.css. */
height: calc(2*(var(--md-tile-height) + var(--md-tile-margin)) + 10px);
margin: 0;
position: relative;
text-align: -webkit-auto;
/* Add 2*5px to account for drop shadow on the tiles. If you change this, also
* change the corresponding values in most_visited_single.css. */
width: calc(var(--content-width) + 2*5px);
}
#mv-notice-x {
-webkit-mask-image: -webkit-image-set(
url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
-webkit-mask-position: 3px 3px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 10px 10px;
background-color: rgba(90, 90, 90, 0.7);
cursor: pointer;
display: inline-block;
filter: var(--theme-filter, 'none');
height: 16px;
margin-inline-start: 20px;
outline: none;
vertical-align: middle;
width: 16px;
}
html[darkmode=true] body:not(.light-chip) #mv-notice-x {
background-color: rgb(var(--GG200-rgb));
}
#mv-notice-x:hover {
background-color: rgba(90, 90, 90, 1.0);
}
#mv-notice-x:active {
background-color: rgb(var(--GB500-rgb));
}
html[darkmode=true] body:not(.light-chip) #mv-notice-x:hover,
html[darkmode=true] body:not(.light-chip) #mv-notice-x:active {
background-color: rgb(var(--GG400-rgb));
}
.md-icons #mv-notice-x {
display: none;
}
#mv-notice-container {
width: 100%;
}
.md-icons #mv-notice-container {
bottom: -50px;
left: 0;
margin-bottom: 16px;
position: fixed;
transition: bottom 400ms;
width: 100%;
}
/* Required to allow click events through the wrapping div of the toast
* notification container. */
.md-icons #mv-notice-container,
#mv-notice-container,
#error-notice-container {
pointer-events: none;
}
.md-icons #mv-notice-container > div,
#mv-notice-container > div,
#error-notice-container > div {
pointer-events: all;
}
.md-icons #mv-notice-container.float-up {
#mv-notice-container.float-up {
bottom: 0;
}
.md-icons #mv-notice-container.notice-hide {
#mv-notice-container.notice-hide {
display: none;
}
/* The notification shown when a tile is blacklisted. */
#mv-notice {
font-size: 12px;
font-weight: bold;
opacity: 1;
padding: 10px 0;
}
.md-icons #mv-notice {
background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
font-weight: normal;
font-size: 12px;
height: fit-content;
margin: 0 auto;
padding: 0;
opacity: 1;
width: fit-content;
}
html[darkmode=true] body:not(.light-chip) .md-icons #mv-notice {
html[darkmode=true] body:not(.light-chip) #mv-notice {
background-color: rgb(var(--GG900-rgb));
border-color: rgba(0, 0, 0, 0.1);
}
#mv-notice span {
color: rgb(var(--GG700-rgb));
cursor: default;
display: inline-block;
height: 16px;
line-height: 16px;
vertical-align: top;
}
.md-icons #mv-notice span {
color: rgb(var(--GG700-rgb));
height: auto;
line-height: 32px;
vertical-align: unset;
}
html[darkmode=true] body:not(.light-chip) .md-icons #mv-notice span {
html[darkmode=true] body:not(.light-chip) #mv-notice span {
color: rgb(var(--GG200-rgb));
}
/* Links in the notification. */
#mv-notice-links span {
color: var(--text-color-link);
cursor: pointer;
margin-inline-start: 6px;
outline: none;
padding: 0 4px;
}
.md-icons #mv-notice-links span {
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
color: rgb(var(--GB600-rgb));
cursor: pointer;
margin-inline-start: 0;
outline: none;
padding: 0 16px;
position: relative;
}
html[darkmode=true] body:not(.light-chip) .md-icons #mv-notice-links span {
html[darkmode=true] body:not(.light-chip) #mv-notice-links span {
color: rgb(var(--GB400-dark-rgb));
}
#mv-notice-links span:hover,
#mv-notice-links span:focus {
text-decoration: underline;
}
.md-icons #mv-notice-links span:hover,
.md-icons #mv-notice-links span:active {
#mv-notice-links span:hover,
#mv-notice-links span:active {
background-color: rgba(var(--GB600-rgb), 0.1);
text-decoration: none;
transition: background-color 200ms;
}
html[darkmode=true] body:not(.light-chip) .md-icons #mv-notice-links span:hover,
html[darkmode=true] body:not(.light-chip) .md-icons #mv-notice-links span:active {
html[darkmode=true] body:not(.light-chip) #mv-notice-links span:hover,
html[darkmode=true] body:not(.light-chip) #mv-notice-links span:active {
background-color: rgba(var(--GB400-dark-rgb), 0.1);
}
#mv-msg {
color: var(--text-color);
}
.md-icons #mv-msg {
padding: 0 16px;
}
.default-theme.dark #mv-msg :not(.md-icons) {
color: #fff;
}
.default-theme.dark #mv-notice-links :not(.md-icons) span {
color: #fff;
}
html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-msg :not(.md-icons),
html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-notice-links :not(.md-icons) span {
html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-msg :not(),
html[darkmode=true] body:not(.light-chip) .default-theme.dark #mv-notice-links :not() span {
color: rgb(var(--GG200-rgb));
}
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ 2221f6c1
......@@ -77,22 +77,22 @@
<div id="most-visited">
<!-- The container for the tiles. The MV iframe goes in here. -->
<div id="mv-tiles"></div>
<!-- Notification shown when a tile is blacklisted. -->
<div id="mv-notice-container">
<div id="mv-notice" class="notice-hide" role="alert">
<span id="mv-msg"></span>
<!-- Links in the notification. -->
<span id="mv-notice-links">
<span id="mv-undo" class="ripple" tabindex="0" role="button"></span>
<span id="mv-restore" class="ripple" tabindex="0" role="button"></span>
<div id="mv-notice-x" tabindex="0" role="button"></div>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Notification shown when the tiles are modified. -->
<div id="mv-notice-container">
<div id="mv-notice" class="notice-hide" role="alert">
<span id="mv-msg"></span>
<!-- Links in the notification. -->
<span id="mv-notice-links">
<span id="mv-undo" class="ripple" tabindex="0" role="button"></span>
<span id="mv-restore" class="ripple" tabindex="0" role="button"></span>
</span>
</div>
</div>
<div id="attribution"><div id="attribution-text"></div></div>
<div id="error-notice-container">
......
chrome/browser/resources/local_ntp/local_ntp.js
View file @ 2221f6c1
......@@ -96,8 +96,6 @@ var CLASSES = {
HIDE_PROMO: 'hide-promo',
INITED: 'inited', // Reveals the <body> once init() is done.
LEFT_ALIGN_ATTRIBUTION: 'left-align-attribution',
MATERIAL_DESIGN_ICONS:
'md-icons', // Applies Material Design styles to Most Visited.
// Vertically centers the most visited section for a non-Google provided page.
NON_GOOGLE_PAGE: 'non-google-page',
NON_WHITE_BG: 'non-white-bg',
......@@ -132,7 +130,6 @@ var IDS = {
MOST_VISITED: 'most-visited',
NOTIFICATION: 'mv-notice',
NOTIFICATION_CONTAINER: 'mv-notice-container',
NOTIFICATION_CLOSE_BUTTON: 'mv-notice-x',
NOTIFICATION_MESSAGE: 'mv-msg',
NTP_CONTENTS: 'ntp-contents',
PROMO: 'promo',
......@@ -608,8 +605,6 @@ function setCustomThemeStyle(themeInfo) {
document.body.style.setProperty('--text-color-light', textColorLight);
// Themes reuse the "light" text color for links too.
document.body.style.setProperty('--text-color-link', textColorLight);
$(IDS.NOTIFICATION_CLOSE_BUTTON)
.style.setProperty('--theme-filter', mvxFilter);
}
......@@ -752,17 +747,7 @@ function onDeleteCustomLinkDone(success) {
*/
function showNotification(msg) {
$(IDS.NOTIFICATION_MESSAGE).textContent = msg;
if (configData.isGooglePage) {
floatUpNotification($(IDS.NOTIFICATION), $(IDS.NOTIFICATION_CONTAINER));
} else {
var notification = $(IDS.NOTIFICATION);
notification.classList.remove(CLASSES.HIDE_NOTIFICATION);
notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION);
notification.scrollTop;
notification.classList.add(CLASSES.DELAYED_HIDE_NOTIFICATION);
}
floatUpNotification($(IDS.NOTIFICATION), $(IDS.NOTIFICATION_CONTAINER));
$(IDS.UNDO_LINK).focus();
}
......@@ -771,15 +756,8 @@ function showNotification(msg) {
* Hides the Most Visited pop-up notification.
*/
function hideNotification() {
if (configData.isGooglePage) {
floatDownNotification(
$(IDS.NOTIFICATION), $(IDS.NOTIFICATION_CONTAINER),
/*showPromo=*/ true);
} else {
var notification = $(IDS.NOTIFICATION);
notification.classList.add(CLASSES.HIDE_NOTIFICATION);
notification.classList.remove(CLASSES.DELAYED_HIDE_NOTIFICATION);
}
floatDownNotification(
$(IDS.NOTIFICATION), $(IDS.NOTIFICATION_CONTAINER), /*showPromo=*/ true);
}
......@@ -1108,16 +1086,6 @@ function showSearchSuggestions() {
}
/**
* Enables Material Design styles for the Most Visited section. Implicitly
* enables Material Design for the rest of NTP.
*/
function enableMDIcons() {
$(IDS.MOST_VISITED).classList.add(CLASSES.MATERIAL_DESIGN_ICONS);
$(IDS.TILES).classList.add(CLASSES.MATERIAL_DESIGN_ICONS);
animations.addRippleAnimations();
}
/**
* Prepares the New Tab Page by adding listeners, the most visited pages
* section, and Google-specific elements for a Google-provided page.
......@@ -1157,8 +1125,6 @@ function init() {
$(IDS.ATTRIBUTION_TEXT).textContent =
configData.translatedStrings.attributionIntro;
$(IDS.NOTIFICATION_CLOSE_BUTTON).addEventListener('click', hideNotification);
var embeddedSearchApiHandle = window.chrome.embeddedSearch;
ntpApiHandle = embeddedSearchApiHandle.newTabPage;
......@@ -1171,7 +1137,7 @@ function init() {
if (configData.isGooglePage) {
showSearchSuggestions();
enableMDIcons();
animations.addRippleAnimations();
ntpApiHandle.onaddcustomlinkdone = onAddCustomLinkDone;
ntpApiHandle.onupdatecustomlinkdone = onUpdateCustomLinkDone;
......
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ 2221f6c1
......@@ -65,18 +65,18 @@
<div id="most-visited">
<!-- The container for the tiles. The MV iframe goes in here. -->
<div id="mv-tiles"></div>
<!-- Notification shown when a tile is blacklisted. -->
<div id="mv-notice-container">
<div id="mv-notice" class="notice-hide" role="alert">
<span id="mv-msg"></span>
<!-- Links in the notification. -->
<span id="mv-notice-links">
<span id="mv-undo" class="ripple" tabindex="0" role="button"></span>
<span id="mv-restore" class="ripple" tabindex="0" role="button"></span>
<div id="mv-notice-x" tabindex="0" role="button"></div>
</span>
</div>
</div>
</div>
</div>
<!-- Notification shown when a tile is blacklisted. -->
<div id="mv-notice-container">
<div id="mv-notice" class="notice-hide" role="alert">
<span id="mv-msg"></span>
<!-- Links in the notification. -->
<span id="mv-notice-links">
<span id="mv-undo" class="ripple" tabindex="0" role="button"></span>
<span id="mv-restore" class="ripple" tabindex="0" role="button"></span>
</span>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment