蛋疼的状态栏问题，能否学习Chrome的那种设计～

能否模拟Chrome那种用户界面体验，页面加载或者鼠标悬停链接时左下角出现悬浮的状态栏？求能实现类似功能的扩展或者猴子脚本，万分感谢。

uc.js



// ==UserScript==
// @name           ChromeStatusbarModoki.uc.js
// @namespace      http://d.hatena.ne.jp/Griever/
// @include        main
// @compatibility  Firefox 4.0b8
// @version        0.0.6
// @note           マウスオーバーで右に行かなくなってたのを修正
// ==/UserScript==
// Firefox 3.6, 4.0b6 は古い Ver. を使ってください
// https://gist.github.com/300255/4144baa9 ... 038822fa12

(function(css) {
if (!$('addon-bar')) return;

if (window.chromeStatusbar) {
css = '';
chromeStatusbar.destory();
} else {

if (!XULBrowserWindow.setOverLink_org) {
XULBrowserWindow.setOverLink_org = XULBrowserWindow.setOverLink;
XULBrowserWindow.setOverLink = function (url, anchorElt) {
window.chromeStatusbar.setOverLink(url);
}
}

XULBrowserWindow._status = '';
XULBrowserWindow.__defineSetter__('status', function(status) {
window.chromeStatusbar.status = status;
window.chromeStatusbar.updateStatusField(true);
return this._status = status;
});
XULBrowserWindow.__defineGetter__('status', function() {
return this._status;
});
}

var ns = window.chromeStatusbar = {
duration: 250,
delay   : 2000,

_timeout: null,
get timeout() ns._timeout,
set timeout(timer) {
if (ns._timeout) clearTimeout(ns._timeout);
return ns._timeout = timer;
},

_resizeTimer: null,
get resizeTimer() ns._resizeTimer,
set resizeTimer(timer) {
if (ns._resizeTimer) clearTimeout(ns._resizeTimer);
return ns._resizeTimer = timer;
},

overLink : "",
status : "",
statusText : "",

setOverLink : function (link) {
this.overLink = link.replace(/[\u200e\u200f\u202a\u202b\u202c\u202d\u202e]/g, encodeURIComponent);
this.updateStatusField();
},

updateStatusField: function(no_hide) {
var text = ns.overLink || ns.status;
ns.no_hide = no_hide;
ns.display.label = text;
ns.statusText = text;
},

init: function() {
if (css)
addStyle(css);

var statusBar = $('status-bar');
if (isElementVisible(gURLBar)) {
var urlbarIcons = $('urlbar-icons');
urlbarIcons.insertBefore(statusBar, urlbarIcons.firstChild);
statusBar.setAttribute('context', '');
}

ns.hbox = document.createElement('hbox');
ns.hbox.id = 'chrome-status';
ns.hbox.setAttribute('onmouseover', 'chromeStatusbar.onMouseover(event);');
ns.hbox.hidden = true;
ns.display = ns.hbox.appendChild(document.createElement('label'));
ns.display.id = 'chrome-status-label';
ns.display.setAttribute('crop', 'center');
ns.display.__defineGetter__('label', function(){
return this.getAttribute('value');
});
ns.display.__defineSetter__('label', function(str){
ns.show(str);
return str;
});
$('content').parentNode.insertBefore(ns.hbox, $('content').nextSibling);

if (!XULBrowserWindow.statusTextField) {
XULBrowserWindow.statusTextField = ns.display;
}

ns.hs = ns.hbox.style;
ns.hs.opacity = 0;
ns.hs.MozTransition = 'opacity ' + ns.duration + 'ms ease-out';
//addEventListener('resize', ns.onResize, false);
addEventListener('unload', ns.uninit, false);
},

uninit: function() {
ns.timeout = null;
ns.resizeTimer = null;
//removeEventListener('resize', ns.onResize, false);
removeEventListener('unload', ns.uninit, false);
},

destory: function() {
ns.uninit();
if (XULBrowserWindow.statusTextField === ns.display)
XULBrowserWindow.statusTextField = null;
ns.hbox.parentNode.removeChild(ns.hbox);
},

onResize: function(event) {
ns.resizeTimer = setTimeout(function(){
ns.resetStyle();
}, 250);
},

onMouseover: function(event) {
ns.display.classList.contains('right')?
ns.display.classList.remove('right'):
ns.display.classList.add('right');
ns.right = !ns.right;
ns.resetStyle();
},

resetStyle: function(){
let contentRect = gBrowser.mPanelContainer.boxObject;
if (true === ns.display.classList.contains('right')) {
let w = Math.min(contentRect.width * 0.3, 400);
ns.hs.maxWidth = w + 'px';
ns.hs.minWidth = w + 'px';
ns.hs.left = contentRect.x + contentRect.width - w + 'px';
} else {
let w = contentRect.width * 0.7;
ns.hs.maxWidth = w + 'px';
ns.hs.minWidth = Math.min(w, 400) + 'px';
ns.hs.left = contentRect.x + 'px';
}
if (false === ns.hbox.hidden)
ns.hs.marginTop = -ns.hbox.boxObject.height + 'px';
},

show: function(text) {
if (!text) {
if (false === ns.hbox.hidden)
ns.hide(ns.no_hide ? 0 : ns.delay);
return;
}

if ('http://' === (text+'').substr(0, 7))
text = (text+'').substr(7);

ns.display.setAttribute('value', text);
ns.timeout = null;
if (true === ns.hbox.hidden) {
ns.hbox.hidden = false;
ns.resetStyle();
}
ns.hs.opacity = 1;
},

hide: function(hide_delay) {
ns.timeout = setTimeout(function(){
ns.hs.opacity = 0;
ns.timeout = setTimeout(function(){
ns.hbox.hidden = true;
ns.display.classList.remove('right');
ns.display.setAttribute('value', ns.statusText = '');
}, ns.duration);
}, hide_delay || 0);
},
};

ns.init();
return;

function log(){ Application.console.log(Array.slice(arguments).join('\n')); }
function $(id) document.getElementById(id);
function addStyle(css) {
var pi = document.createProcessingInstruction(
'xml-stylesheet',
'type="text/css" href="data:text/css;utf-8,' + encodeURIComponent(css) + '"'
);
return document.insertBefore(pi, document.documentElement);
}


})(<![CDATA[
@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul);

#chrome-status {
  position: fixed !important;
}

#chrome-status-label {
  width: 100% !important;
  -moz-box-sizing: border-box !important;
  margin: 0px !important;
  padding: 1px 6px !important;
  border-top: 1px solid #bbd !important;
  border-right: 1px solid #bbd !important;
  border-left: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  -moz-border-radius-topright: 4px !important;

  background-color: #D2E1F6 !important;
  color: #333 !important;
}

#chrome-status-label.right {
  border-top: 1px solid #bbd !important;
  border-left: 1px solid #bbd !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  -moz-border-radius-topright: 0px !important;
  -moz-border-radius-topleft: 4px !important;
}

.urlbar-over-link-layer {
  display: none !important;
}
.urlbar-textbox-container-children {
  opacity: 1 !important;
}
#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon:not(#go-button) {
  visibility: hidden !important;
}

#status-bar {
  min-height: 18px !important;
  margin: 0px !important;
  border: none !important;
  background-color: transparent !important;
}

#firegestures-status {
  margin-bottom: 20px !important;
}

]]>.toString());

试试2楼的脚本

4.0现在就是这样，不过说实话不咋好看～