恢复火狐地址栏图标及 HTTPS 站点标识

11
27
2013

恢复火狐地址栏图标及 HTTPS 站点标识

本文来自依云's Blog，转载请注明。

大约一年前，火狐 14 发布的时候，取消了在地址栏显示网站图标的功能，而且重新设计了 HTTPS 网站的标识。那个白色背景上的绿色标识我很不喜欢，于是通过给 omni.ja 文件打补丁的方法恢复了之前的样式：

HTTP 网站图标：
HTTPS 域名显示：
HTTPS 「经营者」显示：
部分 chrome URL 显示（我自己照着改的）：

可是，火狐 21 对这部分代码进行了重构，我找不到相关部分的代码了。于是，我一直还在使用火狐 20。直到前几天。

实际上，恢复在地址栏显示网站的扩展有不少，但无一例外，它们都只是恢复网站图标的显示。有个插件也恢复了 HTTPS 网站的浅蓝色域名显示，但是没有已认证的「经营者」的绿色显示。而且，它的代码是通过定时器每隔几百毫秒就执行一次，相比事件响应的方法太没效率了。

于是，使用代码片断速记器（默认快捷键Shift+F4），配合 Firebug 查看 chrome://browser/content/browser.xul，根据之前的样式表，我终于得到了以下解决方案（实际上上边的截图是我这个解决方案应用之后的）——

首先，安装 userChromeJS 扩展。这个扩展使得在火狐启动时加载 userChrome.js 文件。

其次，userChrome.js 文件，使地址栏显示网站图标并在正确的时机切换。它位于火狐配置目录下的 chrome 目录下：（注意已有新版）

if(location == "chrome://browser/content/browser.xul"){
  (function(){

  var eTLDService = Components.classes["@mozilla.org/network/effective-tld-service;1"]
                    .getService(Components.interfaces.nsIEffectiveTLDService);

  function updateIcon(event){
    var tab = event.target;
    if(tab != gBrowser.selectedTab){
      return;
    }
    var icon = tab.image || 'chrome://mozapps/skin/places/defaultFavicon.png';
    document.getElementById('page-proxy-favicon').src = icon;
    var identity = document.getElementById('identity-box');
    if('verifiedDomain'.indexOf(identity.className) != -1){
      var identityLabel = document.getElementById('identity-icon-labels');
      identityLabel.collapsed = false;

      var domain = eTLDService.getBaseDomain(tab.linkedBrowser.lastURI);
      document.getElementById('identity-icon-label').value = domain;
    }
  }

  var container = gBrowser.tabContainer;
  container.addEventListener("TabSelect", updateIcon, false);
  container.addEventListener("TabAttrModified", updateIcon, false);

  })();
}

这部分，特别是标签页事件，参考了 MDN 的相关文档。

最后，HTTPS 和 chrome URL 的样式文件，放到同目录下的 userChrome.css 中，有点长：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* 地址栏图标 */
#identity-box {
  background-image: linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%));
  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset;
  -moz-border-end: 1px solid rgba(0,0,0,.1);
  -moz-margin-end: 3px !important;
}

#identity-box:hover:active,
#identity-box[open="true"] {
  background-image: linear-gradient(hsl(0,0%,92%), hsl(0,0%,82%));
  box-shadow: 0 1px 1px hsla(0,0%,0%,.3) inset,
              0 1px 3px hsla(0,0%,0%,.3) inset;
}

/* Text colors for each:
 *
 * rgb(38, 76, 129) hsl(215, 55, 33)
 * rgb(71, 153, 0)  hsl(92, 100, 30)
 * rgb(229, 115, 0) hsl(30, 100, 45)
 */

#identity-box.verifiedDomain {
  background-image: linear-gradient(hsl(215,60%,92%), hsl(215,58%,88%));
  box-shadow: 0 1px 0 hsla(215,54%,33%,.05) inset;
  -moz-border-end-color: hsla(215,54%,33%,.2);
  color: hsl(215,54%,33%);
}

#identity-box.verifiedDomain:hover:active,
#identity-box.verifiedDomain[open="true"] {
  background-image: linear-gradient(hsl(215,80%,80%), hsl(215,67%,65%));
  box-shadow: 0 1px 1px hsla(215,54%,33%,.7) inset,
              0 1px 3px 1px hsla(215,54%,33%,.5) inset;
}

#identity-box.verifiedIdentity {
  background-image: linear-gradient(hsl(91,70%,90%), hsl(93,60%,81%)) !important;
  box-shadow: 0 1px 0 hsla(92,81%,16%,.05) inset !important;
  -moz-border-end-color: hsla(92,81%,16%,.2) !important;
  background-repeat: inherit !important;
  background-color: transparent !important;
}

#identity-box.verifiedIdentity:hover:active,
#identity-box.verifiedIdentity[open="true"] {
  background-image: linear-gradient(hsl(92,65%,70%), hsl(92,40%,48%)) !important;
  box-shadow: 0 1px 1px hsla(92,81%,16%,.6) inset,
              0 1px 3px 1px hsla(92,81%,16%,.5) inset !important;
}

#identity-box.chromeUI {
  background-image: linear-gradient(hsl(29,70%,95%), hsl(31,60%,90%)) !important;
  box-shadow: 0 1px 0 hsla(30,81%,25%,.05) inset !important;
  -moz-border-end-color: hsla(30,81%,25%,.2) !important;
  background-repeat: inherit !important;
  background-color: transparent !important;
}

#identity-box.chromeUI:hover:active,
#identity-box.chromeUI[open="true"] {
  background-image: linear-gradient(hsl(30,65%,85%), hsl(30,65%,70%)) !important;
  box-shadow: 0 1px 1px hsla(30,81%,25%,.6) inset,
              0 1px 3px 1px hsla(30,81%,25%,.5) inset !important;
}

另外，新版火狐又有一点令我不满了：滚动到页面底部和顶部也会使用平滑滚动，不喜欢。还是这个是可选的，设置 general.smoothScroll.other 为 false 就可以了。

2013年11月29日更新：自火狐 23 起，地址栏搜索会使用搜索栏的默认搜索引擎。对于我这种拿地址栏搜网站、搜索栏查字典的用户来说，这很难以忍受。于是找到 keyword.URL Hack! 这个扩展，新建字符串设置keyword.URL为 Google「手气不错」地址https://www.google.com/search?hl=zh-CN&btnI=1&q=，终于又回到从前二者兼俱的时候。

2014年3月25日更新：更新了脚本，在载入过程中不会显示错误的图标了。

Category: 火狐 | Tags: 火狐 userChrome | Read Count: 8974