Style Firefox downloads toolbar button as a progress bar with enlarged text (compatible with Firefox 54)

download-progress-button.css

/* Style Downloads button (show progress) and Panel (show details after completion) */
/* TOOLBAR BUTTON TWEAKS */
/* During a download, hide the arrow */
#downloads-button[progress] #downloads-indicator-icon {
  display: none !important;
}
/* During a download, force display of progress bar */
#downloads-button[progress] #downloads-indicator-progress-area {
  display: -moz-box !important;
  visibility: visible !important;
}
/* Widen progress bar area within the button width */
#downloads-button[progress] #downloads-indicator-anchor {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding-left: 0 !important; 
  padding-right: 0 !important;
}
/* Remove blank areas to avoid making the button much too wide */
#downloads-button[progress] {
  padding-left: 0 !important; 
  padding-right: 0 !important;
}
#downloads-button[progress] .toolbarbutton-badge-stack {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
/* Larger font for time remaining */
#downloads-indicator-counter {
  font-size: 1.2em !important;
}
/* Fatten the bar (make it taller) */
#downloads-button[progress] #downloads-indicator-progress {
  height:10px !important;
}
/* for pre-Firefox 54 */
#downloads-indicator {
  padding-top:0 !important; 
  padding-bottom:0 !important;
}
/* DROP PANEL TWEAKS FOR FIREFOX 54 */
/* Hide "Completed" and show size-site-date for completed downloads (except on hover) */
#downloadsPanel .downloadDetails.downloadDetailsNormal {
  display: none !important;
}
#downloadsPanel .downloadDetails.downloadDetailsFull {
  display: -moz-box !important;
}
#downloadsPanel .download-state:hover .downloadDetails.downloadDetailsFull {
  display: none !important;
}

Will not work in Firefox 55+ (details revealed by the custom style rules are no longer present).

Any solution for FF 55?