fotoleto.ru - Владимир Жуйков     

=фотоальбомы=фоторабота=фотосеть=графпро=сайтострой=

В помощь— SeaMonkey — XUL

Изменение пользовательского интерфейса SeaMonkey (Mozilla) редактированием XUL-файлов

Дополнительно к стандартным настройкам и редактированию через userChrome.css, есть чуть более сложный способ редактирования интерфейса Мозиллы. Он доступен любому, владеющему HTML и CSS. Собственно, интерфейс Мозиллы — это своего рода локальный сайт, запакованный в архивные файлы .jar, только странички этого «сайта» сделаны на языке XUL (зул).
На этой странице даны примеры с кратким описанием, — этого достаточно для дальнейших самостоятельных экспериментов, не требующих знания XUL. Все варианты изменений описывать не возьмусь, — здесь приведены только некоторые из моей практики. Надеюсь, они окажутся полезными.
Тех, кто ищет подробных инструкций по языку XUL, отсылаю на страничку «Разработка» — там есть масса ссылок на капитальные специализированные ресурсы, посвящённые XUL.
Мне известны три способа внесения изменений в файлы, отвечающие за внешний вид Мозиллы.
  1. Скопировать нужный архивный файл .jar во временную папку, полностью распаковать его архиватором, изменить что хотелось, запаковать, скопировать обратно (предварительно переименовав исходный оригинальный файл на случай неудачных экспериментов).
  2. Открыть непосредственно исходный оригинальный архивный файл .jar в архиваторе (например, в WinRAR), перемещаясь внутри архива, найти нужный текстовый файл (например, .xul) , открыть его в ассоциированном текстовом редакторе (например, EmEditor), изменить что хотелось, сохранить в текстовом редакторе (если предполагаются последовательные пробы, то удобнее не закрывать текстовый редактор, чтобы оставалась возможность оперативно отменить изменения (откат, undo - redo), подтвердить обновление архивного файла в архиваторе.
  3. Открыть непосредственно исходный оригинальный архивный файл .jar в архиваторе (например, в WinRAR), перемещаясь внутри архива, найти нужный текстовый файл (например, .xul) , извлечь (скопировать) во временную папку из архивного файла .jar только этот файл .xul , изменить в нём что хотелось, добавить файл .xul с заменой обратно в архивный файл .jar Во временной папке, в этом варианте, по ходу работы можно сохранять версии изменяемого файла.

В любом случае, лучше бы «до того» сохранить копии оригинальных файлов .jar — если изменения будут неудачными — достаточно вернуть исходный файл на место и всё заработает как раньше. Мозилла не должна быть открыта в момент применения изменений.
Изменение функций стандартных кнопок
На любую стандартную (имеющуюся в любой шкурке) кнопку можно назначить другую команду. То есть, кнопка будет выглядеть как и раньше, а действовать так, как вы захотите. Вариант — исходная кнопка остаётся на месте, но, в то же время, создаётся её дубль с новыми функциями.
Все стандартные и вновьсозданные кнопки перемещаются простым перетаскиванием соответствующих тегов внутри файла navigator.xul (где находится код панели инструментов) и файла navigatorOverlay.xul (где находится код панели меню).
Код каждой кнопки заключён в теги <toolbarbutton></toolbarbutton> Распознаётся конкретная кнопка по идентификатору id="" в открывающем теге <toolbarbutton>.
Панель инструментов состоит из трёх блоков:
  1. Между тегами <hbox id="nav-bar-buttons"></hbox> находятся кнопки back, forward, reload, stop.
  2. Между тегами <hbox id="nav-bar-inner" flex="1"></hbox> находится адресная строка и кнопки go-button, search-button, print-button
  3. Между тегами <hbox id="throbber-box" align="center"></hbox>находится троббер — картинка, оживающая при загрузке страницы.
  4. Между тегами <hbox id="window-controls" hidden="true" fullscreencontrol="true"></hbox> находятся кнопки окна браузера в полноэкранном режиме minimize-button, restore-button, close-button.
Кнопки панели инструментов в файле
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigator.xul
<toolbarbutton id="back-button"
<toolbarbutton id="forward-button"
<toolbarbutton id="reload-button"
<toolbarbutton id="stop-button"
<button id="go-button"
<button id="search-button"
<toolbarbutton id="print-button"
<button id="navigator-throbber"
<toolbarbutton id="minimize-button"
<toolbarbutton id="restore-button"
<toolbarbutton id="close-button"
Для примера, создадим (продублируем) ещё одну кнопку «Print» («Печать») с новыми функциями и разместим её, например, первой слева на панели инструментов. Внешне новая кнопка повторит исходную, но по клику на ней, будет выполняться другая команда.
Находим в файле
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigator.xul
код «родной» кнопки «Print» 
<toolbarbutton id="print-button" type="menu-button" class="toolbarbutton-1"
               label="&printButton.label;"
               oncommand="if (event.target==this) NSPrint();"
               tooltiptext="&printButton.tooltip;">  
  <menupopup id="printMenu">
    <menuitem id="printMenuItemToolbar" label="&printCmd.label;" 
    accesskey="&printCmd.accesskey;"
              default="true" oncommand="NSPrint()"/>
    <menuitem id="printPreviewMenuItemToolbar" label="&printPreviewCmd.label;" 
    accesskey="&printPreviewCmd.accesskey;"
              oncommand="setTimeout(BrowserPrintPreview, 0);"/>
  </menupopup>
</toolbarbutton>
Копируем этот кусок кода, меняем команды (oncommand="" или command="") и содержание текстовых кнопок (label="") на нужные нам, например:
 <toolbarbutton id="print-button" type="menu-button" class="toolbarbutton-1"
        label="SaveAs"
        oncommand="saveDocument(window._content.document);">  
 <menupopup>
  <menuitem label="Preferences"
        oncommand="goPreferences('navigator', 
        'chrome://communicator/content/pref/pref-navigator.xul', 'navigator')"/>
  <menuitem label="Page info"
        oncommand="BrowserPageInfo();"/>
 </menupopup>
 </toolbarbutton>

