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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

Предполагается, что начать работу можно с любой темы, которая уже создана для Firefox/ Поэтому мы будем говорить о редактировании предзаданной темы Firefox.  Она находится в  файле classic.jar, хранящемся в каталоге установки Firewall. Файл .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
skin содержит еще один каталог classic, в котором находится много нужных каталогов.
skin\classic
classic содержит следующие каталоги.
skin\classic\browser
browser содержит все иконки панели инструментов, а также иконки для менеджера закладок и окна предварительных настроек.
skin\classic\communicator
Не играет большой роли и не стоит внимания.
skin\classic\global
global содержит почти все важные файлы CSS, которые определяют стиль и оформление браузера. Это самый важный каталог в теме.
skin\classic\help
help содержит все файлы для оформаления диалогового окна справки.
skin\classic\mozapps
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 {". Она определяет базовые настройки кнопки. (На нее не наведена мышь, она не отключена и она не выбрана).

Изменим 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.

 

Метки документа и участники

Внесли вклад в эту страницу: Kiprusoff, MaslovaEV, rapaich, archer495
Обновлялась последний раз: Kiprusoff,