朝顔日記

Firefox の拡張機能 userChrome.js のスクリプトに Sub-XUL Loader というスクリプトがあります。どういうものかというと、Sub-XUL loader をロードしておくと、プロファイルの chrome ディレクトリ内にある、*.uc.xul というファイルを XUL オーバーレイファイルとして読み込んでくれるというものです。

私の場合、userChrome.js ファイルには、フォーラムの userChrome.js スレ の zeniko 氏の発言にある、Sub-Script Loader のみ書いていたのですが、今回この Sub-XUL loader も追加してみました。（Firefox の拡張機能、userChrome.js の私の使い方 参照のこと）

これでお手軽に XUL ファイルを使えるようになったので、試しにこないだ作った Firefox 拡張機能 ToggleStyle を、userChrome.js で使えるようにしてみました。名付けて、ToggleStyle.uc.xul

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
function setStyleDisabled(disabled, isFromCheckbox){
    getMarkupDocumentViewer().authorStyleDisabled = disabled;
    if(!isFromCheckbox) TS.setCheckState();
}

var TS = {
    toggle : function(){
        var isChecked = document.getElementById("styletoggle").checked;
        setStyleDisabled(isChecked, true);
    },

    setCheckState : function(){
        if(!document.getElementById("styletoggle")) return;
        document.getElementById("styletoggle").checked = !getMarkupDocumentViewer().authorStyleDisabled;
    }
};

var appcontent = document.getElementById("appcontent");
appcontent.addEventListener("select", TS.setCheckState, false);
</script>
<statusbar id="status-bar">
  <statusbarpanel id="StyleToggle-Checkbox">
    <checkbox onclick="TS.toggle();" id="styletoggle" label="CSS" checked="true" tooltiptext="toggle css"/>
  </statusbarpanel>
</statusbar>
</overlay>

拡張のほうとは違って、ツールバーではなくステータスバーにページスタイルをオン･オフするためのスイッチを追加します。で、このままだとチェックボックスなので、例によってアイコン化。userChrome.css もしくは、Stylish で以下のスタイルをあてがいます。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
checkbox[id="styletoggle"] {
  margin:0 !important;
  padding:0 !important;
}

checkbox[id="styletoggle"]:focus > hbox {
	border-style:none !important;
}

#StyleToggle-Checkbox, statusbar[id="StyleToggle-Checkbox"] * {
	margin:0 !important;
	padding:0 !important;
}

checkbox[id="styletoggle"] > image, checkbox[id="styletoggle"] label {
	display:none !important;
}

checkbox[id="styletoggle"] > hbox > image {
	min-width:21px !important;
	height:14px !important;
	border:1px solid #999 !important;
	background: transparent none center center no-repeat !important;
}

checkbox[id="styletoggle"][checked="true"] > hbox>image {
	border:1px inset #ccc !important; 
	background-color:#ffcccc !important;
}

checkbox[id="styletoggle"] > hbox > image          {
  width:21px;
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOBAMAAADd6iHDAAAAA3NCSVQICAjb4U%2FgAAAALVBMVEX%2F%2F%2F8zMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMEkjCrAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIXRFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyA0LjDqJid1AAAAFnRFWHRDcmVhdGlvbiBUaW1lADExLzA4LzA2WNdhkAAAAFhJREFUeJxjYCAMVBgYnBiYHIAszh2PZLsm1PQaMDD4MnT4MDRsZQEKdzAwSF5jiJ0EVNDJoMagcZEhpoCBwU6gs5LhyCPWDQwMbKc3Sp1pyNljQIRlcAAAAFsUG1nwjUQAAAAASUVORK5CYII%3D") !important;
}

まぁ、スタイルはお好みで適当に。

しかし、ここまで何でもありになっていいのでしょうか。:p)