Skip to content

GitLab

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

[NTP] Don't auto-focus elements on mouse click 

Convert the customization option menu to a <dialog> and remove the
custom tab handling. Only show the focus-outline on options if the
dialog was opened using the keyboard.

Also fixes a bug where "Done" could be used when an image was no longer
selected.

Bug: 854043
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ic6773378beab14c429fdfb3ffa666c6606334184
Reviewed-on: https://chromium-review.googlesource.com/1110522
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: default avatarMarc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#570433}
parent a599f10a
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 120 deletions
chrome/browser/resources/local_ntp/custom_backgrounds.css
View file @ c13751e3
......@@ -19,10 +19,14 @@
background-color: rgba(255, 255, 255, .1);
}
#edit-bg-gear:focus {
.bg-option:focus {
outline: 0;
}
.using-keyboard-nav .bg-option:focus {
outline: auto 5px -webkit-focus-ring-color;
}
#edit-bg-gear {
background: url(../../../../ui/webui/resources/images/icon_settings.svg) no-repeat center;
background-size: 16px 16px;
......@@ -35,24 +39,20 @@
background-size: 16px 16px;
}
#edit-bg-overlay {
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
#edit-bg-dialog::backdrop {
background: transparent;
}
#edit-bg-dialog {
background: #fff;
border: none;
border-radius: 8px;
border-style: outset;
border-width: thin;
bottom: 44px;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
padding-bottom: 16px;
left: auto;
padding: 0 0 16px 0;
position: fixed;
right: 16px;
width: 325px;
......@@ -316,7 +316,3 @@
.is-col-sel #bg-sel-refresh-text {
display: none;
}
.show-overlay {
display: block !important;
}
chrome/browser/resources/local_ntp/custom_backgrounds.js
View file @ c13751e3
......@@ -33,8 +33,6 @@ customBackgrounds.IDS = {
DONE: 'bg-sel-footer-done',
EDIT_BG: 'edit-bg',
EDIT_BG_DIALOG: 'edit-bg-dialog',
EDIT_BG_GEAR: 'edit-bg-gear',
EDIT_BG_OVERLAY: 'edit-bg-overlay',
MENU: 'bg-sel-menu',
OPTIONS_TITLE: 'edit-bg-title',
RESTORE_DEFAULT: 'edit-bg-restore-default',
......@@ -59,9 +57,9 @@ customBackgrounds.CLASSES = {
COLLECTION_TITLE: 'bg-sel-tile-title', // Title of a background image
DONE_AVAILABLE: 'done-available',
IMAGE_DIALOG: 'is-img-sel',
KEYBOARD_NAV: 'using-keyboard-nav',
SELECTED_BORDER: 'selected-border',
SELECTED_CHECK: 'selected-check',
SHOW_OVERLAY: 'show-overlay',
};
/**
......@@ -249,7 +247,6 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
tileContainer.appendChild(tile);
}
$('img_tile_0').focus();
doneButton.tabIndex = 0;
dailyRefresh.onclick = function(event) {
......@@ -262,8 +259,11 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
};
var setBackground = function(event) {
if (!selectedTile)
if (!selectedTile ||
!doneButton.classList.contains(
customBackgrounds.CLASSES.DONE_AVAILABLE)) {
return;
}
menu.close();
window.chrome.embeddedSearch.newTabPage.setBackgroundURL(
......@@ -275,11 +275,11 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
doneButton.onkeyup = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
setBackground(event);
$(customBackgrounds.IDS.EDIT_BG).focus();
}
};
backButton.onclick = function(event) {
selectedTile = null;
customBackgrounds.resetSelectionDialog();
customBackgrounds.showCollectionSelectionDialog();
};
......@@ -306,7 +306,6 @@ customBackgrounds.loadCollections = function() {
* Display dialog with various options for custom background source.
*/
customBackgrounds.initCustomBackgrounds = function() {
var editDialogOverlay = $(customBackgrounds.IDS.EDIT_BG_OVERLAY);
var editDialog = $(customBackgrounds.IDS.EDIT_BG_DIALOG);
$(customBackgrounds.IDS.CONNECT_GOOGLE_PHOTOS_TEXT).textContent =
......@@ -322,51 +321,31 @@ customBackgrounds.initCustomBackgrounds = function() {
$(customBackgrounds.IDS.REFRESH_TEXT).textContent =
configData.translatedStrings.dailyRefresh;
// Control tab cycling through background options.
$(customBackgrounds.IDS.DEFAULT_WALLPAPERS).onkeydown = function(event) {
if (event.keyCode == customBackgrounds.KEYCODES.TAB) {
event.preventDefault();
$(customBackgrounds.IDS.RESTORE_DEFAULT).focus();
}
};
$(customBackgrounds.IDS.RESTORE_DEFAULT).onkeydown = function(event) {
if (event.keyCode == customBackgrounds.KEYCODES.TAB) {
event.preventDefault();
$(customBackgrounds.IDS.DEFAULT_WALLPAPERS).focus();
}
};
$(customBackgrounds.IDS.RESTORE_DEFAULT).onfocus = function() {
if (this.hidden) {
$(customBackgrounds.IDS.DEFAULT_WALLPAPERS).focus();
}
};
var editBackgroundInteraction = function(event) {
customBackgrounds.loadCollections();
$(customBackgrounds.IDS.EDIT_BG_OVERLAY)
.classList.add(customBackgrounds.CLASSES.SHOW_OVERLAY);
$(customBackgrounds.IDS.DEFAULT_WALLPAPERS).focus();
editDialog.showModal();
};
$(customBackgrounds.IDS.EDIT_BG).onclick = editBackgroundInteraction;
$(customBackgrounds.IDS.EDIT_BG).onclick = function(event) {
editDialog.classList.remove(customBackgrounds.CLASSES.KEYBOARD_NAV);
editBackgroundInteraction(event);
};
$(customBackgrounds.IDS.EDIT_BG).onkeyup = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
editDialog.classList.add(customBackgrounds.CLASSES.KEYBOARD_NAV);
editBackgroundInteraction(event);
}
};
var editDialogOverlayInteraction = function(event) {
editDialogOverlay.classList.remove(customBackgrounds.CLASSES.SHOW_OVERLAY);
$(customBackgrounds.IDS.EDIT_BG).focus();
editDialog.close();
};
editDialogOverlay.onclick = function(event) {
if (event.target == editDialogOverlay)
editDialog.onclick = function(event) {
if (event.target == editDialog)
editDialogOverlayInteraction(event);
};
editDialogOverlay.onkeyup = function(event) {
editDialog.onkeyup = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ESC ||
event.keyCode === customBackgrounds.KEYCODES.BACKSPACE) {
editDialogOverlayInteraction(event);
......@@ -374,10 +353,8 @@ customBackgrounds.initCustomBackgrounds = function() {
};
var restoreDefaultInteraction = function(event) {
$(customBackgrounds.IDS.EDIT_BG_OVERLAY)
.classList.remove(customBackgrounds.CLASSES.SHOW_OVERLAY);
editDialog.close();
window.chrome.embeddedSearch.newTabPage.setBackgroundURL('');
$(customBackgrounds.IDS.EDIT_BG).focus();
};
$(customBackgrounds.IDS.RESTORE_DEFAULT).onclick = restoreDefaultInteraction;
$(customBackgrounds.IDS.RESTORE_DEFAULT).onkeyup = function(event) {
......@@ -387,11 +364,9 @@ customBackgrounds.initCustomBackgrounds = function() {
};
var defaultWallpapersInteraction = function(event) {
$(customBackgrounds.IDS.EDIT_BG_OVERLAY)
.classList.remove(customBackgrounds.CLASSES.SHOW_OVERLAY);
editDialog.close();
if (typeof coll != 'undefined') {
customBackgrounds.showCollectionSelectionDialog();
$('coll_tile_0').focus();
}
};
$(customBackgrounds.IDS.DEFAULT_WALLPAPERS).onclick =
......@@ -402,18 +377,18 @@ customBackgrounds.initCustomBackgrounds = function() {
}
};
$(customBackgrounds.IDS.MENU).onkeyup = function(event) {
$(customBackgrounds.IDS.MENU).onkeydown = function(event) {
if (event.keyCode === customBackgrounds.KEYCODES.ESC ||
event.keyCode === customBackgrounds.KEYCODES.BACKSPACE) {
event.preventDefault();
event.stopPropagation();
if ($(customBackgrounds.IDS.MENU)
.classList.contains(
customBackgrounds.CLASSES.COLLECTION_DIALOG)) {
$(customBackgrounds.IDS.MENU).close();
$(customBackgrounds.IDS.EDIT_BG).focus();
} else {
customBackgrounds.resetSelectionDialog();
customBackgrounds.showCollectionSelectionDialog();
$('coll_tile_0').focus();
}
}
};
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ c13751e3
......@@ -75,49 +75,46 @@
<div id="attribution"><div id="attribution-text"></div></div>
<div id="edit-bg" tabindex="0" hidden>
<button id="edit-bg-gear"></button>
<button id="edit-bg-gear" tabindex="-1"></button>
</div>
</div>
<div id="edit-bg-overlay">
<div id="edit-bg-dialog">
<div id="edit-bg-title"></div>
<div id="edit-bg-google-photos" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-google-photos-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-default-wallpapers-text" class="bg-option-text">
</div>
</div>
<div id="edit-bg-upload-image" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-upload-image-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-restore-default" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-restore-default-text" class="bg-option-text"></div>
</div>
<dialog div id="edit-bg-dialog">
<div id="edit-bg-title"></div>
<div id="edit-bg-google-photos" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-google-photos-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-default-wallpapers-text" class="bg-option-text">
</div>
</div>
<div id="edit-bg-upload-image" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-upload-image-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-restore-default" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-restore-default-text" class="bg-option-text"></div>
</div>
</dialog>
</div>
<dialog id="bg-sel-menu">
<div id="bg-sel-title-bar">
<div id="bg-sel-back"></div>
<div id="bg-sel-title"></div>
</div>
<div id="bg-sel-tiles"></div>
<div id="bg-sel-footer">
<label id="bg-daily-refresh" class="switch">
<input type="checkbox">
<span class="toggle"></span>
</label>
<div id="bg-sel-refresh-text"></div>
<div id="bg-sel-footer-done"></div>
</div>
</dialog>
<dialog id="bg-sel-menu">
<div id="bg-sel-title-bar">
<div id="bg-sel-back"></div>
<div id="bg-sel-title"></div>
</div>
<div id="bg-sel-tiles"></div>
<div id="bg-sel-footer">
<label id="bg-daily-refresh" class="switch">
<input type="checkbox">
<span class="toggle"></span>
</label>
<div id="bg-sel-refresh-text"></div>
<div id="bg-sel-footer-done"></div>
</div>
</dialog>
<dialog id="voice-overlay-dialog" class="overlay-dialog">
<div id="voice-overlay" class="overlay-hidden">
......
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ c13751e3
......@@ -66,31 +66,28 @@
<div id="edit-bg" hidden>
<button id="edit-bg-gear"></button>
</div>
</div>
<div id="edit-bg-overlay">
<div id="edit-bg-dialog">
<div id="edit-bg-title"></div>
<div id="edit-bg-google-photos" class="bg-option">
<div class="bg-option-img"></div>
<div id="edit-bg-google-photos-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-default-wallpapers" class="bg-option">
<div class="bg-option-img"></div>
<div id="edit-bg-default-wallpapers-text" class="bg-option-text">
</div>
</div>
<div id="edit-bg-upload-image" class="bg-option">
<div class="bg-option-img"></div>
<div id="edit-bg-upload-image-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-restore-default" class="bg-option">
<div class="bg-option-img"></div>
<div id="edit-bg-restore-default-text" class="bg-option-text"></div>
</div>
<dialog div id="edit-bg-dialog">
<div id="edit-bg-title"></div>
<div id="edit-bg-google-photos" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-google-photos-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-default-wallpapers" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-default-wallpapers-text" class="bg-option-text">
</div>
</div>
</div>
<div id="edit-bg-upload-image" class="bg-option" tabindex="0" hidden>
<div class="bg-option-img"></div>
<div id="edit-bg-upload-image-text" class="bg-option-text"></div>
</div>
<div id="edit-bg-restore-default" class="bg-option" tabindex="0">
<div class="bg-option-img"></div>
<div id="edit-bg-restore-default-text" class="bg-option-text"></div>
</div>
</dialog>
<dialog id="bg-sel-menu">
<div id="bg-sel-title-bar">
......
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