Создание скина для Firefox/Начало работы

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Скачайте и установите последнюю версию Firefox. Также Вам понадобится расширение DOM Inspector, убедитесь, что оно установлено.

Извлечение темы

Предполагается, что начать работу можно с любой темы, которая уже создана для Firefox, поэтому мы будем говорить о редактировании предзаданной темы Firefox.  Она находится в  файле classic.jar, хранящемся в каталоге установки Firefox. Файл .jar, по сути является переименованным архивом zip. При открытии файлов .jar через менеджер архивов он автоматически распознается как zip-архив. Однако, если ваше приложение не распознает  classic.jar как стандартный архив zip, переименуйте в classic.zip и продолжите извлечение.

Примечание: Начиная с Gecko 2.0, скин содержится в новом файле omni.jar. См. Theme changes in Firefox 4 подробнее о том, как извлечь файлы skin из Firefox 4 или более поздней версии.

Пути к Classic.jar

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar or /usr/lib/firefox-*.*.*/chrome/classic.jar

Windows: \Program Files\Mozilla Firefox\chrome\classic.jar

Для Mac OS X:

  • Перейдите в applications
  • Удерживая Control,  кликните мышью на иконку приложения (Firefox icon), Выберите Show Package Contents.
  • Перейдите в contents/MacOS/Chrome/classic.jar

Скопируйте classic.jar в другую более доступную папку -- мы рекомендуем Classic  -- извлеките содержимое этой папки, сохранив при этом структуру каталога.

Каталоги

В архиве classic.jar находится один каталог - skin, и два файла - preview.png и icon.png.

skin
Этот файлсодержит еще один каталог - classic, в котором находится много нужных каталогов.
skin\classic
В нем содержатся следующие каталоги:
skin\classic\browser
Тут находятся все иконки панели инструментов, а также иконки для менеджера закладок и окна предварительных настроек.
skin\classic\communicator
Не играет большой роли и не стоит внимания.
skin\classic\global
Содержит в себе почти все важные файлы CSS, которые определяют стиль и оформление браузера. Это самый важный каталог в теме.
skin\classic\help
Содержит все файлы для оформления диалогового окна справки.
skin\classic\mozapps
Тут лежат все стили и иконки для переферии браузера, таких как менеджер расширений или мастер обновлений.

Создание собственной новой темы

Прежде, чем отследить созданные в теме Firefox изменения (т.к. изменения достаточно сложно добавлять в интерактивном режиме), изучим, как переархивировать классическую тему так, чтоб ее можно было установить. Можно назвать вашу собственную тему "My_Theme", или любым другим именем.

Копирование необходимых файлов

Первым делом необходимо переместить все файлы в нужный каталог.  Для этого создадим новый каталог с именем My_Theme.  В него поместим каталоги browser, global, communicator, help, и mozapps , а также файлы icon.png и preview.png(да, это значит, что струтура нашего каталога будет немного отличаться от структуры каталога classic.jar).

Создание файлов установки

Contents.rdf

Скопируйте contents.rdf, поместите его в \My_Theme и откройте в текстовом редакторе. Это небольшой файл XML Database, который используется для описния skin.

В коде найдите все сущности "My_Theme" и замените их на название вашей темы.

В разделе пакетов перечислено, каие компоненты браузера вы редактируете. Если у нас также есть скины для Chatzilla, нужно добавить еще одну похожую строку, ведущую на Chatzilla. Но данный список включает в себя все модификации, поэтому достаточно изменить текст, подсвеченный синим так, чтобы он совпадал с именем/версией, которую вы использовали выше.

<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>

Сохраните файл и закройте текстовый редактор.

install.rdf

Скопируйте install.rdf в каталог My_Theme и так же откройте его в текстовом редакторе. Данный файл представляет собой небольшую базу данных XML, которая описывает скин.

  <Description about="urn:mozilla:install-manifest">
  <em:id>{Themes_UUID}</em:id>
  <em:version>Themes_Version</em:version>

В первой секции необходимо определить UUID для вашей темы и номер версии.

Также, в следующей секции необходимо обновить минимальную и максимальную совместимые версии для целевого приложения (Firefox):

  <em:targetApplication>
    <Description>
      <!-- Firefox's UUID -->
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>Min_FF_Version</em:minVersion>
      <em:maxVersion>Max_FF_Version</em:maxVersion>
    </Description>
  </em:targetApplication>

Указав минимальную и максимальную совместимые версии, вы сможете избежать конфликтов с версиями Firefox, для которых ваша тема не была разработана или протестирована.

См. подробнее о фале install.rdf в Install Manifests.

Файлы CSS

Файлы CSS в данных каталогах сообщают браузеру как отображать кнопки и другие элементы управления, где вставить изображения, какую границу или отступ использовать вокруг них, и прочее.

Давайте в качестве примера изменим стандартную кнопку.

Перейдите в глобальный каталог global и откройте файл стилей - button.css в любом текстовом редакторе. Прокрутите текст вниз до секции "button {".  Эта секция определяет базовые настройки кнопки(например, такие как: цвет самой кнопки, цвет и расположение текста на самой кнопке, дизайн, размещение, активна или вовсе отключена).

Совет: для быстрого нахождения нужных строк и значений используйте обычный поиск по файлу(практически во всех редакторах это сочетание клавиш Ctrl + F для Linux/Windows и Command + F для Mac OS)

Измените значение background-color: на DarkBlue, а значение color: на White, и сохраните файл.

Переархивирование JAR

Теперь осталось только переархивировать файл JAR со следующей структурой каталогов и создать zip архив, используя любой менеджер архивов:

/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png
  

Убедитесь, что вы не просто добавляете в zip-архив  родительский каталог My_Themeтак как это приведет к тому, что простая установка перетаскиванием в следующем шаге пройдет неудачно, но сообщений об ошибках не будет. После того, как вы поместили файлы в папку zip, переименуйте ее в My_Theme.jar. 

Запуск установки из сети

Чтобы установить тему из файла JAR из сети, вопользуйтесь командой.

<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 "myskin.jar", "My Skin Theme")'>install My Skin</a>

Если файлы JAR на жестком диске, скачайте/используйте для установки эту форму.

Также, можно открыть окно тем в Mozilla и перетащить туда ваш файл .jar.

Теперь, чтобы снова переархивировать ваши папки в .jar, просто поместите ваши папки в файл .zip, а затем после сжатия переименуйте .zip в .jar.