MozillaZine

Lightning add Custom Button in ToolBars

For discussing the Mozilla Calendar, Sunbird and Lightning projects.
littlet
 
Posts: 3
Joined: June 4th, 2016, 10:58 am

Post Posted June 5th, 2016, 8:05 am

Hello All!

I would like to place the custom button into the Lightning toolbars.
( Toolbar ids: calendar-toolbar2, task-toolbar2, task-actions-toolbar )

My question is, what is the "style" and "overlay" file that is redefined in my "chrome.manifest" file, and what is the "toolbarpalette" to this change in my ".xul" file.

Thank's!

morat
 
Posts: 2530
Joined: February 3rd, 2009, 6:29 pm

Post Posted June 12th, 2016, 8:33 am

You can hack the extension to add a button to the calendar-toolbar2 toolbar in the calendar tab.

* edit extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome\lightning\content\lightning\lightning-toolbar.xul
* edit extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome\skin\windows\lightning\lightning-toolbar.css
* restart application
* drag button to toolbar i.e. View > Toolbars > Customize

Code: Select all
  <toolbarbutton id="calendar-delete-button"
                 class="toolbarbutton-1 calbar-toolbarbutton-1"
                 label="&lightning.toolbar.delete.label;"
                 tooltiptext="&lightning.toolbar.delete.tooltip;"
                 observes="calendar_delete_focused_item_command"/>

+ <toolbarbutton id="calendar-example-button"
+                class="toolbarbutton-1"
+                label="Example"
+                tooltiptext="Example calendar button"
+                oncommand="alert('Example');"/>

Code: Select all
  #calendar-toolbar2,
  #task-toolbar2 {
    border-top-width: 0;
  }

+ #calendar-example-button {
+   list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png");
+   -moz-image-region: rect(0px, 16px, 16px, 0px);
+ }

The toolbarpalette id is "CalendarToolbarPalette".

littlet
 
Posts: 3
Joined: June 4th, 2016, 10:58 am

Post Posted July 1st, 2016, 4:08 pm

Ok, but how do I modify the 'Lightning' extension 'Calendar Tab' from another 'ThunderBird' extension?

morat
 
Posts: 2530
Joined: February 3rd, 2009, 6:29 pm

Post Posted July 3rd, 2016, 8:07 am

Try this:

* install.rdf

Code: Select all
<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>tweaks@example.com</em:id>
    <em:type>2</em:type>
    <em:unpack>true</em:unpack>
    <em:name>Tweaks</em:name>
    <em:version>1.0</em:version>
    <em:creator>morat</em:creator>
    <em:description>Personalize Thunderbird.</em:description>
    <em:homepageURL>http://forums.mozillazine.org/viewtopic.php?f=46&amp;t=3008813</em:homepageURL>

    <!-- Thunderbird -->
    <em:targetApplication>
      <Description>
        <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
        <em:minVersion>38.0</em:minVersion>
        <em:maxVersion>99.0</em:maxVersion>
      </Description>
    </em:targetApplication>

  </Description>

</RDF>

* chrome.manifest

Code: Select all
content tweaks .
locale tweaks en-US .
skin tweaks classic/1.0 .

overlay chrome://lightning/content/messenger-overlay-sidebar.xul chrome://tweaks/content/overlay.xul
style chrome://global/content/customizeToolbar.xul chrome://tweaks/skin/style.css

* overlay.xul

Code: Select all
<?xml version="1.0"?>

<?xml-stylesheet href="chrome://tweaks/skin/style.css" type="text/css"?>

<overlay id="tweaks-toolbar-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <toolbarpalette id="CalendarToolbarPalette">
    <toolbarbutton id="calendar-example-button"
                   class="toolbarbutton-1"
                   label="Example 1"
                   tooltiptext="Example calendar button"
                   oncommand="alert('Example 1');"/>
  </toolbarpalette>
  <toolbarpalette id="TaskToolbarPalette">
    <toolbarbutton id="task-example-button"
                   class="toolbarbutton-1"
                   label="Example 2"
                   tooltiptext="Example task button"
                   oncommand="alert('Example 2');"/>
  </toolbarpalette>
  <toolbarpalette id="task-actions-toolbar-palette">
    <toolbarbutton id="task-actions-example-button"
                   class="toolbarbutton-1 msgHeaderView-button"
                   label="Example 3"
                   tooltiptext="Example task actions button"
                   oncommand="alert('Example 3');"/>
  </toolbarpalette>
</overlay>

* style.css

Code: Select all
#calendar-example-button {
  list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
#task-example-button {
  list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
#task-actions-example-button {
  list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

Return to Calendar


Who is online

Users browsing this forum: No registered users and 2 guests