Download Panel Tweaker, настройка встроенной панели загрузок

/*** Visibility of download buttons ***/ .download-state:not(:-moz-any([state="-1"],/* Starting (initial) */ [state="5"], /* Starting (queued) */ [state="0"], /* Downloading */ [state="4"]) /* Paused */) .downloadCancel, .download-state:not(:-moz-any([state="2"], /* Failed */ [state="3"]) /* Canceled */) .downloadRetry, .download-state:not( [state="1"] /* Finished */) .downloadShow { visibility: hidden; } .download-state[state="1"]:not([exists]) .downloadShow { display: none; }

<?xml version="1.0" encoding="UTF-8"?>  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <style> path:not(:target) { display: none; } </style> <path id="cancel" d="m 6,9.5 6.5,6.5 -6.5,6.5 3.5,3.5 6.5,-6.5 6.5,6.5 3.5,-3.5 -6.5,-6.5 6.5,-6.5 -3.5,-3.5 -6.5,6.5 -6.5,-6.5 z"/> <path id="folder" d="M17.3,9.4c0,0,1.1,0,3.7,0c1.7,0,2,0,5.6,0c0.6,0,0.6,0,1.1,0V9.2c0-1.5-0.9-2.6-2-2.6h-5.8V6.3c0-0.6-1.5-2-2.8-2h-7.1 H7.6H4.9v2.4v2.4v2.2c2.8,0,8.5,0,8.5,0C16.4,11.3,17.3,9.4,17.3,9.4z M29,13c0-0.6-0.6-1.1-1.5-1.7l0,0c-0.2,0-0.6,0-0.9,0 c-2.8,0-3,0-4.8,0c-1.9,0-3.3,0-3.3,0s-1.5,2.4-3.7,2.4c0,0-6.5,0-9.1,0H5.4C3,13.7,3,15.9,3,15.9l1.1,9.7C4.1,27.1,5,28,6.5,28 h19.1c1.5,0,2.4-0.9,2.4-2.4L29,13.7l0,0l0,0C29,13.7,29,13,29,13z"/> <path id="magnifier" d="M12.9,2c6,0,11,5,11,11c0,2.2-0.6,4.2-1.8,6l7.2,7c0.8,0.8,0.8,2.4,0,3.2c-0.6,0.6-1.2,0.8-1.6,0.8s-1.2-0.2-1.6-0.6l-7-7 c-1.8,1.2-3.8,1.8-6,1.8c-6,0-11-5-11-11C2.1,7.2,6.9,2,12.9,2z M12.9,20c3.8,0,7-3.2,7-7s-3.2-7-7-7s-7,3.2-7,7S9.1,20,12.9,20z"/> <path id="retry" d="M28,16.5v-14l-5,4.8c-1.8-1.4-4.4-2.4-7-2.4c-6.4,0-11.8,5.2-11.8,11.8c0,6.4,5.2,11.8,11.8,11.8c3.4,0,6.2-1.4,8.2-3.6 l-3.4-3.4c-1.2,1.2-3,1.8-5,1.8c-3.6,0.2-6.8-2.8-6.8-6.8c0-3.8,3-7.2,7-7.2c1.4,0,2.6,0.4,3.6,1l-6,6.2H28z"/> <path id="arrow-left" d="M23.5,25l-9-9l9-9l-3-3l-12,12l12,12L23.5,25z"/> <path id="arrow-right" d="M11.6,28l12-12l-12-12l-3,3l9,9l-9,9L11.6,28z"/> </svg>

Kero
Если сохранить раскадровку (и не трогать пока тестовые версии), то меняется очень просто (по аналогии с chrome://browser/skin/downloads/downloads.css):

А вот для полной замены придется повторить логику:

скрытый текст

Выделить код

Код:

/*** Button icons ***/

.downloadButton.downloadIconCancel {
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:hover {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:active {
  -moz-image-region: rect(0px, 64px, 16px, 48px);
}

.downloadButton.downloadIconShow {
  -moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconShow {
  -moz-image-region: rect(16px, 32px, 32px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconShow:hover {
  -moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconShow:active {
  -moz-image-region: rect(16px, 64px, 32px, 48px);
}
@media (-moz-os-version: windows-xp) {
  #downloadsPanel[keyfocus] richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow {
    -moz-image-region: rect(16px, 32px, 32px, 16px);
  }
  #downloadsPanel[keyfocus] richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:hover {
    -moz-image-region: rect(16px, 48px, 32px, 32px);
  }
  #downloadsPanel[keyfocus] richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:active {
    -moz-image-region: rect(16px, 64px, 32px, 48px);
  }
  #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow {
    -moz-image-region: rect(16px, 96px, 32px, 80px);
  }
  #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:hover {
    -moz-image-region: rect(16px, 112px, 32px, 96px);
  }
  #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:active {
    -moz-image-region: rect(16px, 128px, 32px, 112px);
  }
}

.downloadButton.downloadIconRetry {
  -moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry {
  -moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:hover {
  -moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:active {
  -moz-image-region: rect(32px, 64px, 48px, 48px);
}

.downloadButton.downloadShowBlockedInfo {
  -moz-image-region: rect(48px, 16px, 64px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo {
  -moz-image-region: rect(48px, 32px, 64px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover {
  -moz-image-region: rect(48px, 48px, 64px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active {
  -moz-image-region: rect(48px, 64px, 64px, 48px);
}

.downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 16px, 80px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 32px, 80px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 48px, 80px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 64px, 80px, 48px);
}

Да, там уже только SVG.
Проще заменять, уже меньше:

Выделить код

Код:

/*** Button icons ***/

.downloadIconCancel > .button-box > .button-icon {
  list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
}

.downloadIconShow > .button-box > .button-icon {
  list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
}

.downloadIconRetry > .button-box > .button-icon {
  list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
}

.downloadShowBlockedInfo > .button-box > .button-icon {
  list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
}

.downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
  list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
}

Но для начала все равно нужна замена вот такому набору: