lapclomeのタブの高さとFirefoxのSVGサポート
lapclomeはapclomeのWindows向け*1微調整版と言う位置づけでオリジナルから極力変更を加えないつもりだが、タブの高さが狭すぎて使いにくい*2と言う方が結構いらっしゃるので内部に8px幅を広くしたタブの背景画像とそれを適用するサブスキンを同胞している。
chrome://browser/skin/subskins/widetab.css
.tabbrowser-tab { background: url("chrome://browser/skin/subskins/tab25.png") repeat-x 0 1px #2c 2c2c !important; } .tabbrowser-tab[selected="true"] { background-image: url("chrome://browser/skin/subskins/tab_sel25.png") !important; } .tab-image-left, .tab-image-middle, .tab-image-right { height: 25px !important; }
サブスキンでは設定を反映させるため「!important」を使わざるを得ないのだが*3、そうするとPageStyle2Tabが働かないという報告を頂いた。
上記のwidetab.cssの後半だけ書けば取り合えずタブは広くなるが16pxのPNGを24pxに引き伸ばすため見た目が悪くなる。24pxの画像（tab25.png, tab25_sel25.png）を両方で使うのはオリジナルを尊重するスタンスからやりたくない。そこでsvg画像を使用してみようと思い立った。
tab.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" width="1" height="16"> <defs> <linearGradient id="a2" x1="0" y1="1" x2="0" y2="8" gradientUnits="userSpaceOnUse"> <stop style="stop-color:#dcdcdc;stop-opacity:0.31;" offset="0"/> <stop style="stop-color:#808080;stop-opacity:0.31;" offset="1"/> </linearGradient> <linearGradient id="a3" x1="0" y1="9" x2="0" y2="14" gradientUnits="userSpaceOnUse"> <stop style="stop-color:#363636;stop-opacity:0.31;" offset="0"/> <stop style="stop-color:#4e4e4e;stop-opacity:0.31;" offset="1"/> </linearGradient> </defs> <rect style="fill:#f0f0f0;fill-opacity:0.455;" width="1" height="1" x="0" y="0" /> <rect style="fill:url(#a2);fill-opacity:1" width="1" height="8" x="0" y="1" /> <rect style="fill:url(#a3);fill-opacity:1" width="1" height="6" x="0" y="9" /> <rect style="fill:#7d7d7d;fill-opacity:0.36;" width="1" height="1" x="0" y="15" /> </svg>
tab_sel.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" width="1" height="16"> <defs> <linearGradient id="a2" x1="0" y1="1" x2="0" y2="8" gradientUnits="userSpaceOnUse"> <stop style="stop-color:#efefef;stop-opacity:0.48;" offset="0"/> <stop style="stop-color:#c1c1c1;stop-opacity:0.48;" offset="1"/> </linearGradient> <linearGradient id="a3" x1="0" y1="9" x2="0" y2="14" gradientUnits="userSpaceOnUse"> <stop style="stop-color:#9e9e9e;stop-opacity:0.48;" offset="0"/> <stop style="stop-color:#acacac;stop-opacity:0.48;" offset="1"/> </linearGradient> </defs> <rect style="fill:#f6f6f6;fill-opacity:0.60;" width="1" height="1" x="0" y="0" /> <rect style="fill:url(#a2);fill-opacity:1" width="1" height="8" x="0" y="1" /> <rect style="fill:url(#a3);fill-opacity:1" width="1" height="6" x="0" y="9" /> <rect style="fill:#bfbfbf;fill-opacity:0.52;" width="1" height="1" x="0" y="15" /> </svg>
しかしこれらをbackground-imageに指定しても実際にタブの画像に反映されない。
調べてみるとsvg画像をCSSに指定できないというバグがたっている。
残念だが今のところは諦めるしかなさそうだ。
