ツールバーなどを一時的に隠す

ネットブックなど解像度が比較的狭い環境では、縦方向が窮屈だったりします。F11キーで全画面表示にすると広くなりますが、ウインドウ表示でもなるべく広く使いたいですよね。

表示メニューからツールバーやステータスバーなどを表示/非表示できますが、1つ1つクリックするのは面倒。そこで、私は下記のスクリプトを実行することで、ツールバーやステータスバーなどの表示切替を一度に行い、必要なときだけWebページを縦方向に広く表示しています。

// ツールバーなどの表示/非表示を切り替える
// （表示を切り替えたくない部分はコメントアウトしておく）

/*
表示を切り替えたいツールバーのIDを以下に追加。
（「ツールバーのカスタマイズ」から自分で追加した場合は、
　"__customToolbar_★"の★の部分をツールバー名に置き換えて追加。）
*/
var id = [
  // メニューバー
  "toolbar-menubar",
  // ナビゲーションツールバー
  "nav-bar",
  // ブックマークツールバー
  "PersonalToolbar",
  // Googleツールバー
  "gtbToolbar",
  // Yahoo!ツールバー
  "yahoo-toolbar",
];
for (var i=0, bar; i<id.length; i++) {
  if (id[i]) bar = document.getElementById(id[i]);
  if (bar) bar.collapsed = !bar.collapsed;
}

/*
ステータスバー
*/
document.getElementById("cmd_toggleTaskbar").doCommand();

/*
タイトルバー＆枠線
*/
var main = document.getElementById("main-window");
if (main.getAttribute("hidechrome") == "true") {
  main.setAttribute("hidechrome","false");
  window.resizeBy(0, 1);
} else {
  main.setAttribute("hidechrome","true");
  window.resizeBy(0, -1);
}

このスクリプトをCustom Buttons・keyconfig・FireGesturesなどの拡張機能でカンタンに実行できます。Custom Buttonsではボタン作成時の「Code」タブに、keyconfigでは設定の「新しいキーを追加」ボタンから、FireGesturesでは設定の「スクリプトを追加」ボタンからスクリプトを貼り付けるとOK。

なお、（上記のスクリプトの代わりに）以前紹介したHide CaptionなどでWindowsのタイトルバーを隠すとさらに広くできますよ。

追記：2009-07-04

タイトルバーとウインドウの枠線の表示を切り替えるスクリプトも上記に追加しておきました。枠線がなくなって見づらい場合、以下のようなCSSをStylishなどに登録しておくと枠線を表示させておくことができます。

@-moz-document url(chrome://browser/content/browser.xul) {
  window[hidechrome="true"] {
    border: 4px solid;
    -moz-border-top-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-right-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-bottom-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
    -moz-border-left-colors: InactiveCaptionText InactiveBorder InactiveCaption InactiveCaption;
  }
  window[hidechrome="true"][active] {
    -moz-border-top-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-right-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-bottom-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
    -moz-border-left-colors: CaptionText ActiveBorder ActiveCaption ActiveCaption;
  }
}

追記2：2015-06-10

質問を頂いたので、ツールバーなどのIDの調べ方を書いておきます。

私の場合、調べるときは拡張機能のDOM InspectorとInspect Contextを使いますのでインストールしておいてください。DOM Inspectorだけでも調べられますが、Inspect Contextがあると簡単に調べられます。

1. ツールバーなどのIDを調べたい部分を右クリックしてコンテキストメニューの「Inspect」をクリック。
2. Dom Inspectorのウィンドウが表示され、左ペインのツリーで右クリックした部分の項目が選択されているので、そこから上に遡ってIDが記載されている行をクリックする。
3. Firefoxのウィンドウで目的の部分が赤枠で点滅するのを確認する。
4. DOM Inspectorの右ペインのIDの項目をダブルクリックして、IDをコピーする。

ツールバーであれば、ツリー上の「toolbar」の行をクリックするとそのツールバー全体が赤枠で点滅するはずです。もし赤枠で点滅しない場合、DOM InspectorのメニューのView→「Blink Selected Element」をONにしてください。

もし右クリックしてコンテキストメニューが表示されない部分の場合はInspect Contextの代わりにInspectorWidgetを使ってみてください。