и добавляем в том же navigator.xul после открывающего тега контейнера "nav-bar-buttons":
<hbox id="nav-bar-buttons">
На саму кнопку в этом примере назначена команда «Save As», на два пункта выпадающего меню — «Preferences» и «Page info».
Родную кнопку «Print» можно оставить на своём месте (новая кнопка не влияет на функциональность родной кнопки) или удалить.
Изменение функции расширения «Home Button»
Расширение «Home Button» добавляет кнопку «Home» со стандартной функцией — открытием домашней страницы браузера. На эту новую кнопку можно назначить любую другую команду, например, View Source, он же просмотр HTML, он же Page Source, в общем, открытие страницы в текстовом редакторе. Последовательность действий:
  1. Устанавливаете расширение «Mozex», в нём в настройках назначаете на просмотр страниц нужный редактор. Перезапускаете Мозиллу.
  2. Устанавливаете расширение «Home Button» в профиль (тогда самодельная кнопка будет действовать только в том профиле, в который установлено расширение), оно выведет дополнительную кнопку home в позицию слева от адресной строки. Закрываете Мозиллу.
  3. В папке chrome профиля находите файл home.jar
  4. Копируете home.jar во временную папку для экспериментов.
  5. Распаковываете home.jar программой-архиватором.
  6. Заходите в папку content, находите файл homeOverlay.xul
  7. Открываете файл homeOverlay.xul в любом простом текстовом редакторе (Блокноте).
  8. Находите команду: oncommand="BrowserHome(event);"
  9. Меняете на oncommand="mozexViewPageSource()"
  10. После изменения, сохраняете файл homeOverlay.xul
  11. Запаковываете папки content и skin как архив .zip с именем home.zip
  12. Копируете home.zip в папку chrome профиля.
  13. Исходный файл home.jar переименовываете в home-original.jar
  14. Файл home.zip переименовываете в home.jar
  15. Запускаете Мозиллу - проверяете работоспособность.
Точно так же можно на эту кнопку назначить какую-то другую функцию.
Home Button
http://3rdhand.info/mozilla/home/en.xhtml
Домашняя страница расширения.
http://3rdhand.info/mozilla/home/home.xpi
Добавление собственной кнопки-изображения на панель инструментов
Для примера, это будет кнопка с командой «Open File» («Открыть файл»).
В файле
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigator.xul
после:
      <hbox id="nav-bar-buttons">
