Firefox WXDownloadStatusBarを使いやすくする

2

Firefox Quantum ダウンロードステータスバー代替えのWX Download Status Barのスタイル変更部分の記事です。

筆者は、ダウンロードステータスバー代替を現在別方法で行っているため、これ以降の当記事の更新はないものと思われます。

WX Download Status Bar 1.9.0+対応

このバージョンから、Shadow DOMを使用するように仕様変更したようです。そのため、外部からShadowDOM内の要素にアクセスできなくなり、Stylusでの見た目の変更ができなくなりました。

1.9.0+を使用する

ShadowDOMのShadowRoot要素のみであればアクセス可能なため、1行表示のみ実現できるようです。

WXDownloadStatusBar1.9.0+対応版#DownloadStatusBarContainer {
    white-space: nowrap;
}

1.8.0-を使用する

過去のバージョン（1.8.0-）を使用することでShadowDOMを回避することも可能です。今後の新機能を利用しないのであればこちらのほうが良いでしょう。

以下のページから過去のバージョンを追加可能です。

※拡張機能の管理画面内（オプション画面）の自動更新を規定からオフとすることで自動更新をWX Download Status Barのみオフにできます。
※v1.8.0は、プレビュー画像に問題を抱えているようです
　v1.7.5が無難？

WX Download Status Bar 1.7.1+対応

問題点

  • 黒一色だとファイルとファイルの区切りが目視しづらい
  • ダウンロード中とダウンロード完了の区別がつきにくい
  • 大量にダウンロードすると2行？で表示することがある
  • 左下の「Clear」の文字が2行で表示することがある

改善（Stylusに追加したコード）

WXDownloadStatusBar1.7.1+対応版/* i really want this to be global */

/* Clear */
#DownloadStatusBar .dsb-clear-downloads {
  /* 「Clear」の文字が改行しないようにする */
  min-width: 4em !important;
  padding: 0;
}
#DownloadStatusBar.dsb-theme-dark .dsb-clear-downloads:hover {
  background: #000 !important;    
}
#DownloadStatusBar.dsb-theme-light .dsb-clear-downloads:hover {
  opacity: 0.6 !important;    
}
/* 全体 */
#DownloadStatusBar.dsb-theme-dark {
  /* 背景色を変更(ファイルの区切りを視認しやすくする) */
  background: #444 !important;
}
/* アイテム */
#DownloadStatusBar .dsb-downloads .dsb-item:first-child {
  margin-left: 0;
}
#DownloadStatusBar .dsb-downloads .dsb-item:last-child {
  margin-right: 0;
}
#DownloadStatusBar .dsb-downloads .dsb-item .dsb-filename {
  /* フォントの上下が切れる問題修正 */
  line-height: 1em;
  /* 領域幅を超えた文字を省略 */
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#DownloadStatusBar .dsb-download-info {
  /* 最小領域幅指定(有効桁数の変化で領域幅が変更しないようにする) */
  min-width: 3.5em !important;
  margin-left: 0.25em;
}
#DownloadStatusBar.dsb-theme-dark .dsb-downloads .dsb-item .dsb-progress-bar {
  /* 進行中の色を変更(進行中と完了の色を分離する) */
  background: #223a70 !important;    /* 要調整 */
}
/* ツールチップ */
#DownloadStatusBarTooltip {
  max-width: 38em !important;  /* 長過ぎる表示を抑止 */
  min-width: 24em !important;  /* 右側のitemのtooltipが幅が狭くなる問題の妥協点 */
}
#DownloadStatusBarTooltip input[type="url"] {
  height: 1em;
}
/* コンテキストメニュー */
#DownloadStatusBarContextMenu {
  min-width: 10em;                /* 右端の時に改行しないようにする */
  white-space: nowrap !important; /* 1行表示 */
}

/* 上書きサイト対策 */
#DownloadStatusBar button {
  height: auto !important;
}
#DownloadStatusBar.dsb-theme-dark * {
  color: #eee !important;
}

※ 適応先をすべてとする

修正履歴

変更日変更内容
2018/02/16tooltip（ファイルの情報）が大きすぎたり小さすぎたりする問題を解決
2018/02/16コンテキストメニューが右端で改行する問題を解決
2018/02/23プログレスバー中の表示桁数で幅が変更しないように最小サイズを指定
2018/02/23Webページでの上書き対策を追加
2018/02/23環境依存を軽減するため、単位をpxからemに変更
2018/02/23「Clear」周辺を変更
2018/02/24ファイル名の幅をダウンロード情報の幅を考慮するように変更
2018/02/24ファイル名の全角文字の上下が切れないように修正
2018/05/04userstyles.orgに公開