2018-06-30T14:12:56Z

Firefox Quantum ダウンロードステータスバー代替

Firefox Quantum (57以上) で使用不可になった「Download Status Bar」の代替について考える。


WX Download Status Bar」のバージョンアップでCSS周りが大きく変化したため、もう一度CSS書き直しました。追加コードは以下のリンク先を参照してください。


これまでの環境

Firefox Quantum以前は、「Download Status Bar」を使用していました。使用目的以下の通り。

  • ステータスバーによるダウンロードの俯瞰
  • ダウンロードの開始の目視
  • ダウンロードの完了の目視
  • ダウンロード中の有無確認
  • ダウンロードファイルのExplorer表示
  • 画面上で邪魔にならない範囲での表示

代替の方法

WX Download Status Bar」を使用する。

とりあえず、使ってみた結果は以下の通り。
表示例1

設定を変更してみた結果が以下の通り。
表示例2

不満点

  • Webページの一部(下部)が隠れてしまう
  • 黒一色だとファイルとファイルの区切りが目視しづらい
  • 複数ダウンロードすると2行で表示することがある
  • 左下の「Clear」の文字が2行で表示することがある
  • 1ファイルの表示領域幅が広すぎる
  • ダウンロード中とダウンロード完了の区別がつきにくい
    (ダウンロード90%ぐらいの時)
  • 一部ページで表示が崩れることがある
    (ファイル名が白色なったりする)
  • ステータスバーがでないページがある
  • ステータスバーが操作(右クリック)できないことある

改善策

WX Download Status Bar」は、Webページ上にステータスバーのような要素を追加して表示している。なので、「Stylish」にコードを追加してWebページ上に表示中のステータスバーの見た目を変更することにした。

改善策実施後の表示

改善策実施後の表示

Stylishに追加したコード


WX Download Status Bar」のバージョンアップでCSS周りが大きく変化したため、もう一度CSS書き直しました。追加コードは以下のリンク先を参照してください。


/* WXDownload Status BarがWebページを覆い隠してしまうため、領域を確保する */
/* 設定毎に境域サイズが異なる */
/* 1行: Force downloads to stay in a single row (本設定をしても、2行で表示することがある)*/
/* 状態:  Show status text */
/* 進歩: Show progress text */
/* 複数行表示には未対応 */
body {
    /* 1行 */
    padding-bottom: 30px !important; /* */
    
    /* 1行、状態 *
    padding-bottom: 38px; /* */
    
    /* 1行、進歩 *
    padding-bottom: 38px; /* */
    
    /* 1行、状態、進歩 *
    padding-bottom: 54px; /* */
}

/* 色を薄める(ファイルの区切りを認識できるようにする) */
 #DownloadStatusBar.theme-dark {
  background: #444 !important;
}

/* ファイル名長い場合、2行で表示することがあるため、強制1行表示 */
 #DownloadStatusBar .clearDownloads {
    min-width: 72px !important;  /* 「Clear」の文字が改行しないように、最小幅を指定 */
}
 #DownloadStatusBar .clearDownloads:hover {
  background: #000 !important;    
}
 #DownloadStatusBar .downloads.single-row {
 white-space: nowrap !important; /* 1行表示 */
}
/* アイテムの最大サイズを指定 */
 #DownloadStatusBar .downloads .item {
 max-width: 192px !important; /* 要調整 */
    width: 192px !important;
}
/* pタグを上書き(ページ側の文字色変更対策) */
 #DownloadStatusBar.theme-dark p {
 color: #eee !important;
}
/* 進行中と完了を分離するため、進行中の色を変更 */
 #DownloadStatusBar.theme-dark .downloads .item .progress-bar {
 background: #223a70 !important; /* 要調整 */
}
 #DownloadStatusBar.theme-dark .downloads .item.error .progress-bar {
 background: #6c272d !important; /* 要調整 */
}

/* tooltipの幅を限定 */
 #DownloadStatusBarTooltip {
 max-width: 576px !important;  /* 長過ぎる表示を抑止 */
 min-width: 438px !important;  /* 右側のitemのtooltipが幅が狭くなる問題の妥協点 */
}

/* 右端のコンテキストメニューを改行しないように最低幅を指定 */
 #DownloadStatusBarContextMenu {
  min-width: 145px;
  white-space: nowrap !important; /* 1行表示 */
}

変更履歴

変更日時 変更内容
2017/12/28 初版
2018/01/01 ダウンロード中の背景を紺色に変更
2018/01/01 エラー時の背景色を指定
2018/01/01 ツールチップの最小幅、最大幅を指定
2018/01/01 コンテキストメニューの最小幅を指定

未解決の問題

  • ページ表示直後に複数行、緑色で表示することがある
    • CSSの読み込み速度の問題だと思われる
  • フッターがあるWebページの一部が隠れてしまう
  • ステータスバーを表示しないページがある
  • ステータスバーが操作(右クリック)できないことある
  • Webページによって表示が崩れることがある
    • Webページ上の他コンテンツと競合していると思われる
      現状、いい解決策が思い浮かばないため、次回検討(放置)とする

良い解決方法などあれば、コメントをいただけると幸いです。

 コメントを投稿