добавить
    <toolbarbutton id="mybutOpen"
        label="Open"
        tooltiptext="Open File"
        command="Browser:OpenFile"/>
Картинка для кнопки может быть какой угодно, но желательно в формате GIF или PNG с прозрачностью. Размер зависит от используемой темы. Для темы Pinball подходящий размер 20x20 px.
В файле userChrome.css укажите место на диске, где находится картинка. Для оживления кнопки при наведении и нажатии, картинок должно быть три. Или две — для состояния «active» можно использовать или ту же картинку, что и для «hover», или исходную.
#mybutOpen{
list-style-image: url("n.png") !important;
max-width:31px !important;
margin-left:2px !important;
padding:0 3px 0 3px !important;
}
#mybutOpen:hover{
list-style-image: url("h.png") !important;
}
#mybutOpen:active{
list-style-image: url("a.png") !important;
}
Добавление собственной кнопки-изображения на панель меню
Для примера, это будет кнопка с командой «Save As» («Сохранить как») в крайней левой позиции на панели меню.
в файле
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigatorOverlay.xul
после 
  <!-- Menu -->
  <menubar id="main-menubar" class="chromeclass-menubar">
вставить 
    <toolbarbutton id="mybutSave"
        label="SaveAs"
        tooltiptext="Save As"
        oncommand="saveDocument(window._content.document);"/>
Добавление новых текстовых меню на панель меню
Чтобы справа от меню «Help» («Справка») на свободном пространстве панели меню появились новые текстовые пункты меню или новые меню с вложенными подпунктами
в файле
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigatorOverlay.xul
найдите строчку, относящююся к меню «Help»
  <menu accesskey="&helpMenuCmd.accesskey;" id="menu_Help"/>
и сразу за ней добавьте теги необходимых Вам элементов.
Надпись в кавычках label="" будет выведена как пункт меню.
tooltiptext="" — всплывающая подсказка.
Адрес сайта или локальной страницы следует ввести в кавычки loadURI('')
Все примеры даны для английской версии Мозиллы. Для того, чтобы новые надписи в элементах интерфейса выводились по-русски, - перед редактированием файлов XUL переключите текстовый редактор на кодировку уникод UTF-8, а по завершении редактирования — сохраните в ней.
Код меню и вложенных меню находится в файлах:
C:\Program Files\Mozilla\chrome\comm.jar\content\navigator\navigatorOverlay.xul
C:\Program Files\Mozilla\chrome\comm.jar\content\communicator\utilityOverlay.xul
Примеры — подпункты существующих меню:
«Copy» («Копировать») 
<menuitem label="copy" command="cmd_copy"/>
Select All («Выделить всё») 
<menuitem label="select all" command="cmd_selectAll"/>
File Bookmark () 
<menuitem label="add Bookmark" oncommand="addBookmarkAs();"/>
«PageSource» («») 
<menuitem label="PageSource" command="View:PageSource"/>
«Source» («Код») — при установленном расширении mozex 
<menuitem label="Source" oncommand="mozexViewPageSource();"/>
«Open File» («Открыть файл») 
<menuitem label="Open File" command="Browser:OpenFile"/>
«Find» («») 
<menuitem label="Find" command="Browser:Find"/>
«FindAgain» («») 
<menuitem label="FindAgain" command="Browser:FindAgain"/>
«FindPrev» («») 
<menuitem label="FindPrev" command="Browser:FindPrev"/>
«Print» («Печать») 
<menuitem label="Print" command="Browser:Print"/>
«EditPage» («») — Открыть страницу в Компоновщике 
<menuitem label="EditPage" command="Browser:EditPage"/>
«Search» («») 
<menuitem label="Search" oncommand="BrowserSearchInternet();"/>
«Translate» («») 
<menuitem label="Translate" oncommand="Translate();"/>
Пример — пункт меню, открывающий заданный сайт:
<menuitem label="Fotoleto" oncommand="loadURI('http://fotoleto.ru/');"/>
Пример — пункт меню, открывающий локальный файл:
<menuitem label="Test" 
oncommand="loadURI('C:\Program Files\Mozilla\res\samples\test2.html');"/>
Пример — пункт меню, открывающий в табе менеджер закладок:
<menuitem label="Bookmarks" 
oncommand="loadURI('chrome://communicator/content/bookmarks/bookmarksManager.xul');"/>
Пример — новое меню с вложенными подпунктами
<menu label="Foto">
    <menupopup>
          <menuitem label="Fotoleto" oncommand="loadURI('http://fotoleto.ru/');"/>
          <menuitem label="Fotoalbum" 
          oncommand="loadURI('http://fotoleto.ru/fotoalbum/index.html');"/>          
          <menuitem label="Fotoleto - Fotowww" 
          oncommand="loadURI('http://fotoleto.ru/fotowww/index.html');"/>
    </menupopup>
