Bug 1158858 - Move 'suggested' and 'sponsored' labels to the top left of the tile. r=Mardak

browser/base/content/newtab/grid.js

@@ -159,6 +159,7 @@ let gGrid = {
 
     // Create the site's inner HTML code.
     site.innerHTML =
+      '<span class="newtab-sponsored">' + newTabString("sponsored.button") + '</span>' +
       '<a class="newtab-link">' +
       '  <span class="newtab-thumbnail"/>' +
       '  <span class="newtab-thumbnail enhanced-content"/>' +
@@ -168,7 +169,6 @@ let gGrid = {
       '       class="newtab-control newtab-control-pin"/>' +
       '<input type="button" title="' + newTabString("block") + '"' +
       '       class="newtab-control newtab-control-block"/>' +
-      '<span class="newtab-sponsored">' + newTabString("sponsored.button") + '</span>' +
       '<span class="newtab-suggested"/>';
 
     this._siteFragment = document.createDocumentFragment();

browser/base/content/newtab/intro.js

@@ -166,15 +166,15 @@ let gIntro = {
           // Create the cell's inner HTML code.
           image.innerHTML =
             '<div class="newtab-intro-cell' + imageClass + '">' +
-            '  <div class="newtab-site newtab-intro-image-tile" type="sponsored">' +
+            '  <div class="newtab-site newtab-intro-image-tile" type="sponsored" suggested="' + (imageClass ? "false" : "true") + '">' +
+            '    <span class="newtab-sponsored">' +
+                   newTabString(imageClass ? "sponsored.button" : "suggested.tag") + '</span>' +
             '    <a class="newtab-link">' +
             '      <span class="newtab-thumbnail"/>' +
             '      <span class="newtab-title">mozilla.org</span>' +
             '    </a>' +
             '    <input type="button" class="newtab-control newtab-control-pin"/>' +
             '    <input type="button" class="newtab-control newtab-control-block"/>' +
-            '    <span class="newtab-sponsored">' +
-                   newTabString(imageClass ? "sponsored.button" : "suggested.tag") + '</span>' +
             '  </div>' +
             '</div>';
             break;

browser/base/content/newtab/newTab.css

@@ -207,27 +207,40 @@ input[type=button] {
 }
 
 .newtab-sponsored {
-  border: 1px solid #dcdcdc;
-  border-radius: 2px;
+  background-color: #FFFFFF;
+  border: 1px solid #E2E2E2;
+  border-radius: 3px;
+  color: #4A4A4A;
   cursor: pointer;
   display: none;
   font-family: Arial;
-  font-size: 10px;
+  font-size: 9px;
   height: 17px;
-  line-height: 17px;
-  margin: 5px;
-  padding: 0 4px;
+  left: 0;
+  line-height: 6px;
+  padding: 4px;
+  right: auto;
+  top: -15px;
 }
 
-.newtab-sponsored:-moz-any(:hover, [active]) {
-  background-color: #3a72b1;
+.newtab-site[suggested=true] > .newtab-sponsored {
+  background-color: #E2E2E2;
+  border: none;
+}
+
+.newtab-site > .newtab-sponsored:-moz-any(:hover, [active]) {
+  background-color: #4A90E2;
   border: 0;
   color: white;
 }
 
+.newtab-site > .newtab-sponsored[active] {
+  background-color: #000000;
+}
+
 .newtab-sponsored:-moz-locale-dir(rtl) {
-  left: 0;
-  right: auto;
+  right: 0;
+  left: auto;
 }
 
 .newtab-site:-moz-any([type=enhanced], [type=sponsored], [suggested]) .newtab-sponsored {
@@ -645,7 +658,7 @@ input[type=button] {
 
 #newtab-intro-modal {
   font-family: "Helvetica";
-  height: 500px;
+  height: 512px;
   position: fixed;
   left: 0;
   right: 0;
@@ -721,7 +734,7 @@ input[type=button] {
 }
 
 #newtab-intro-body {
-  height: 310px;
+  height: 330px;
   position: relative;
   display: block;
   top: 50px;
@@ -763,7 +776,6 @@ input[type=button] {
   right: 0px;
   font-size: 14px;
   line-height: 20px;
-  margin-top: -12px;
   min-width: 270px;
 }
 

browser/themes/shared/newtab/newTab.inc.css

@@ -107,9 +107,10 @@
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
-.newtab-cell:not([ignorehover]) > .newtab-site:hover,
+.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
+.newtab-cell:not([ignorehover]) .newtab-link:hover,
 .newtab-site[dragged],
-.newtab-intro-cell-hover {
+.newtab-intro-cell-hover .newtab-link {
   border: 2px solid white;
   box-shadow: 0 0 6px 2px #4cb1ff;
   margin: -2px;
@@ -128,7 +129,8 @@
 
 /* LINKS */
 .newtab-link {
-  border-radius: 6px;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 /* THUMBNAILS */