升級 Firefox 14 後的不慣

有天在網址列打字搜尋,沒出現想要的結果,就點網址前的 小地球 圖示——以前點它,就會把網址文字框「還原」為現在的 URL——結果點了沒反應?

Awesome bar 搜尋

於是陷入看不見 URL 的狀態…… 查查沒有解答,就不知道怎麼辦了。

(如果懶得看完全文,解答是:按 Esc 就好了)

一直忍到上週才死心面對,順便試試 Mozilla 的 Add-on Builder,結果完成一個小元件 Reset URL by Globe(未上 AMO,但 Builder 頁面即可下載 .xpi)。

Add-on Builder 初試樂趣

動手時間變很短,反而都在讀文件、想像、解謎; 寫寫直接在瀏覽器上測試,不用存檔也不用重開,感覺創造過程沒什麼干擾。

不過 Add-on SDK 已支援的東西還是跟傳統 XUL overlay 元件有點距離,寫複雜點的功能大概就沒這麼爽了。


準備開始,先了解問題

第一想知道 Firefox 為什麼改變。 很快查到 Site identity UI updates | Mozilla UX,原來 Firefox 14 把網址列的 favicon 改成一顆 site identity 按鈕——就是憑證合法時顯示綠色掛鎖,沒憑證時一律顯示小地球(其實我覺得比較像鳥頭)的按鈕—— 免得使用者看到奇怪的 favicon 誤以為是安全/不安全的網站。

要做 add-on? 初步想法

至於為什麼「點擊時復原」消失就沒查到了,說不定只是漏掉,回報一下就會加回去了;
但因為是玩 Add-on Builder 的機會,就沒多想,草草動手了。

猜測復原網址的實作應該還在,只是點地球的時候少了事件觸發而已。 所以只要在 click 事件加幾行 code 就行了吧。

先看 DOM 結構

跟改網頁一樣,想調整某個元件,總要先了解它的構造。 這時方便的工具是 DOM Inspector,只要先選 File → Inspect Chrome Document → 隨便選一個文件,再點工具列上的 Inspect 按鈕,就會開啟類似 Firebug 檢測器的功能,在瀏覽器視窗點想觀察的部份,節點就會在 DOM Inspector 中展開了。

File → Inspect Chrome Document → 隨便選一個文件
實際點選小地球,展開的是一個 xul:hbox 元素。
點到的元素(xul:hbox)在 DOM Inspector 中展開了

讀原始碼,看行為實作

再來就直接爬 code,不必把整個原始碼抓下來,利用 MXR (Mozilla Cross-Reference) 網站就行了。

搜尋過程省略,最後找到幾處:

  • browser.xul#550textbox#urlbar 就是網址列所在,上面有個 ontextreverted 事件,看來就是「復原」功能。
  • urlbarBindings.xml#226 有前述事件 handler handleRevert 的實作。
    裡面的註解 //(前略)was scrolling when they hit escape 也透露一個我不知道的用法 —— 想復原 Awesome Bar 的輸入,只要按 Esc 就好了, 早知道這招,也許就不必寫這個 add-on 了……

開始寫啦……

第一次玩,亂寫一通,後來才發現驚人事實—— revision 是公開的啊! 每次亂存檔都會被別人翻到,真是一件很糗的事啊。

總之照著 SDK 文件的 guide 就能寫出能動的元件了。 具體也就是找到小地球,幫他綁上 click 事件,請他被按的時候 gURLBar.handleRevert 而已。

我主要碰到的問題是:不知道如何存取 XPCOM 的 nsIDOMWindow(好讓我直接取用 window.gURLBar)。現階段 sdk/windows 拿不到它,只好用 unstable 的 sdk/window/utils,兩個混在一起用,最後成果也實在不太靠譜。


記憶體用量 好像有點多?

因為文章寫得有點久,所以這元件也用了一個禮拜了。
about:addons-memory 看來,這支小小 add-on 經常性地佔用不少記憶體,有空要再檢查一下。

記憶體用量 5.14 MB