opera:configに解説文を付けるOConfig-ja.cssを自動生成してくれるブックマークレットを作った

Opera

以下のブックマークレットは使えません。Wowo さんがメンテしてくれているものを使ってください。


Opera 10 alpha1 が出て、仕事の早いあまたさんと wowo さんはすぐに Windows 版と Unix 版の修正をしてくれたので、僕も Mac 版の修正をしておいた。

この CSS、作るのがものすごく大変なんですよ。あまたさんにはとっても感謝しています。

あまりに大変なので、「opera:config設定項目一覧」のページから自動で生成してくれるブックマークレットを作った。

長いのでソースは一番下に置く。長いと言っても CSS のテキストが長いだけで処理は短い。

↓こんな感じになる。


使い方

  1. opera-config設定項目一覧 - Opera Wiki に行く。
  2. 下のコードをアドレス欄にコピペしてエンターを押す。
  3. プロンプトが出るので、windows, unix, mac のどれかをタイプ。
  4. ページの一番下に CSS テキストが表示されるので、どっかのファイルにコピペ。
  5. あまたさんの解説通りにインストールする。

(Opera は pre 要素内で4連続クリックすると全選択してくれるのでコピペがラク)

コードの一番上で、debug = false となっているところを true にすると、CSS を適用したときに違いが一目でわかるようになって便利。(上のスクリーンショット)

同じく newTab = true にすると、ページ内に追加するのではなくて、新しいタブに CSS を表示する。僕はこっちのほうが好きなのだけど、いかんせん処理が重いのでデフォルトではオフにしてある。

あれこれ

opera:config設定項目一覧ページは wiki なので、適当に編集して書式が変わってしまったりすると使えなくなってしまうかもしれない。そこらへんは、あとで編集規約としてまとめておくことにしよう。

ちなみに、opera:config設定項目一覧は既に Opera 10 alpha1 用に更新されてしまっているので、このブックマークレットを使っても Opera 9.62 用の CSS は生成されない。というわけで各バージョンのファイルは誰かが保存して管理しておく必要があるかも。(無責任なこと言ってますけど)

Opera 10 alpha1 から CSS の content プロパティで \a と Unicode を書いて改行させることが出来なくなっている。インライン要素だから?と思って display:block を追加したら、最初の1回だけは改行されるようになった。この CSS にとってはちょっと致命的。対策募集中。

white-space:pre-wrap; で改行できるらしい。修正しておいた。


ブックマークレット