</menu>
Пример — новое меню, содержащее вложенные подменю с вложенными подпунктами - закладками:
<menu label="Mozilla">
<menupopup>
   <menu label="Mozilla.Org">
     <menupopup>
       <menuitem label="mozilla.org - SeaMonkey" 
       oncommand="loadURI('http://www.mozilla.org/projects/seamonkey/');"/>
       <menuitem label="wiki.mozilla.org - SeaMonkey" 
       oncommand="loadURI('http://wiki.mozilla.org/wiki/SeaMonkey:Home_Page');"/>
       <menuitem label="mozilla.org - Mozilla Suite" 
       oncommand="loadURI('http://www.mozilla.org/products/mozilla1.x/');"/>
     </menupopup>
   </menu>
   <menu label="Mozilla.Ru">
     <menupopup>
       <menuitem label="Mozilla.Ru" oncommand="loadURI('http://mozilla.ru/');"/>
       <menuitem label="Forum." 
       oncommand="loadURI('http://forum.mozilla.ru/');"/>
       <menuitem label="Forum - SeaMonkey" 
       oncommand="loadURI('http://forum.mozilla.ru/viewforum.php?id=10');"/>
     </menupopup>
   </menu>
</menupopup>
</menu>
Пункты меню, вынесенные на панель меню могут быть "оживлены" через userChrome.css Например, так: 
/* стилизует подменю, вынесенные на панель меню */

menubar [label="Open"],
menubar [label="File Bookmark"],
menubar [label="Copy"],
menubar [label="Select All"]{
background: #ddd !important;
padding: 0 0 1px 0 !important;
border:1px solid #bbb !important;
margin:0 4px 0 4px !important;
}
menubar [label="Open"]:hover,
menubar [label="File Bookmark"]:hover,
menubar [label="Copy"]:hover,
menubar [label="Select All"]:hover{
background: #424f81 !important;
padding: 0 0 1px 0 !important;
border:1px solid #bbb !important;
margin:0 4px 0 4px !important;
}
Любые другие пункты меню добавляются в список
Добавление новых текстовых кнопок на панель меню
<button label="SaveAs" 
oncommand="saveDocument(window._content.document);"/>
Редактирование контекстного меню расширения на примере MozEX
После установки MozEX, в новом подменю контекстного меню Мозиллы появляются 10 строчек в заданном автором порядке. Если они все не используются, или не устраивает последовательность расположения команд, или не удобно то, что приходится долго пробираться в подменю, — просто переделайте контекстное меню расширения под себя.
  1. Устанавливаете mozex.xpi в профиль.
  2. После установки расширения, заходите в папку chrome профиля, находите файл mozex.jar
  3. Копируете mozex.jar во временную папку для экспериментов.
  4. Распаковываете mozex.jar программой-архиватором (.jar это, на самом деле, zip-архив).
  5. Заходите в папку content, затем в папку mozex, находите файл mozex.xul
  6. Открываете файл mozex.xul в любом простом текстовом редакторе (Блокноте).
  7. Находите часть кода, непосредственно относящуюся к пунктам контекстного меню:
<popup id="contentAreaContextMenu">
    <menu id="mozex-menu" label="mozex" accesskey="x">
        <menupopup>
            <menuitem id="mozex-page-source" label="View Page Source" 
                oncommand="mozexViewPageSource()" accesskey="s" />
            <menuitem id="mozex-frame-source" label="View Frame Source" 
                oncommand="mozexViewFrameSource()" accesskey="f" />
            <menuseparator />
            <menuitem id="mozex-edit-textarea" label="Edit Textarea" 
                oncommand="mozexEditTextarea()"/>
            <menuseparator />
            <menuitem id="mozex-link-download" label="Link => Download" 
                oncommand="mozexDownload()"/>
            <menuitem id="mozex-link-mailto" label="Link => Send Email" 
                oncommand="mozexSendEmail()"/>
            <menuitem id="mozex-link-ftp" label="Link => FTP Client" 
                oncommand="mozexFTPClient()"/>
            <menuitem id="mozex-link-irc" label="Link => IRC Client" 
                oncommand="mozexIRCClient()"/>
            <menuitem id="mozex-link-news" label="Link => News Client" 
                oncommand="mozexNewsClient()"/>
            <menuitem id="mozex-link-telnet" label="Link => Telnet Client" 
                oncommand="mozexTelnetClient()"/>
            <menuitem id="mozex-link-ed2k" label="Link => ED2K Client" 
                oncommand="mozexED2KClient()"/>
            <menuitem id="mozex-link-aim" label="Link => AIM Client" 
                oncommand="mozexAIMClient()"/>
        </menupopup>
    </menu>
</popup>

8. Удаляете ненужные пункты меню.
Пример-1, оставлены 3 пункта: View Page Source, Link => Download, View Frame Source 
<popup id="contentAreaContextMenu">
    <menu id="mozex-menu" label="mozex" accesskey="x">
        <menupopup>
            <menuitem id="mozex-page-source" label="View Page Source" 
                oncommand="mozexViewPageSource()" accesskey="s" />
            <menuseparator />
            <menuitem id="mozex-link-download" label="Link => Download" 
                oncommand="mozexDownload()"/>
            <menuseparator />
            <menuitem id="mozex-frame-source" label="View Frame Source" 
                oncommand="mozexViewFrameSource()" accesskey="f" />
        </menupopup>
    </menu>
</popup>
9. Один пункт меню:
            <menuitem id="mozex-page-source" label="View Page Source" 
                oncommand="mozexViewPageSource()" accesskey="s" />
10. Разделитель:
            <menuseparator />

11. Пример-2, оставлены 2 пункта: View Page Source, Link => Download Пункты меню перемещены из вложенного меню контекстного меню непосредственно в контекстное меню:
<popup id="contentAreaContextMenu">
    <menuitem id="mozex-page-source" label="View Page Source" 
                oncommand="mozexViewPageSource()" accesskey="s" />
    <menuitem id="mozex-link-download" label="Link => Download" 
                oncommand="mozexDownload()"/>
</popup>
12. Пример-3, добавлены разделители, пункты меню переименованы:
<popup id="contentAreaContextMenu">
            <menuseparator />
    <menuitem id="mozex-page-source" label="Mozex Source" 
                oncommand="mozexViewPageSource()" accesskey="s" />
            <menuseparator />
    <menuitem id="mozex-link-download" label="Mozex Download" 
                oncommand="mozexDownload()"/>
</popup>

13. После изменений, сохраняете файл mozex.xul
14. Запаковываете папку content как архив .zip с именем mozex.zip
15. Копируете mozex.zip в папку chrome профиля.
16. Исходный файл mozex.jar переименовываете в mozex-original.jar
17. Файл mozex.zip переименовываете в mozex.jar
18. Запускаете Мозиллу - проверяете работоспособность.
seamonkey1.0-fotoleto.ru.png
http://fotoleto.ru/seamonkey/seamonkey1.0-fotoleto.ru.png
Скриншот Seamonkey 1.0 со всеми добавленными кнопками и меню.
Добавлены кнопки: Открыть файл, Сохранить как, Scrapbook, Копировать, Вставить, Выделить всё, Добавить ссылку, Quicknote, Настройки, Editconfigfiles, Исходный код. Добавлены выпадающее меню с выбранными пунктами из других меню и меню со сылками на страницы локальной версии этого сайта. Остальное подправлено в userChrome.css

=карта сайта=о сайте=в помощь=автор=контакты=

Любое воспроизведение фотографий и текстов сайта должно быть согласовано с автором.