from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

xulとxbl,anonimous elements

firefox addonには3つの形式がある。

webextension,addon-sdk,XPCOM形式?(名前わからん)←レガシーアドオンというらしい。

このうちTST(tree-style-tabのabberation)はXPCOM形式っぽい。

web-extとaddon-sdkは多少触ったことがあるんだけどxpcom形式は触ったことがなかった。

xulやxblをバンバン触る感じだった。

完全に手探りで行ったのでかなり時間かかった。(xul,xbl,chromeはほぼ知らない状態だった)

debugについて

これもかなり時間がかかった。最初そもそもデバッグの仕方すらわかんなくて大変だった。

というかブラウザツールボックスのこと完全に忘れててつらみだったorz...

なのでググりまくってwindow.dump()というものを見つけた。

developer.mozilla.org

window.dump() was also available on XPCOM.

console.logはobjectを表示できるからいいけどこいつはdebug console(cmd a.k.a System console a.k.a nativeconsole)に表示するのでfor inでまわしてやらないといけない。

ていうかコンソール多すぎなんだよなあ。この辺のまとめページほしい。

developer.mozilla.org

Firefox同梱のWeb開発ツール

xulデバッグで出た文字列はエラーコンソールとブラコンに出力される

error console

vimpで出るやつ。これエラーコンソールっていうのか。

consoleにはnative console,error console,web console,browser consoleがあるっぽい。

探せばもっとありそう?about:debugging#addonsとか。about:系でありそう。

browser tool box

あるブラウザ起動直後に表示されるコードをデバッグしたかったのでbreak pointをしかけて再起動させたら引っかからなかった。

まあそうだよな。。。

じゃあみんなどうやってxulデバッグしてんだと思って聞いたところなんとバグだったらしい。

https://groups.google.com/forum/?hl=ja#!topic/mozilla-translations-ja/udBDt5dPoQE

mozilla.dev.platform

mozilla.dev.platform、割と初期から(たぶんmozillaに興味持ち始めたころから)入ってたんだけど今まで投稿したことなかったので投稿できてうれしい。

1245819 – Breakpoint doesn't work in Browser Toolbox

↑踏んだバグ。

priorityについて

なんか上でp1とかp2とかあって気になった。priorityのことらしい。p1が一番高くてp4が低い。

割と困ってる人多そうだしp1でいいんじゃないのこれって思うんだけど。

まだパッチが提出されてないしワンチャンあるかもね。(暇になったら挑戦してみたい所存)


xpcom形式addon

xul

ズール、闇。

XULは見た目の変更だけならCSSでだいたいのことはできる

らしい。

  • cu import

たまに見る。firefoxのドキュメントとか見てるとこれを使ってなんかするチュートリアルとかよく出てくるから。

しかし動作がわかってないのでこの機会にわかり奈緒

developer.mozilla.org

Cu importの正式名はcompornents.utils.import。

compornents.utils.importは他のjsスコープのコード(javascript module)を自分のjsスコープに持ってくる。jsスコープってのがちょっと怪しいけど。

developer.mozilla.org

javascript code module はgecko 1.9から搭載された機能。

javascript code moduleはEXPORTED_SYMBOLSという特別なarrayを宣言する。

javascript moduleをcomponents.utils.import()を使ってインポートすると、EXPORTED_SYMBOLSの中と同じ名前のオブジェクトだけ(objectに限らずfunction objectでもなんでも)が使用可能になる。

mymodules.jsm

var EXPORTED_SYMBOLS=["a","b"];

function a(){
console.log("hello");
}

var b={
xul:"闇"
}

var c="これはEXPORTED_SYMBOLSにないので使用不可能";

useing.js(chrome privilege)

compornents.utils.import("resource://myapp/mymodules.jsm");

alert(b.xul);

Cu importの非常に重要な点は同じjsmをインポートした複数のスコープで動作が共有されるということです。

うわあ・・・debug大変そうだ・・・

註: モジュールをインポートしたスコープごとに、そのモジュールでエクスポートされたシンボルの by-value コピーを受け取ります。シンボルの値の変更は他のスコープに伝搬することはありません。

・・・???

まあそういうこともありますよってことだけ覚えとけばいいか。

js moduleを共有しないimport method もある。

js moduleの読み込みにはresource schemechrome scheme、data schemeを使う。

developer.mozilla.org

developer.mozilla.org

相変わらずよくわからんかった。まあjsm読み込むときはresource scheme使っとけばいいか。

firefoxが持っているリソースを使うときにはgreキーワードを使う。

ちなみにgregecko runtime environmentのことみたいです。

anonymous element(xul)

匿名要素。この件については全く分からなかったので早めに相談してよかった。

@piro_orさんありがとうございます。

developer.mozilla.org

getAnonymousElementByAttributeという特殊なgetXXXXByXXXXをつかるらしい。

developer.mozilla.org

XBLで作成されたコンテンツをxulにinsertするとこうなるのかな?

XPCOM

comの進化っぽい?2015/12あたりにcomの勉強会やってたし行っておけばよかったなあ。。。

XBL

闇。cssから読み込む。拡張子xml

参照する側はcss-moz-binding:url()文を使う。

JSも書ける。

ここがわかりやすかった↓

Firefox の中身を少し覗いてみる | ヨモツネット

(。。。このページ前にも見た気がするな)

この XBL ととてもよく似た実装が IE にもあります。IE では HTC を使うことで、CSS をつかって、要素を動的に操作することができます。HTC はかなり昔のものなので、XML に似ている書き方をします。

!?

css

初めて知った。いい経験になった。

  • system color(css)

これも初めて知った。

プラットフォームを変えれば色も変わるのかな?試してみたい。

system colorはcss level2で追加されている。んでlevel3で非推奨化。

developer.mozilla.org

  • ICCプロファイル

このへんsystem colorと関係ありそう。

ICCプロファイル - Wikipedia

windowsにはWCS(windows color system)プロファイルとICCプロファイルの2つがある

拡張子はicm(international color model)とcdmp(color device model profile)

windows.microsoft.com

つまり・・・どういうことだってばよ・・・

color profileは色空間ごとに存在していてそれぞれの色空間から変換できるのがプロファイル接続空間かな?

・・・なんか言葉がかっこいい

  • currentcolor

inheritと同じ感じかな?

chrome特権

闇。トラウマ。よくわからん。

今後の予定

レガシーextensionあたりの記事は昔からあるので大抵翻訳されてるけどたぶん古いままなので差分を更新していきたい。

あとはxul系の翻訳。anonymous elementsの翻訳。

tree style tabは

Add skin with styling that matches FirefoxDeveloperEdition · Issue #788 · piroor/treestyletab · GitHub

をやってる。もうすぐで完成できそうなので頑張りたい。

これが終わったらtree style tabのgithubリポジトリwikiを書こうかと思ってる。

あとはこの辺。

[meta] strict mode compatibility · Issue #482 · piroor/treestyletab · GitHub

これやりたいなと思って再現してみたらそもそもバグが発動しなかった。

conflict with vimperator tabnumbers · Issue #682 · piroor/treestyletab · GitHub

compornents.utilsで読み込むmoduleについて勉強したい。xulやxblの要素はいいや。