Bug 1158853 - Replace history tile titles with base domains and include titles as part of tiles. r=adw

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;

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);

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");

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 {

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;
   },