mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-09 17:31:47 +09:00
Issue #517 Part 7: Remove enhanced/sponsored links styling and page code
This commit is contained in:
wolfbeast
Roy Tam
parent
c5b8ab8c9a
commit
2af1e4bff9
5 changed files with 6 additions and 183 deletions
|
|
@ -9,7 +9,6 @@
|
|||
*/
|
||||
const GRID_BOTTOM_EXTRA = 7; // title's line-height extends 7px past the margin
|
||||
const GRID_WIDTH_EXTRA = 1; // provide 1px buffer to allow for rounding error
|
||||
const SPONSORED_TAG_BUFFER = 2; // 2px buffer to clip off top of sponsored tag
|
||||
|
||||
/**
|
||||
* This singleton represents the grid that contains all sites.
|
||||
|
|
@ -179,18 +178,15 @@ var 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 placeholder"/>' +
|
||||
' <span class="newtab-thumbnail thumbnail"/>' +
|
||||
' <span class="newtab-thumbnail enhanced-content"/>' +
|
||||
' <span class="newtab-title"/>' +
|
||||
'</a>' +
|
||||
'<input type="button" title="' + newTabString("pin") + '"' +
|
||||
' class="newtab-control newtab-control-pin"/>' +
|
||||
'<input type="button" title="' + newTabString("block") + '"' +
|
||||
' class="newtab-control newtab-control-block"/>' +
|
||||
'<span class="newtab-suggested"/>';
|
||||
' class="newtab-control newtab-control-block"/>';
|
||||
|
||||
this._siteFragment = document.createDocumentFragment();
|
||||
this._siteFragment.appendChild(site);
|
||||
|
|
@ -271,6 +267,6 @@ var gGrid = {
|
|||
this._node.style.maxWidth = gGridPrefs.gridColumns * this._cellWidth +
|
||||
GRID_WIDTH_EXTRA + "px";
|
||||
this._node.style.height = this._computeHeight() + "px";
|
||||
this._node.style.maxHeight = this._computeHeight(gridRows) - SPONSORED_TAG_BUFFER + "px";
|
||||
this._node.style.maxHeight = this._computeHeight(gridRows) + "px";
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -151,16 +151,13 @@ input[type=button] {
|
|||
}
|
||||
|
||||
/* TITLES */
|
||||
.newtab-sponsored,
|
||||
.newtab-title,
|
||||
.newtab-suggested {
|
||||
.newtab-title {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newtab-sponsored,
|
||||
.newtab-title {
|
||||
bottom: 0;
|
||||
white-space: nowrap;
|
||||
|
|
@ -168,103 +165,11 @@ input[type=button] {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.newtab-suggested {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
margin-bottom: -1px;
|
||||
padding: 2px 8px;
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
top: 215px;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.newtab-suggested-bounds {
|
||||
max-height: 34px; /* 34 / 17 = 2 lines maximum */
|
||||
}
|
||||
|
||||
.newtab-title {
|
||||
left: 0;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.newtab-sponsored {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #E2E2E2;
|
||||
border-radius: 3px;
|
||||
color: #4A4A4A;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-family: Arial;
|
||||
font-size: 9px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
line-height: 6px;
|
||||
padding: 4px;
|
||||
right: auto;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.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:dir(rtl) {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.newtab-site:-moz-any([type=enhanced], [type=sponsored], [suggested]) .newtab-sponsored {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.newtab-site[suggested] .newtab-suggested {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.sponsored-explain,
|
||||
.sponsored-explain a,
|
||||
.suggested-explain,
|
||||
.suggested-explain a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sponsored-explain,
|
||||
.suggested-explain {
|
||||
background-color: rgba(51, 51, 51, 0.95);
|
||||
bottom: 30px;
|
||||
line-height: 20px;
|
||||
padding: 15px 10px;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.sponsored-explain input,
|
||||
.suggested-explain input {
|
||||
background-size: 18px;
|
||||
height: 18px;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
position: static;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* CONTROLS */
|
||||
.newtab-control {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
|||
Cu.import("resource://gre/modules/Services.jsm");
|
||||
Cu.import("resource://gre/modules/PageThumbs.jsm");
|
||||
Cu.import("resource://gre/modules/BackgroundPageThumbs.jsm");
|
||||
// Cu.import("resource:///modules/DirectoryLinksProvider.jsm");
|
||||
Cu.import("resource://gre/modules/NewTabUtils.jsm");
|
||||
|
||||
XPCOMUtils.defineLazyModuleGetter(this, "Rect",
|
||||
|
|
|
|||
|
|
@ -275,8 +275,6 @@ var gPage = {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DirectoryLinksProvider.reportSitesAction(sites, "view", lastIndex);
|
||||
},
|
||||
|
||||
maybeShowAutoMigrationUndoNotification() {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ Site.prototype = {
|
|||
this._updateAttributes(true);
|
||||
let changed = gPinnedLinks.pin(this._link, aIndex);
|
||||
if (changed) {
|
||||
// render site again to remove suggested/sponsored tags
|
||||
// render site again
|
||||
this._render();
|
||||
}
|
||||
return changed;
|
||||
|
|
@ -171,10 +171,8 @@ Site.prototype = {
|
|||
// first check for end time, as it may modify the link
|
||||
this._checkLinkEndTime();
|
||||
// setup display variables
|
||||
let enhanced = gAllPages.enhanced; // && DirectoryLinksProvider.getEnhancedLink(this.link);
|
||||
let url = this.url;
|
||||
let title = enhanced && enhanced.title ? enhanced.title :
|
||||
this.link.type == "history" ? this.link.baseDomain :
|
||||
let title = this.link.type == "history" ? this.link.baseDomain :
|
||||
this.title;
|
||||
let tooltip = (this.title == url ? this.title : this.title + "\n" + url);
|
||||
|
||||
|
|
@ -189,22 +187,6 @@ Site.prototype = {
|
|||
titleNode.style.backgroundColor = this.link.titleBgColor;
|
||||
}
|
||||
|
||||
// remove "suggested" attribute to avoid showing "suggested" tag
|
||||
// after site was pinned or dropped
|
||||
this.node.removeAttribute("suggested");
|
||||
|
||||
if (this.link.targetedSite) {
|
||||
if (this.node.getAttribute("type") != "sponsored") {
|
||||
this._querySelector(".newtab-sponsored").textContent =
|
||||
newTabString("suggested.tag");
|
||||
}
|
||||
|
||||
this.node.setAttribute("suggested", true);
|
||||
let explanation = this._getSuggestedTileExplanation();
|
||||
this._querySelector(".newtab-suggested").innerHTML =
|
||||
`<div class='newtab-suggested-bounds'> ${explanation} </div>`;
|
||||
}
|
||||
|
||||
if (this.isPinned())
|
||||
this._updateAttributes(true);
|
||||
// Capture the page if the thumbnail is missing, which will cause page.js
|
||||
|
|
@ -243,9 +225,7 @@ Site.prototype = {
|
|||
* Refreshes the thumbnail for the site.
|
||||
*/
|
||||
refreshThumbnail: function Site_refreshThumbnail() {
|
||||
// Only enhance tiles if that feature is turned on
|
||||
let link = gAllPages.enhanced; // && DirectoryLinksProvider.getEnhancedLink(this.link) ||
|
||||
this.link;
|
||||
let link = this.link;
|
||||
|
||||
let thumbnail = this._querySelector(".newtab-thumbnail.thumbnail");
|
||||
if (link.bgColor) {
|
||||
|
|
@ -267,16 +247,6 @@ Site.prototype = {
|
|||
placeholder.style.backgroundColor = "hsl(" + hue + ",80%,40%)";
|
||||
placeholder.textContent = link.baseDomain.substr(0,1).toUpperCase();
|
||||
}
|
||||
|
||||
if (link.enhancedImageURI) {
|
||||
let enhanced = this._querySelector(".enhanced-content");
|
||||
enhanced.style.backgroundImage = 'url("' + link.enhancedImageURI + '")';
|
||||
|
||||
if (this.link.type != link.type) {
|
||||
this.node.setAttribute("type", "enhanced");
|
||||
this.enhancedId = link.directoryId;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_ignoreHoverEvents: function(element) {
|
||||
|
|
@ -296,13 +266,6 @@ Site.prototype = {
|
|||
this._node.addEventListener("dragstart", this, false);
|
||||
this._node.addEventListener("dragend", this, false);
|
||||
this._node.addEventListener("mouseover", this, false);
|
||||
|
||||
// Specially treat the sponsored icon & suggested explanation
|
||||
// text to prevent regular hover effects
|
||||
let sponsored = this._querySelector(".newtab-sponsored");
|
||||
let suggested = this._querySelector(".newtab-suggested");
|
||||
this._ignoreHoverEvents(sponsored);
|
||||
this._ignoreHoverEvents(suggested);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -341,21 +304,6 @@ Site.prototype = {
|
|||
|
||||
button.removeAttribute("active");
|
||||
}
|
||||
else {
|
||||
let explain = document.createElementNS(HTML_NAMESPACE, "div");
|
||||
explain.className = explanationTextClass.slice(1); // Slice off the first character, '.'
|
||||
this.node.appendChild(explain);
|
||||
|
||||
let link = '<a href="' + TILES_EXPLAIN_LINK + '">' +
|
||||
newTabString("learn.link") + "</a>";
|
||||
let type = (this.node.getAttribute("suggested") && this.node.getAttribute("type") == "affiliate") ?
|
||||
"suggested" : this.node.getAttribute("type");
|
||||
let icon = '<input type="button" class="newtab-control newtab-' +
|
||||
(type == "enhanced" ? "customize" : "control-block") + '"/>';
|
||||
explain.innerHTML = newTabString(type + (type == "sponsored" ? ".explain2" : ".explain"), [icon, link]);
|
||||
|
||||
button.setAttribute("active", "true");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -376,31 +324,13 @@ Site.prototype = {
|
|||
action = "click";
|
||||
}
|
||||
}
|
||||
// Handle sponsored explanation link click
|
||||
else if (target.parentElement.classList.contains("sponsored-explain")) {
|
||||
action = "sponsored_link";
|
||||
}
|
||||
else if (target.parentElement.classList.contains("suggested-explain")) {
|
||||
action = "suggested_link";
|
||||
}
|
||||
// Only handle primary clicks for the remaining targets
|
||||
else if (button == 0) {
|
||||
aEvent.preventDefault();
|
||||
if (target.classList.contains("newtab-control-block")) {
|
||||
// Notify DirectoryLinksProvider of suggested tile block, this may
|
||||
// affect if and how suggested tiles are recommended and needs to
|
||||
// be reported before pages are updated inside block() call
|
||||
if (this.link.targetedSite) {
|
||||
// DirectoryLinksProvider.handleSuggestedTileBlock();
|
||||
}
|
||||
this.block();
|
||||
action = "block";
|
||||
}
|
||||
else if (target.classList.contains("sponsored-explain") ||
|
||||
target.classList.contains("newtab-sponsored")) {
|
||||
this._toggleLegalText(".newtab-sponsored", ".sponsored-explain");
|
||||
action = "sponsored";
|
||||
}
|
||||
else if (pinned && target.classList.contains("newtab-control-pin")) {
|
||||
this.unpin();
|
||||
action = "unpin";
|
||||
|
|
@ -413,11 +343,6 @@ Site.prototype = {
|
|||
action = "pin";
|
||||
}
|
||||
}
|
||||
|
||||
// Report all link click actions
|
||||
if (action) {
|
||||
// DirectoryLinksProvider.reportSitesAction(gGrid.sites, action, tileIndex);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue