Possible Logo Quality improvement Fix for Fast Dial 2.22b only

This is definitely not for the faint hearted !!

Thanks to user Darkobra for bringing up this question. and for his work with telega to find a resolution to this

The question was first brought up on Userlogos here


This was a fix made by telega for 2.22b only
(Will not work in 2.23b1)

Below is the modified fastdial.htmal file

fastdial.html is to be found in
extensions/fastdial@telega.phpnet.us/chrome/content

This whole file needs to be edited in to replace the previous file in the regular Fast Dial 2.22b.

Best done with 7-zip
As then a modified xpi version can be reloaded easily to Firefox

Here is the modified code

var options, sort, thumbnails;
var page = 0, pageCount, perPage;

var params = FdUtils.getQueryParams(document.location);
var wnd = FdUtils.getBrowserWindow();

if (!params.snapshot || params.nosnapshot) {
var snapshot = FdDom.get("snapshot");
FdDom.remove(snapshot);
}
var folder, root = FdStorage.getRoot();
if (!params.folder || params.folder == root.id) folder = root;
else try {
folder = FdStorage.getItem(params.folder);
folder.parent = FdStorage.getItem(folder.folderId);
folder.parent.isBack = true;
}
catch(e) {}

showIcon();
document.title = folder.title;
initThumbnails();

window.addEventListener("resize", onResize, false);
document.addEventListener("contextmenu", onContextMenu, false);
document.addEventListener("mousedown", onMouseDown, true);
document.addEventListener("mouseup", onMouseUp, false);
document.addEventListener("drop", onDragDrop, false);
document.addEventListener("click", onClick, false);
document.addEventListener("DOMMouseScroll", onMouseWheel, false);
document.addEventListener("keypress", onKeyPress, false);

function showIcon() {
var icon = FdDom.parse("");
document.documentElement.appendChild(icon);
}

function initThumbnails() {
options = FdPrefs.getObject("options");
sort = FdPrefs.getString("sort");
thumbnails = getThumbnails();

var input = FdDom.get("search-input");
var search = input && input.value;

var data = FdURL.readURL("chrome://fastdial/content/template/fastdial.tpl");
var template = new JsTemplate.Template(data);
var html = template.run({
options: options,
thumbnails: thumbnails
});

if (!document.body) document.write(html);
else document.body.innerHTML = html;

onResize();
initSearch(search);
}

function getThumbnails() {
var thumbs = [];
var items = FdStorage.getItems(folder.id, sort);
perPage = (showBack() ? -1 : 0) + options.width * options.height;
pageCount = Math.ceil(items.length / perPage);

for(var i = 0; i < perPage; i++) {
var properties = items[page * perPage + i];
if (!properties) continue;

var thumb = new FdThumbnail(properties);
thumbs[i] = thumb;

if (!thumb.isLoading() &&
!thumb.getImageFile().exists())
wnd.FdSnapshot.create(thumb.properties);
}
if (showBack()) {
var back = new FdThumbnail(folder.parent);
thumbs.unshift(back);
}
return thumbs;
}

function showBack() {
return !options.hideBack && folder.parent;
}

function getThumbIndex(index) {
return !sort && page * perPage + (showBack() ? -1 : 0) + parseInt(index);
}

function onResize() {
var bodyPadding = parseInt(FdDom.css(document.body, "padding-top")) * 2;
var grid = FdDom.get("grid");
var search = FdDom.get("search");

var box = FdDom.get(0);
var thumbnail = FdDom.child(box, "thumbnail");
var thumbnailOffset = parseInt(FdDom.css(thumbnail, "margin-top")) * 2 +
parseInt(FdDom.css(thumbnail, "border-top-width")) * 2;
var title = FdDom.child(thumbnail, "title");

var width = parseInt(options.thumbWidth);
if (!options.fixed) {
width = (window.innerWidth - bodyPadding) / options.width - thumbnailOffset;
height = (window.innerHeight - bodyPadding - search.offsetHeight) /
options.height - thumbnailOffset - title.offsetHeight;
if (height < FdThumbnail.getHeight(width)) {
width = FdThumbnail.getWidth(height);
}
}
height = FdThumbnail.getHeight(width) +
title.offsetHeight + thumbnailOffset;
width += thumbnailOffset;

FdDom.get("size").innerHTML = ".box {" +
"width: " + width + ";" +
"height: " + height + ";" +
"}";

var top = (window.innerHeight - bodyPadding - search.offsetHeight - grid.offsetHeight) / 2;
document.body.style.overflow = top < 0 ? "visible" : "hidden";
grid.style.marginTop = Math.max(top, 0);
}

function initSearch(value) {
if (options.hideSearch) return;

var icon = wnd.Fd.getSearchEngine().iconURI;
FdDom.get("search-icon").src = icon
? icon.spec : "chrome://browser/skin/Bookmarks-folder.png";
FdDom.get("search-input").value = value;
}

function onContextMenu(e) {
if (FdDom.is(e.target, "input")) return;

wnd.document.popupNode = e.target;
var box = FdDom.parent(e.target, "box");
wnd.Fd.showContextMenu(e, box && thumbnails[box.id]);
e.preventDefault();
}

var source;
var previewTimeout;

function onMouseDown(e) {
if (!FdDom.is(e.target, "image")) return;

FdDrag.draggable(e.target);
var box = FdDom.parent(e.target, "box");
source = thumbnails[box.id];

if (e.button == 0 && source.properties.preview) {
previewTimeout = setTimeout(function() {
showPreview(source);
}, 500);
}
}

function onMouseUp(e) {
clearTimeout(previewTimeout);
hidePreview();
FdDrag.enable();
}

function showPreview(thumb) {
if (FdDrag.inProgress()) return;
FdDrag.disable();

var snapshot = thumb.getSnapshotURL();
var image = FdCache.getCachedURL(snapshot, "preview");

var preview = FdDom.parse(
"" +
"" +
"" +
""
);
document.body.appendChild(preview);
}

function hidePreview() {
var preview = FdDom.get("preview");
if (preview) {
FdDom.remove(preview);
}
}

function onDragDrop(e) {
for(var i = 0; i < options.width * options.height; i++) {
if (!isMouseOver(FdDom.get(i), e.pageX, e.pageY)) continue;
var target = thumbnails[i];

if (target && target.properties.isBack || e.ctrlKey && target.properties.isFolder) {
source.properties.folderId = target.properties.id;
source.properties.index = -1;
source.save();
var targetURL = FdStorage.getFolderURL(target.properties.id);
FdCache.remove(targetURL);
}
else if (target) {
[source.properties.index, target.properties.index] =
[target.properties.index, source.properties.index];
[source.properties.thumbIndex, target.properties.thumbIndex] =
sort ? [source.properties.index, target.properties.index]
: [target.properties.thumbIndex, source.properties.thumbIndex];
if (source.properties.index < target.properties.index) {
[source, target] = [target, source];
}
source.save();
target.save();
}
else {
source.properties.thumbIndex = getThumbIndex(i);
if (sort) source.properties.index = -1;
source.save();
}
var folderURL = FdStorage.getFolderURL(folder.id);
FdCache.remove(folderURL);
wnd.Fd.updateView();
}
}

function isMouseOver(element, x, y) {
x += document.body.scrollLeft;
y += document.body.scrollTop;

var position = FdDom.position(element);
return x > position.left &&
y > position.top &&
x < position.left + element.offsetWidth &&
y < position.top + element.offsetHeight;
}

function onClick(e) {
if (e.target.id == "search-icon") {
e.preventDefault();
var menupopup = wnd.FdDom.get("fd-search-menu");
var offset = -0.4 * parseFloat(FdDom.css(e.target, "font-size"));
return menupopup.openPopup(e.target, "after_start", 0, offset, false, true);
}

var box = FdDom.parent(e.target, "box");
if (!box || e.button != 0) return;

var thumbnail = thumbnails[box.id];
if (!thumbnail) {
var properties = {
folderId: folder.id,
thumbIndex: getThumbIndex(box.id),
index: -1,
}
var thumbnail = new FdThumbnail(properties);
return thumbnail.openProperties();
}

if (FdDom.is(e.target, "refresh")) {
return thumbnail.refresh();
}
else if (FdDom.is(e.target, "remove")) {
return thumbnail.remove(true);
}
else if (FdDom.is(e.target, "properties")) {
return thumbnail.openProperties();
}
else if (FdDom.is(e.target, "image")) {
window.focus();
e.preventDefault();
FdUtils.openLink(thumbnail.getURL(), options.openIn || e);
}
}

const TIMEOUT_WHEEL = 250;
var wheelTime = 0;

function onMouseWheel(e) {
if (scrollMaxY) return;
var time = new Date().getTime();
if (time - wheelTime > TIMEOUT_WHEEL) {
wheelTime = time;
setPage(page + e.detail / Math.abs(e.detail));
}
}

function onKeyPress(e) {
switch(e.keyCode) {
case e.DOM_VK_PAGE_UP:
if (!scrollMaxY) setPage(page-1);
break;
case e.DOM_VK_PAGE_DOWN:
if (!scrollMaxX) setPage(page+1);
break;
case e.DOM_VK_ESCAPE:
if (e.target.id == "search-input")
e.target.value = null;
break;
case e.DOM_VK_RETURN:
if (e.target.id != "search-input") break;
var engine = wnd.Fd.getSearchEngine();
var submission = engine.getSubmission(e.target.value, null);
document.location = submission.uri.spec;
break;
}
}

function setPage(aPage) {
if (aPage >= pageCount) aPage = pageCount - 1;
if (aPage < 0) aPage = 0;
if (page != aPage) {
page = aPage;
initThumbnails();
}
}




For those that may be interested to compare and contrast, here is the original code for that file


var options, sort, thumbnails;
var page = 0, pageCount, perPage;

var params = FdUtils.getQueryParams(document.location);
var wnd = FdUtils.getBrowserWindow();

if (!params.snapshot || params.nosnapshot) {
var snapshot = FdDom.get("snapshot");
FdDom.remove(snapshot);
}
var folder, root = FdStorage.getRoot();
if (!params.folder || params.folder == root.id) folder = root;
else try {
folder = FdStorage.getItem(params.folder);
folder.parent = FdStorage.getItem(folder.folderId);
folder.parent.isBack = true;
}
catch(e) {}

window.addEventListener("resize", onResize, false);
document.addEventListener("contextmenu", onContextMenu, false);
document.addEventListener("mousedown", onMouseDown, true);
document.addEventListener("mouseup", onMouseUp, false);
document.addEventListener("drop", onDragDrop, false);
document.addEventListener("click", onClick, false);
document.addEventListener("DOMMouseScroll", onMouseWheel, false);
document.addEventListener("keyup", onKeyUp, false);

initThumbnails();

setTimeout(function() {
document.title = folder.title; // 2ms
showIcon(); // 2ms
}, 0);

function initThumbnails() {
options = FdPrefs.getObject("options");
sort = FdPrefs.getString("sort");
thumbnails = getThumbnails(); // 6ms : 1ms

// 8ms : 6ms
var data = FdURL.readURL("chrome://fastdial/content/template/fastdial.tpl");
var template = new JsTemplate.Template(data);
var html = template.run({
search: FdPrefs.getObject("search"),
options: options,
thumbnails: thumbnails
});

if (!document.body) document.write(html);
else document.body.innerHTML = html;

onResize(); // 9ms : 9ms
}

function showIcon() {
var icon = FdDom.parse("");
document.documentElement.appendChild(icon);
}

function getThumbnails() {
var thumbs = [];
var items = FdStorage.getItems(folder.id, sort);
perPage = (showBack() ? -1 : 0) + options.width * options.height;
pageCount = Math.ceil(items.length / perPage);

for(var i = 0; i < perPage; i++) {
var properties = items[page * perPage + i];
if (properties) {
var thumb = new FdThumbnail(properties);
if (!thumb.isLoading() &&
!thumb.getImageFile().exists())
wnd.FdSnapshot.create(thumb.properties);
thumbs[i] = thumb;
}
}
if (showBack()) {
var back = new FdThumbnail(folder.parent);
thumbs.unshift(back);
}
return thumbs;
}

function showBack() {
return !options.hideBack && folder.parent;
}

function getThumbIndex(index) {
return !sort && page * perPage + (showBack() ? -1 : 0) + parseInt(index);
}

function onResize() {
var bodyPadding = parseInt(FdDom.css(document.body, "padding-top"));
var grid = FdDom.get("grid");
var search = FdDom.get("search");

var thumbnail = FdDom.get(0);
var thumbnailBorder = parseInt(FdDom.css(thumbnail, "border-top-width"));
var title = FdDom.child(thumbnail, "title");

var width = options.thumbWidth;
var height = FdThumbnail.getHeight(width);

if (!options.fixed) {
width = (window.innerWidth - bodyPadding * 2) / options.width - thumbnailBorder * 2;
height = (window.innerHeight - bodyPadding * 2 - search.offsetHeight) /
options.height - thumbnailBorder - title.offsetHeight;
if (height < FdThumbnail.getHeight(width)) {
width = FdThumbnail.getWidth(height);
}
}
width = Math.max(width, FdThumbnail.MIN_WIDTH);
height = FdThumbnail.getHeight(width) + title.offsetHeight;

FdDom.get("size").innerHTML = ".box {" +
"width: " + width + ";" +
"height: " + height + ";" +
"}";
}

function onContextMenu(e) {
if (FdDom.is(e.target, "search-input")) return;

wnd.document.popupNode = e.target;
var box = FdDom.parent(e.target, "box");
wnd.Fd.showContextMenu(e, box && thumbnails[box.id]);
e.preventDefault();
}

var source;
var previewTimeout;

function onMouseDown(e) {
if (!FdDom.is(e.target, "image")) return;

FdDrag.draggable(e.target);
var box = FdDom.parent(e.target, "box");
source = thumbnails[box.id];

if (e.button == 0 && source.properties.preview) {
previewTimeout = setTimeout(function() {
showPreview(source);
}, 500);
}
}

function onMouseUp(e) {
clearTimeout(previewTimeout);
hidePreview();
FdDrag.enable();
}

function showPreview(thumb) {
if (FdDrag.inProgress()) return;
FdDrag.disable();

var snapshot = thumb.getSnapshotURL();
var image = FdCache.getCachedURL(snapshot, "preview");

var preview = FdDom.parse(
"" +
"" +
"" +
""
);
document.body.appendChild(preview);
}

function hidePreview() {
var preview = FdDom.get("preview");
if (preview) {
FdDom.remove(preview);
}
}

function onDragDrop(e) {
for(var i = 0; i < options.width * options.height; i++) {
if (!isMouseOver(FdDom.get(i), e.pageX, e.pageY)) continue;
var target = thumbnails[i];

if (target) {
if (target.properties.isBack || e.ctrlKey && target.properties.isFolder) {
source.properties.folderId = target.properties.id;
source.properties.index = -1;
delete source.properties.thumbIndex;
source.save();
var targetURL = FdStorage.getFolderURL(target.properties.id);
FdCache.remove(targetURL);
}
else {
[source.properties.index, target.properties.index] =
[target.properties.index, source.properties.index];
[source.properties.thumbIndex, target.properties.thumbIndex] =
sort ? [source.properties.index, target.properties.index]
: [target.properties.thumbIndex, source.properties.thumbIndex];
if (source.properties.index < target.properties.index) {
[source, target] = [target, source];
}
source.save();
target.save();
}
}
else {
source.properties.thumbIndex = getThumbIndex(i);
if (sort) source.properties.index = -1;
source.save();
}
var folderURL = FdStorage.getFolderURL(folder.id);
FdCache.remove(folderURL);
wnd.Fd.updateView();
}
}

function isMouseOver(element, x, y) {
x += document.body.scrollLeft;
y += document.body.scrollTop;

var position = FdDom.position(element);
return x > position.left &&
y > position.top &&
x < position.left + element.offsetWidth &&
y < position.top + element.offsetHeight;
}

function onClick(e) {
if (FdDom.is(e.target, "search-icon")) {
e.preventDefault();
var menupopup = wnd.FdDom.get("fd-search-menu");
var offset = -0.4 * parseFloat(FdDom.css(e.target, "font-size"));
return menupopup.openPopup(e.target, "after_start", 0, offset, false, true);
}

var box = FdDom.parent(e.target, "box");
if (!box || e.button != 0) return;

var thumbnail = thumbnails[box.id];
if (!thumbnail) {
var properties = {
folderId: folder.id,
thumbIndex: getThumbIndex(box.id),
index: -1,
}
var thumbnail = new FdThumbnail(properties);
return thumbnail.openProperties();
}

if (FdDom.is(e.target, "refresh")) {
return thumbnail.refresh();
}
else if (FdDom.is(e.target, "remove")) {
return thumbnail.remove(true);
}
else if (FdDom.is(e.target, "properties")) {
return thumbnail.openProperties();
}
else if (FdDom.is(e.target, "image")) {
window.focus();
e.preventDefault();
FdUtils.openLink(thumbnail.getURL(), options.openIn || e);
}
}

const TIMEOUT_WHEEL = 250;
var wheelTime = 0;

function onMouseWheel(e) {
if (scrollMaxY) return;
var time = new Date().getTime();
if (time - wheelTime > TIMEOUT_WHEEL) {
wheelTime = time;
setPage(page + e.detail / Math.abs(e.detail));
}
}

function onKeyUp(e) {
switch(e.keyCode) {
case e.DOM_VK_PAGE_UP:
if (!scrollMaxY) setPage(page-1);
break;
case e.DOM_VK_PAGE_DOWN:
if (!scrollMaxX) setPage(page+1);
break;
case e.DOM_VK_ESCAPE:
if (FdDom.is(e.target, "search-input")) {
e.target.value = null;
}
break;
case e.DOM_VK_RETURN:
if (!FdDom.is(e.target, "search-input")) break;
/*
var engine = wnd.Fd.getSearchEngine();
var submission = engine.getSubmission(e.target.value, null);
document.location = submission.uri.spec;
*/
break;
}
}

function setPage(aPage) {
if (aPage >= pageCount) aPage = pageCount - 1;
if (aPage < 0) aPage = 0;
if (page != aPage) {
page = aPage;
initThumbnails();
}
}