diff --git a/browser/base/content/newtab/newTab.css b/browser/base/content/newtab/newTab.css index c10ec60b5e3b..acd2f911749d 100644 --- a/browser/base/content/newtab/newTab.css +++ b/browser/base/content/newtab/newTab.css @@ -158,8 +158,8 @@ input[type=button] { /* CELLS */ .newtab-cell { display: -moz-box; - height: 180px; - margin: 20px 10px 68px; + height: 210px; + margin: 20px 10px 35px; width: 290px; } @@ -203,14 +203,17 @@ input[type=button] { .newtab-sponsored, .newtab-title { - bottom: -26px; + bottom: 0; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; + line-height: 30px; + vertical-align: middle; + background-color: #F2F2F2; } .newtab-suggested { - border: 1px solid #dcdcdc; + border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-size: 12px; @@ -231,7 +234,6 @@ input[type=button] { .newtab-title { left: 0; - padding-top: 14px; } .newtab-sponsored { @@ -243,7 +245,7 @@ input[type=button] { font-size: 10px; height: 17px; line-height: 17px; - margin-bottom: -1px; + margin: 5px; padding: 0 4px; } @@ -276,9 +278,7 @@ input[type=button] { .sponsored-explain, .suggested-explain { background-color: rgba(51, 51, 51, 0.95); - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - bottom: 0px; + bottom: 30px; line-height: 20px; padding: 15px 10px; position: absolute; diff --git a/browser/base/content/newtab/sites.js b/browser/base/content/newtab/sites.js index 87e0bc47f1f3..3c7defb6ea6a 100644 --- a/browser/base/content/newtab/sites.js +++ b/browser/base/content/newtab/sites.js @@ -37,7 +37,7 @@ Site.prototype = { /** * The title of the site's link. */ - get title() { return this.link.title; }, + get title() { return this.link.title || this.link.url; }, /** * The site's parent cell. @@ -122,8 +122,10 @@ Site.prototype = { _render: function Site_render() { let enhanced = gAllPages.enhanced && DirectoryLinksProvider.getEnhancedLink(this.link); let url = this.url; - let title = enhanced && enhanced.title || this.title || url; - let tooltip = (title == url ? title : title + "\n" + url); + let title = enhanced && enhanced.title ? enhanced.title : + this.link.type == "history" ? this.link.baseDomain : + this.title; + let tooltip = (this.title == url ? this.title : this.title + "\n" + url); let link = this._querySelector(".newtab-link"); link.setAttribute("title", tooltip); diff --git a/browser/base/content/test/newtab/browser_newtab_enhanced.js b/browser/base/content/test/newtab/browser_newtab_enhanced.js index 0750017923a4..c8098c165725 100644 --- a/browser/base/content/test/newtab/browser_newtab_enhanced.js +++ b/browser/base/content/test/newtab/browser_newtab_enhanced.js @@ -58,7 +58,7 @@ function runTests() { let {type, enhanced, title} = getData(0); isnot(type, "enhanced", "history link is not enhanced"); is(enhanced, "", "history link has no enhanced image"); - is(title, "site#-1"); + is(title, "example.com"); is(getData(1), null, "there is only one link and it's a history link"); @@ -98,7 +98,7 @@ function runTests() { ({type, enhanced, title} = getData(0)); isnot(type, "enhanced", "history link is not enhanced"); is(enhanced, "", "history link has no enhanced image"); - is(title, "site#-1"); + is(title, "example.com"); is(getData(1), null, "directory link still pushed out by pinned history link"); @@ -120,7 +120,7 @@ function runTests() { ({type, enhanced, title} = getData(0)); isnot(type, "enhanced", "history link is not enhanced"); is(enhanced, "", "history link has no enhanced image"); - is(title, "site#-1"); + is(title, "example.com"); isnot(getData(7), null, "there are 8 history links"); is(getData(8), null, "there are 8 history links"); diff --git a/browser/themes/shared/newtab/newTab.inc.css b/browser/themes/shared/newtab/newTab.inc.css index f5dcfc974b8c..cfd9b036b53b 100644 --- a/browser/themes/shared/newtab/newTab.inc.css +++ b/browser/themes/shared/newtab/newTab.inc.css @@ -118,7 +118,8 @@ background-clip: padding-box; background-repeat: no-repeat; background-size: cover; - border-radius: inherit; + border-radius: 8px 8px 0px 0px; + height: 180px; transition: opacity 100ms ease-out; } @@ -153,10 +154,6 @@ color: white; } -.newtab-suggested { - background-color: white; -} - .newtab-site:hover .newtab-title { color: #222; } @@ -173,6 +170,8 @@ left: 0; position: absolute; width: 10px; + margin-left: 8px; + margin-top: 6px; } .newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before { diff --git a/toolkit/modules/NewTabUtils.jsm b/toolkit/modules/NewTabUtils.jsm index 757ee3577d83..57f50bb62895 100644 --- a/toolkit/modules/NewTabUtils.jsm +++ b/toolkit/modules/NewTabUtils.jsm @@ -882,6 +882,11 @@ let Links = { if (links.length) pinnedLinks = pinnedLinks.concat(links); + for (let link of pinnedLinks) { + if (link) { + link.baseDomain = NewTabUtils.extractSite(link.url); + } + } return pinnedLinks; },