Стилизация полосы прокрутки xul

Чтобы внести изменения стиля CSS в части элемента XUL, вам необходимо назначить CSS базовым элементам, когда они содержатся в основном элементе. Чтобы определить, какие элементы находятся внутри каких (т. е. какие элементы составляют «полосу прокрутки»). Вы, вероятно, в конечном итоге будете использовать комбинацию DOM Inspector, изучая файл .xml, который их определяет, и CSS, используемый для их стилизации. Файлы, определяющие элементы XUL, представляют собой файлы привязки .xml. Они и файлы .css для их стилей обычно содержатся в файлах omni.ja, которые находятся в дереве каталогов установки Firefox. Файлы omni.ja — это обычные файлы .zip, переименованные с другим расширением. Вы можете скопировать такой файл и переименовать его в omni.zip, чтобы получить удобный доступ.

В частности, для полос прокрутки это файлы scrollbar.xml и scrollbars.css, расположенные в главном файле omni.ja. Вы также можете просмотреть файлы floating-scrollbars-light.css или floating-scrollbars.css в browser/omni.ja. файл.

Однако вам нужна полоса прокрутки внутри <richlistbox>. Чтобы узнать, как стилизовать эти полосы прокрутки, вам нужно выяснить, из чего состоит <richlistbox>;. Это файл richlistbox.xml (в стиле richlistbox.css) в основном файле omni.ja. В этом файле кажется, что полоса прокрутки реализована с помощью элемента <scrollbox>, который определен в scrollbox.xml (в стиле scrollbox.css), а также в основном omni .ja. Элементы, которые вы хотите стилизовать, могут содержаться в нескольких слоях других элементов. Вам нужно будет продолжать копать и экспериментировать, чтобы найти правильный селектор CSS для элементов, которые вы хотите стилизовать.

Возможно, вы уже используете <richlistbox> в своем собственном окне XUL, но вы также можете просто добавить его где-нибудь в браузере (вы не сказали). Для экспериментов, в дополнение к настройке разработки, я бы предложил отдельное окно XUL, в котором указан отдельный файл .css, который вы можете легко открыть, нажав кнопку. Это может быть просто диалоговое окно параметров. Использование отдельного окна XUL для экспериментов позволяет вам иметь отдельный файл CSS, вызываемый только этим окном. В этом случае файл .xul для этого окна (и файлы .js и .css, вызываемые только из этого .xul) перечитываются каждый раз при открытии окна. Это позволяет тестировать изменения, просто закрывая и снова открывая окно, а не перезапуская Firefox. Если это совершенно отдельное окно, а не диалоговое окно параметров, вы можете открыть несколько копий окна и выполнить параллельное сравнение изменений.

Например, следующий CSS-код окрашивает фон фактической текстовой области в элементах ‹menulist› и ‹textbox› при наведении на них указателя мыши:

menulist hbox :hover {
  background-color: Azure !important;
}
textbox>hbox :hover {
  background-color: Azure !important;
}