Skip to content

Commit

Permalink
Reland "[NTP] Add ability to add/delete/reset custom links from the N…
Browse files Browse the repository at this point in the history 
…ew Tab Page"

This is a reland of c7c6a23

The iframe was sometimes emitting a DOMContentLoaded event before the
src was modified.

Original change's description:
> [NTP] Add ability to add/delete/reset custom links from the New Tab Page
>
> Added functionality for adding/removing links and restoring the Most
> Visited tiles. If the URL is not valid, the link will not be added. The
> blacklist button now opens the edit dialog (editing links is currently
> not functional and will be added in a later CL).
>
> Also added hover/pressed/focus styling to the input fields and the
> buttons.
>
> Design Doc: go/chrome-ntp-custom-links
>
> Video: https://screencast.googleplex.com/cast/NTQyNDU2OTc1ODI1MzA1NnwwMjFkODAwYi1kMg
>
> Bug: 851293
> Change-Id: Ic92e46ba93a4abcb375467a1d047cbb573f231ba
> Reviewed-on: https://chromium-review.googlesource.com/1149458
> Commit-Queue: Kristi Park <kristipark@chromium.org>
> Reviewed-by: Marc Treib <treib@chromium.org>
> Reviewed-by: Bernhard Bauer <bauerb@chromium.org>
> Reviewed-by: Mathieu Perreault <mathp@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#578404}

TBR=bauerb@chromium.org

Bug: 851293
Change-Id: Ibc4e29d1b5a9cedbd6151e0e02d14c6ae8eb9bd0
Reviewed-on: https://chromium-review.googlesource.com/1153314
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#578989}
  • Loading branch information
kristipark authored and Commit Bot committed Jul 30, 2018
1 parent 6f093af commit 0e19d3a
Show file tree
Hide file tree
Showing 19 changed files with 517 additions and 76 deletions.
1 change: 1 addition & 0 deletions chrome/browser/browser_resources.grd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,7 @@
<include name="IDR_CUSTOM_LINKS_EDIT_CSS" file="resources\local_ntp\custom_links_edit.css" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_JS" file="resources\local_ntp\custom_links_edit.js" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_ADD_SVG" file="resources\local_ntp\icons\add_link.svg" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_MENU_SVG" file="resources\local_ntp\icons\edit_menu.svg" type="BINDATA" />
<include name="IDR_OMNIBOX_HTML" file="resources\omnibox\omnibox.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_CSS" file="resources\omnibox\omnibox.css" type="BINDATA" compress="gzip" />
<include name="IDR_OMNIBOX_JS" file="resources\omnibox\omnibox.js" type="BINDATA" compress="gzip" />
Expand Down
11 changes: 11 additions & 0 deletions chrome/browser/resources/local_ntp/custom_backgrounds.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,17 @@ html[dir=rtl] .bg-option-img {
border-radius: 50%;
}

#edit-bg-divider {
border-bottom: 1px solid rgb(232, 234, 237);
margin: 8px 0;
width: 100%;
}

#custom-link-restore-default .bg-option-img {
background: rgb(241, 243, 244) url(icons/link_gray.svg) no-repeat center;
border-radius: 50%;
}

#edit-bg-restore-default .bg-option-img {
background: rgb(241, 243, 244) url(icons/chrome.svg) no-repeat center;
border-radius: 50%;
Expand Down
18 changes: 18 additions & 0 deletions chrome/browser/resources/local_ntp/custom_backgrounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ customBackgrounds.IDS = {
CANCEL: 'bg-sel-footer-cancel',
CONNECT_GOOGLE_PHOTOS: 'edit-bg-google-photos',
CONNECT_GOOGLE_PHOTOS_TEXT: 'edit-bg-google-photos-text',
CUSTOM_LINK_RESTORE_DEFAULT: 'custom-link-restore-default',
CUSTOM_LINK_RESTORE_DEFAULT_TEXT: 'custom-link-restore-default-text',
DEFAULT_WALLPAPERS: 'edit-bg-default-wallpapers',
DEFAULT_WALLPAPERS_TEXT: 'edit-bg-default-wallpapers-text',
DONE: 'bg-sel-footer-done',
Expand Down Expand Up @@ -672,6 +674,8 @@ customBackgrounds.initCustomBackgrounds = function() {
configData.translatedStrings.uploadImage;
$(customBackgrounds.IDS.RESTORE_DEFAULT_TEXT).textContent =
configData.translatedStrings.restoreDefaultBackground;
$(customBackgrounds.IDS.CUSTOM_LINK_RESTORE_DEFAULT_TEXT).textContent =
configData.translatedStrings.restoreDefaultLinks;
$(customBackgrounds.IDS.OPTIONS_TITLE).textContent =
configData.translatedStrings.customizeBackground;
$(customBackgrounds.IDS.REFRESH_TEXT).textContent =
Expand Down Expand Up @@ -797,6 +801,20 @@ customBackgrounds.initCustomBackgrounds = function() {
}
};

// Interactions with the "Restore default shortcuts" option.
var customLinksRestoreDefaultInteraction = function(event) {
editDialog.close();
window.chrome.embeddedSearch.newTabPage.resetCustomLinks();
};
$(customBackgrounds.IDS.CUSTOM_LINK_RESTORE_DEFAULT).onclick =
customLinksRestoreDefaultInteraction;
$(customBackgrounds.IDS.CUSTOM_LINK_RESTORE_DEFAULT).onkeyup = function(
event) {
if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
customLinksRestoreDefaultInteraction(event);
}
};

