升級 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#550 的 textbox#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