2018-06-30T14:12:40Z

Firefox WXDownloadStatusBarを使いやすくする

前の記事「Firefox Quantum ダウンロードステータスバー代替」でダウンロードステータスバーを代替しました。ですが、「WX Download Status Bar」のバージョンアップで、CSS周り大きく変化したため、もう一度CSSの書き直しました。

WX Download Status Bar 1.7.1+対応

問題点

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

改善(Styliusに追加したコード)


userstyles.org にコードを投稿しました。
独自修正しないのであれば、下記サイトからStylish, Styliusへインストールが可能です。

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

 コメント: 2

匿名 さんのコメント... 

こんにちは
便利に使わせていただいています。
画面下のUrlのポップアップと重なるのを防ぐためにダウンロードバーを画面上部に移動させたいのですがStylishでできますでしょうか?

toshi さんのコメント... 

可能です。以下のコードをStylishに追加することでダウンロードバーを画面上部に移動することができます。ただし、固定ヘッダがページ内に設定されている場合、ダウンロードバーがヘッダと被ってしまいます。(例:Google検索、ニコニコ動画)

/* WXDownloadStatusBarを画面上部へ移動する */
/* 既知の問題:固定ヘッダがある場合、表示が被る */
body {
margin-top: 30px;
margin-bottom: 0 !important;
}
#DownloadStatusBar {
position: fixed;
top: 0;
height: 30px; /* 1行表示以外は非対応 */
}



質問とは異なりますが、以下のコードをuserChrome.cssに追加してURLのポプアップを画面上部へ移動する方法を検討してみてはいかがでしょうか。

#statuspanel[type="overLink"],
statuspanel[type="overLink"] {
top:132px; /* 要微調整 */
}

 コメントを書く