// Interactions with the "Chrome backgrounds" option.
var defaultWallpapersInteraction = function(event) {
customBackgrounds.loadChromeBackgrounds();
Expand Down
106 changes: 102 additions & 4 deletions chrome/browser/resources/local_ntp/custom_links_edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
width: 100%;
}

.dialog-title {
#dialog-title {
color: rgb(32, 33, 36);
font-family: 'Roboto', arial, sans-serif;
font-size: 15px;
line-height: 24px;
margin-bottom: 16px;
Expand All @@ -42,18 +44,72 @@
margin-bottom: 4px;
}

.input-container {
position: relative;
}

input {
-webkit-padding-end: 8px;
-webkit-padding-start: 8px;
background-color: rgb(232, 234, 237);
border: none;
border-radius: 4px;
caret-color: rgb(26, 115, 232);
color: rgb(32, 33, 36);
font-family: 'Roboto', arial, sans-serif;
font-size: 13px;
height: 32px;
line-height: 24px;
outline: none;
padding-inline-end: 8px;
padding-inline-start: 8px;
width: calc(100% - 16px);
}

.underline {
border-bottom: 2px solid rgb(26, 115, 232);
bottom: 0;
box-sizing: border-box;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
transition: opacity 120ms ease-out, width 0ms linear 180ms;
width: 0;
}

input:focus + .underline {
opacity: 1;
transition: width 180ms ease-out, opacity 120ms ease-in;
width: 100%;
}

.field-title.focused {
color: rgb(26, 115, 232);
}

.error-msg {
color: rgb(217, 48, 37);
display: none;
font-size: 10px;
font-weight: 400;
margin-top: 6px;
}

.invalid label {
color: rgb(217, 48, 37);
}

.invalid .error-msg {
display: block;
}

.invalid .underline {
border-color: rgb(217, 48, 37);
opacity: 1;
transition: width 180ms ease-out, opacity 120ms ease-in;
width: 100%;
}

.buttons-container {
display: flex;
justify-content: space-between;
Expand All @@ -66,22 +122,64 @@ input {
button {
border: none;
border-radius: 4px;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: 500;
height: 32px;
padding: 0 16px;
transition-duration: 200ms;
transition-property: background-color, color, box-shadow, border;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button.primary {
background-color: rgb(26, 115, 232);
color: white;
}

button:focus:not(:active) {
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4);
}

button.primary:disabled {
background-color: rgb(241, 243, 244);
color: rgb(128, 134, 139);
}

button.primary:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
0 1px 3px 1px rgba(66, 133, 244, 0.15);
}

button.primary:active:not(:disabled) {
box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
0 3px 6px 2px rgba(66, 133, 244, 0.15);
}

button.secondary {
background-color: white;
border: 1px solid rgb(218,220,224);
border: 1px solid rgb(218, 220, 224);
color: rgb(26, 115, 232);
}

button.secondary:disabled {
border-color: rgb(241, 243, 244);
color: rgb(128, 134, 139);
}

button.secondary:hover:not(:disabled) {
background-color: rgba(66, 133, 244, 0.04);
border-color: rgb(210, 227, 252);
}

button.secondary:active:not(:disabled) {
background-color: white;
border-color: white;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
0 3px 6px 2px rgba(60, 64, 67, 0.15);
}

#cancel {
margin-right: 8px;
}
46 changes: 28 additions & 18 deletions chrome/browser/resources/local_ntp/custom_links_edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,34 @@
</head>
<body>
<dialog id="edit-link-dialog">
<div class="dialog-title">Edit shortcut</div>
<div class="field-container">
<div class="field-title">Name</div>
<input class="field-input" autocomplete="no" tabindex="0"></input>
</div>
<div class="field-container">
<div class="field-title">URL</div>
<input class="field-input" autocomplete="url" tabindex="0"></input>
</div>
<div class="buttons-container">
<span>
<button id="delete" class="secondary">Remove</button>
</span>
<span class="right">
<button id="cancel" class="secondary">Cancel</button>
<button id="done" class="primary">Done</button>
</span>
</div>
<div id="dialog-title"></div>
<form id="edit-form" action="">
<div id="title" class="field-container">
<label id="title-field-name" class="field-title"></label>
<div class="input-container">
<input id="title-field" class="field-input" type="text"
autocomplete="no" tabindex="0" required></input>
<div class="underline"></div>
</div>
</div>
<div id="url" class="field-container">
<label id="url-field-name" class="field-title"></label>
<div class="input-container">
<input id="url-field" class="field-input" type="text"
autocomplete="url" tabindex="0" required></input>
<div class="underline"></div>
</div>
<div id="invalid-url" class="error-msg"></div>
</div>
<div class="buttons-container">
<button id="delete" class="secondary" tabindex="0"></button>
<span class="right">
<button id="cancel" class="secondary" tabindex="0"></button>
<button type="submit" id="done" class="primary" disabled="true"
tabindex="0"></button>
</span>
</div>
</form>
</dialog>
</body>
</html>
Loading

0 comments on commit 0e19d3a

Please sign in to comment.