javascript:(function(){
var debug = false;
var newTab = false;

var platform = prompt('type windows, unix or mac');
var delimiter = (platform.toLowerCase()=='windows')? '\r\n' : '\n';
var template = 'th>label[for=\'f#NUM#\']::after{white-space:pre-wrap;color:red;content:\'#PROP#\\a #DESC#\';}';
var list = [];
var color2platform = {
    'green' : 'windows',
    'blue'  : 'unix',
    'red'   : 'mac',
    'gray'  : 'depricated',
    'brown': 'multiplatform'
};

var baseStyle = [
 '@charset "utf-8";'
,'/* Stylesheet for the Opera config document */'
,'/* Copyright 2008 Opera Software */'
,'@media tv {html {font-size: 150%;}}'
,'@media screen, projection, tv, speech {'
,'html {'
,'	font-family: sans-serif;'
,'	font-size: 100%;'
,'	color: hsl(0,0%,22%);'
,'	background-color: hsl(0,0%,93%);'
,'	margin: 0 auto 10px;'
,'	border-width: 0 1px;'
,'	border-color: hsl(0,0%,57%);'
,'	border-style: solid;'
,'	max-width: 800px;'
,'	voice-family: female;'
,'}'
,'body {'
,'	color: inherit;'
,'	background-color: hsl(0,0%,96%);'
,'	margin: 0;'
,'}'
,'fieldset table, fieldset div, #showall, #searchbox, fieldset, fieldset.dirty tr, #nohits {display: none;}'
,'fieldset.expanded, fieldset.notexpanded, fieldset.expanded div, div.hasscript #showall, div.hasscript #searchbox, #nohits.nonefound {display: block;}'
,'fieldset.expanded table {display: table;}'
,'fieldset.dirty tr.wasmatch {display: table-row;}'
,'fieldset.dirty table::before, fieldset.dirty table::after {'
,'	content: "... ...";'
,'	text-align: center;'
,'	display: block;'
,'	speak: none;'
,'}'
,'h1 {'
,'	font-family: sans-serif;'
,'	font-size: 110%;'
,'	font-weight: normal;'
,'	text-align: right;'
,'	letter-spacing: -1px;'
,'	color: hsl(0,0%,29%);'
,'	background-image: url(images/top.png);'
,'	background-repeat: repeat-x;'
,'	padding: 20px 10px 15px;'
,'	margin: 0;'
,'}'
,'html[dir="rtl"] h1 {'
,'	text-align: left;'
,'	letter-spacing: normal;'
,'}'
,'noscript+div, h1+div, noscript p, #nohits {'
,'	font-size: 75%;'
,'	color: hsl(0,0%,29%);'
,'	background-color: hsl(0,0%,89%);'
,'	background-image: url(images/bar.png);'
,'	background-repeat: repeat-x;'
,'	background-position: 0px 0px;'
,'	padding: 5px 7px;'
,'	border-top: 1px solid hsl(0,0%,57%);'
,'	border-bottom: 1px solid hsl(0,0%,57%);'
,'}'
,'#help {'
,'	float: right;'
,'	margin: 0px 20px;'
,'}'
,'html[dir="rtl"] #help {float: left;}'
,'a {'
,'	color: hsl(0,0%,29%);'
,'	background-color: transparent;'
,'}'
,'#showall {'
,'	margin: 0.2em 1em 0;'
,'	float: left;'
,'}'
,'html[dir="rtl"] #showall {float: right;}'
,'#searchbox {margin: 0px;}'
,'#searchbox label {display: inline-block;}'
,'fieldset {'
,'	font-size: 75%;'
,'	line-height: 130%;'
,'	padding: 0;'
,'	margin: 20px;'
,'	border: none;'
,'}'
,'fieldset.expanded {'
,'	background-color: hsl(0,0%,99%);'
,'	border-style: solid;'
,'	border-width: 1px;'
,'	border-color: hsl(0,0%,85%) hsl(0,0%,85%) hsl(0,0%,74%);'
,'}'
,'legend {'
,'	padding: 0 5px;'
,'	border-left: 10px solid hsl(0,0%,85%);'
,'	cursor: pointer;'
,'}'
,'legend:hover {text-decoration: underline;}'
,'fieldset.expanded legend {'
,'	font-size: 150%;'
,'	font-weight: bold;'
,'	letter-spacing: -1px;'
,'	background: transparent;'
,'	margin-left: 12px;'
,'	border-right: 10px solid hsl(0,0%,85%);'
,'	display: block;'
,'}'
,'html[dir="rtl"] fieldset.expanded legend {'
,'	letter-spacing: normal;'
,'	margin-right: 12px;'
,'}'
,'table {'
,'	font-size: 100%;'
,'	border-spacing: 0;'
,'	border-collapse: collapse;'
,'	width: 100%;'
,'}'
,'th, td {'
,'	vertical-align: top;'
,'	padding: 2px 3px;'
,'	border-width: 1px 0;'
,'	border-style: solid;'
,'	border-color: hsl(0,0%,74%) hsl(0,0%,99%) hsl(0,0%,99%);'
,'}'
,'tr:first-child>* {border-top-color: hsl(0,0%,99%);}'
,'th {'
,'	font-weight: normal;'
,'	text-align: left;'
,'	padding: 2px 2px 2px 5px;'
,'	width: 340px;'
,'}'
,'html[dir="rtl"] th {text-align: right;}'
,'input[type] {'
,'	font-family: monospace;'
,'	font-size: 100%;'
,'	color: WindowText;'
,'	box-sizing: content-box;'
,'}'
,'[type="text"], [type="number"], [type="file"] {'
,'	margin-right: 13px;'
,'	width: 245px;'
,'}'
,'input[type="file"] {font-family: inherit;}'
,'html[dir="rtl"] [type="text"], html[dir="rtl"] [type="number"], html[dir="rtl"] [type="file"] {'
,'	margin-left: 15px;'
,'	margin-right: 0;'
,'}'
,'html[dir="rtl"] [type="file"] {margin-left: 13px;}'
,'#searchbox [type="text"] {color: GrayText;}'
,'#searchbox [type="text"]:focus {color: WindowText;}'
,'fieldset [type="checkbox"] {'
,'	vertical-align: top;'
,'	margin-right: 248px;'
,'	position: relative;'
,'	top: 1px;'
,'	left: -3px;'
,'}'
,'html[dir="rtl"] [type="checkbox"] {'
,'	margin-left: 248px;'
,'	margin-right: 0;'
,'	left: auto;'
,'	right: -3px;'
,'}'
,'[type="button"] {'
,'	font-size: 1em;'
,'	margin: 0 2px 0 15px;'
,'}'
,'html[dir="rtl"] [type="button"] {margin: 0 15px 0 2px;}'
,'td a {'
,'	text-decoration: none;'
,'	color: hsl(0,0%,57%);'
,'}'
,'.match {background-color: hsl(0,0%,92%);}'
,'.match label {font-weight: bold;}'
,'fieldset div {'
,'	background-color: hsl(0,0%,93%);'
,'	background-image: url(images/bar.png);'
,'	background-repeat: repeat-x;'
,'	background-position: 0px -5px;'
,'	padding: 3px 7px;'
,'	border-top: 1px solid hsl(0,0%,74%);'
,'}'
,'fieldset div button {'
,'	min-width: 50px;'
,'	margin: 0 7px;'
,'}'
,'body::after {'
,'	content: "";'
,'	background-color: hsl(0,0%,98%);'
,'	background-image: url(images/center.png);'
,'	background-repeat: repeat-x;'
,'	background-position: left bottom;'
,'	border-top: 1px solid hsl(0,0%,57%);'
,'	height: 20px;'
,'	width: 100%;'
,'	display: block;'
,'	speak: none;'
,'}}'
,'@media screen and (max-width: 740px), projection and (max-width: 740px), tv and (max-width: 740px) {'
,'	html {'
,'		margin: 0 auto;'
,'		border-width: 0 1px;'
,'	}'
,'	th, td {width: 50%;}'
,'	th::before {display: none}'
,'	fieldset {'
,'		font-size: 75%;'
,'		margin: 20px 10px;'
,'	}'
,'	fieldset input[type] {'
,'		width: auto;'
,'		margin: 0;'
,'		display: block;'
,'	}'
,'	fieldset [type="button"] {margin: 4px 2px 2px;}'
,'	fieldset input[type="text"], fieldset input[type="number"], fieldset input[type="file"] {'
,'		margin: 2px;'
,'		width: 95% !important;'
,'		display: block;'
,'	}'
,'	fieldset div {'
,'		background-position: 0px -4px;'
,'		padding: 3px 7px;'
,'	}'
,'}'
,'@media screen and (max-width: 400px), projection and (max-width: 400px), tv and (max-width: 400px) {'
,'	table, tbody, tr, th, td {display: block;}'
,'	td, th {width: auto;}'
,'	td {border-top-width: 0;}'
,'	noscript+div, h1+div, noscript p, #nohits {'
,'		padding: 1px 4px 2px;'
,'		position: relative;'
,'	}'
,'	fieldset input {'
,'		margin: 0 !important;'
,'		display: block;'
,'	}'
,'	fieldset input[type="checkbox"], fieldset input[type="checkbox"]+input[type="button"] {display: inline-block;}'
,'	html[dir="rtl"] #help, #help, html[dir="rtl"] #showall, #showall {'
,'		margin: 0 0 2px;'
,'		float: none;'
,'	}'
,'	#showall {'
,'		position: absolute;'
,'		top: 1px;'
,'		right: 5px;'
,'	}'
,'	html[dir="rtl"] #showall {'
,'		left: 5px;'
,'		right: auto;'
,'	}'
,'	#searchbox input {'
,'		margin: auto;'
,'		width: 99%;'
,'	}'
,'}'
,'@media screen and (max-width: 280px), projection and (max-width: 280px), tv and (max-width: 280px) {'
,'	h1 {'
,'		text-align: center;'
,'		padding: 10px 5px;'
,'	}'
,'	fieldset {font-size: 70%;}'
,'	fieldset div button {min-width: 0;}'
,'	fieldset.expanded legend {font-size: 120%;}'
,'}'
,'@media screen and (min-width: 1281px), projection and (min-width: 1281px) {'
,'	html {max-width: 1000px;}'
,'	th {width: 360px;}'
,'	[type="text"], [type="number"], fieldset [type="file"] {width: 420px;}'
,'	fieldset [type="checkbox"] {margin-right: 423px;}'
,'	html[dir="rtl"] [type="checkbox"] {margin-left: 422px;}'
,'}'
,'@media print {'
,'	* {border: none;}'
,'	h1 {'
,'		font-size: 16pt;'
,'		text-align:center;'
,'	}'
,'	h2 {font-size: 13pt;}'
,'	table, h2+p {margin-bottom: 1cm;}'
,'	th {'
,'		font-weight: normal;'
,'		text-align: left;'
,'	}'
,'	html[dir="rtl"] th {text-align: right;}'
,'	legend {'
,'		font-size: 13pt;'
,'		font-weight: bold;'
,'		page-break-after: avoid;'
,'	}'
,'	noscript+div, h1+div, noscript p, #nohits, input, button, a {display: none;}'
,'}'
,''
];

var xpath=document.evaluate('//table[@class="datatable"]//tr',document,null,5,null);
var counter=0;
while(tr=xpath.iterateNext()){
    var tds = tr.getElementsByTagName('td');
    if(!tds.length)continue;
    var dependency = tr.innerHTML.match(/style="[^"]*color:(\w+)[^"]*"/i);
    if(!dependency || color2platform[dependency[1]]==platform.toLowerCase()
    || (color2platform[dependency[1]]=='multiplatform' 
    && tr.innerText.toLowerCase().indexOf(platform)>=0)){
        var description = tds[1].innerHTML.replace(/\\/g,'\\\\').replace(/<BR>/g,'\\a  ').replace(/(<.*?>|\r|\n)/g,'');
        if(debug){
            var property = tds[0].innerText.replace(/(\r|\n)/g,''); 
            list.push(template.replace('#NUM#',counter++).replace('#DESC#',description).replace('#PROP#','\\a '+property));
        }else{
            list.push(template.replace('#NUM#',counter++).replace('#DESC#',description).replace('#PROP#',''));
        }
    }
}

if(newTab){
    var data = encodeURIComponent(baseStyle.concat(list).join(delimiter));
    var win = window.open('data:text/css;charset=utf-8,'+data);
} else {
    var pre = document.createElement('pre');
    pre.innerHTML = baseStyle.concat(list).join(delimiter);
    pre.style = 'height:40em;width:60em;text-align:left;overflow:scroll;';
    document.body.appendChild(pre);
}
})();