Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 20:35:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1322737 - Implement ability to show basic placeholders for missing about:newtab thumbnails. r=gijs

Browse Source
This commit is contained in:
Dão Gottwald 2017-01-06 15:00:25 +01:00
parent 4c6a6fbadb
commit 4d5ab006a2
6 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
browser/app/profile/firefox.js
View File

@ -1161,6 +1161,9 @@ sticky_pref("browser.newtabpage.enhanced", true);
// enables Activity Stream inspired layout
pref("browser.newtabpage.compact", false);
// enables showing basic placeholders for missing thumbnails
pref("browser.newtabpage.thumbnailPlaceholder", false);
// number of rows of newtab grid
pref("browser.newtabpage.rows", 3);

3
browser/base/content/newtab/grid.js
View File

@ -173,7 +173,8 @@ var gGrid = {
site.innerHTML =
'<span class="newtab-sponsored">' + newTabString("sponsored.button") + '</span>' +
'<a class="newtab-link">' +
' <span class="newtab-thumbnail"/>' +
' <span class="newtab-thumbnail placeholder"/>' +
' <span class="newtab-thumbnail thumbnail"/>' +
' <span class="newtab-thumbnail enhanced-content"/>' +
' <span class="newtab-title"/>' +
'</a>' +

19
browser/base/content/newtab/sites.js
View File

@ -4,6 +4,9 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */
#endif
const THUMBNAIL_PLACEHOLDER_ENABLED =
Services.prefs.getBoolPref("browser.newtabpage.thumbnailPlaceholder");
/**
* This class represents a site that is contained in a cell and can be pinned,
* moved around or deleted.
@ -244,14 +247,26 @@ Site.prototype = {
let link = gAllPages.enhanced && DirectoryLinksProvider.getEnhancedLink(this.link) ||
this.link;
let thumbnail = this._querySelector(".newtab-thumbnail");
let thumbnail = this._querySelector(".newtab-thumbnail.thumbnail");
if (link.bgColor) {
thumbnail.style.backgroundColor = link.bgColor;
}
let uri = link.imageURI || PageThumbs.getThumbnailURL(this.url);
thumbnail.style.backgroundImage = 'url("' + uri + '")';
if (THUMBNAIL_PLACEHOLDER_ENABLED &&
link.type == "history" &&
link.baseDomain) {
let placeholder = this._querySelector(".newtab-thumbnail.placeholder");
let hue = 0;
for (let c of link.baseDomain) {
hue += c.charCodeAt(0);
}
hue %= 256;
placeholder.style.backgroundColor = "hsl(" + hue + ",50%,60%)";
placeholder.textContent = link.baseDomain.substr(0,1);
}
if (link.enhancedImageURI) {
let enhanced = this._querySelector(".enhanced-content");
enhanced.style.backgroundImage = 'url("' + link.enhancedImageURI + '")';

2
browser/base/content/test/newtab/browser_newtab_bug1145428.js
View File

@ -31,7 +31,7 @@ add_task(function* () {
let siteNode = cell.site.node;
return {
type: siteNode.getAttribute("type"),
thumbnail: siteNode.querySelector(".newtab-thumbnail").style.backgroundImage,
thumbnail: siteNode.querySelector(".newtab-thumbnail.thumbnail").style.backgroundImage,
enhanced: siteNode.querySelector(".enhanced-content").style.backgroundImage,
title: siteNode.querySelector(".newtab-title").textContent,
suggested: siteNode.getAttribute("suggested"),

2
browser/base/content/test/newtab/browser_newtab_bug1178586.js
View File

@ -29,7 +29,7 @@ add_task(function* () {
let siteNode = cell.site.node;
return {
type: siteNode.getAttribute("type"),
thumbnail: siteNode.querySelector(".newtab-thumbnail").style.backgroundImage,
thumbnail: siteNode.querySelector(".newtab-thumbnail.thumbnail").style.backgroundImage,
enhanced: siteNode.querySelector(".enhanced-content").style.backgroundImage,
title: siteNode.querySelector(".newtab-title").textContent,
suggested: siteNode.getAttribute("suggested"),

10
browser/themes/shared/newtab/newTab.inc.css
View File

@ -167,6 +167,16 @@ body.compact .newtab-thumbnail {
outline-offset: -1px;
}
.newtab-thumbnail.placeholder {
color: white;
font-size: 85px;
line-height: 200%;
}
body.compact .newtab-thumbnail.placeholder {
font-size: 45px;
}
.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
opacity: 0;
}