Dark Background and Light Text — Firefox add-on

Кастомизируемость современного веба оставляет желать лучшего. Большинство веб-дизайнеров стараются, чтобы их веб-сайты выглядели одинаково у всех пользователей независимо от их операционных систем, браузеров и, как следствие, их предпочтений. Но потребность в кастомизации есть. Например, не всегда стандартный размер шрифта подходит всем пользователям, да и сам шрифт не всегда выбирают как самый различимый. Также часто пользователи хотели бы видеть сайты в других цветах, часто в тёмных. Некоторые браузеры предоставляют возможность маштабирования страниц, а также игнорирования цветов, выставленных автором вебсайта, но часто это или слишком грубо (когда цвет текста несёт смысловую нагрузку, например, предупреждающая надпись на жёлтом фоне или программный код с подсвеченным синтаксисом), или этого недостаточно (есть ещё фоновые изображения). К счастью, уже все современные распространённые браузеры поддерживают расширения. Об одном таком, которое решает проблему изменения цветовой схемы страниц, и будет доклад, а также немного о смежных темах.

Краткое введение в то, что такое аддоны и что они могут делать

Аудитория, думаю, прекрасно с этим понятием знакома и не раз пользовалась, но на всякий случай. Аддоны — небольшие приложения на javascript для браузеров, которые могут незначительно встраиваться в UI браузеров (в виде кнопок, сайдбаров и хоткеев), а так же встраивать свой javascript и CSS в вебстраницы. Наиболее распространённый класс аддонов — блокировщики рекламы.

Зачем люди могут предпочитать тёмные темы

1. Доступность. При некоторых патологиях зрения значительно проще воспринимать светлый текст на тёмном фоне.
2. Удобство при работе в тёмной комнате (например, ночью). Поэтому часто такие темы называется ночным режимом (Night Mode).
3. Личные вкусовые предпочтения.

Ограничения user CSS как общего решения для изменения цветов сайтов

1. Узкоспециализированный CSS для конкретного вебсайта. Плюсы: при желании и упорстве можно сделать очень качественно. Минусы: при малейшем изменении на сайте стиль поломается; требуется создавать подобный стиль вручную для каждого сайта.
2. Грубо перекрасить весь текст и фон в нужные цвета. Плюсы: просто и быстро (как с точки зрения разработки, так и с точки зрения производительности). Минусы: потеряется вся цветовая семантика текста (например, подсветка синтаксиса кода, выделенное жёлтым предупреждение, красным ошибка и т. д.); фоновые изображения можно или все оставить, или все убрать (см. ниже о проблеме).
3. CSS filter: invert и аналоги. Плюсы: просто с точки зрения разработки; для средней светлой страницы результат будет максимально качественным. Минусы: производительность ­— даже прокрутка страницы начнёт заметно подтормаживать (Firefox for Android становится практически неюзабельным); изначально тёмные страницы станут светлыми, смешанные страницы останутся смешанными, только наоборот.

Решение на javascript, трудности с ним и их решения

• Обход и модификация стилей в `document.styleSheets`
• Изменение цвета на тёмный или светлый, сохранение тона (например, красный остаётся красным, но в зависимости от того, фон это или текст, становится тёмно-красным или светло-красным).
  • Преобразование цвета в пространство HSL, замена канала L (Lightness).
  • Преобразование цвета в пространство YPbPr, замена канала Y’.
• Фоновые изображения. Веб-стандарт никак не регламентирует указание того факта, несут ли фоновые изображения какую-либо смысловую нагрузку (например, это иконка на кнопке) или являются только декорацией (например, текстура на фоне текста). Решение: использование эвристики на основе различных параметров (URL, CSS-класс или id, значение background-repeat и т. д.).
  • Градиенты в качестве фоновых изображений. Решение: парсинг значений и обработка цветов как фоновых как в пункте выше.

Ссылки

• https://addons.mozilla.org/firefox/addon/dark-background-light-text/
• https://github.com/m-khvoinitsky/dark-background-light-text-extension

Альтернативы, заслуживающие внимания

• https://addons.mozilla.org/firefox/addon/darkreader/
• https://addons.mozilla.org/firefox/addon/midnight-lizard-quantum/

Краткая история технического устройство аддонов для Firefox

• overlay add-on
  • Установка\обновление только с перезагрузкой браузера
  • Аддон имеет полный доступ к внутренним API браузера, никак не ограничен.
  • Нет стабильного API — аддоны могут спонтанно ломаться при обновлении браузера.
• bootstrapped add-on
  • Первая попытка сделать аддоны безперезагрузочными
  • Аддон начинается с файла bootstrap.js с функциями startup и shutdown, в которых разработчик должен сделать то, что хочет с браузером при помощи его DOM API.
  • Все плюсы и минусы предыдущего типа, кроме необходимости перезагрузки браузера.
• Add-on SDK
  • Попытка сделать стабильный API для аддонов.
  • всё ещё есть возможность (теперь опциональная) получить доступ к внутренним API браузера (которое не имеет гарантии стабильности)
• WebExtensions
  • Стабильное API и невозможность выйти за его пределы (последнее — самый большой недостаток, который вызвал массу недовольств и даже сделал реализацию некоторых существующих аддонов невозможной)
  • Причины появления:
    • Необходимость закрыть внутренний API от аддонов, так как довольно сложно вносить изменения в браузер не ломая аддонов. Примеры крупных изменений, которые ломали аддоны: e10s (мультипроцессность), интеграция наработок из Servo.
    • Трудности конкуренции с Chrome.