MozillaWiki

Calendar:Event in a Tab/documentation: Difference between revisions

Calendar Discussion

Calendar:Event in a Tab/documentation (view source)

Revision as of 01:46, 23 August 2016

45 bytes removed ,  23 August 2016
Edit headings for clearer organization
(Initial content)
 
(Edit headings for clearer organization)
Line 1: Line 1:
This page provides some high-level documentation for the UI for editing events and tasks (event/task tabs and dialog windows) in Mozilla Calendar / Lightning – namely where the code is located and how it is organized.  This page and much of the code it documents came out of the "Event in a Tab" project undertaken by Paul Morris for Google Summer of Code 2016.
This page provides some high-level documentation for the UI for editing events and tasks (event/task tabs and dialog windows) in Mozilla Calendar / Lightning – namely where the code is located and how it is organized.  This page and much of the code it documents came out of the "Event in a Tab" project undertaken by Paul Morris for Google Summer of Code 2016.


=== 0.A. Overview ===
=== Overview ===


The terrain is not simple:
The terrain is not simple:
Line 30: Line 30:
   calendar/base/content/dialogs/calendar-summary-dialog.xul
   calendar/base/content/dialogs/calendar-summary-dialog.xul


=== 0.B. Tab implementation code ===
=== Tab implementation code ===


The tab type for events and tasks is defined in:
The tab type for events and tasks is defined in:
Line 38: Line 38:
This tab definition also contains the code that opens, closes, persists, restores, etc. the tabs.
This tab definition also contains the code that opens, closes, persists, restores, etc. the tabs.


=== 0.C. General note on file names and locations ===
=== General note on file names and locations ===


The files under the "base" directory are there for historical reasons.  For greater consistency they eventually could/should be moved under the "lightning" directory and renamed (e.g. "calendar-event-dialog.xul" --> "lightning-item-dialog.xul").
The files under the "base" directory are there for historical reasons.  For greater consistency they eventually could/should be moved under the "lightning" directory and renamed (e.g. "calendar-event-dialog.xul" --> "lightning-item-dialog.xul").


=== 1. Inside the iframe: ===
=== Inside the iframe ===


Inside the iframe things are the same for the tab and window dialog cases.
Inside the iframe things are the same for the tab and window dialog cases.


=== 1.A. XUL and HTML files ===
==== - XUL and HTML files ====


In both tabs and window dialogs the main UI is inside an iframe, and its content is provided by one of two files, one for the XUL implementation and one for the new HTML implementation:
In both tabs and window dialogs the main UI is inside an iframe, and its content is provided by one of two files, one for the XUL implementation and one for the new HTML implementation:
Line 53: Line 53:
   calendar/lightning/content/html-item-editing/lightning-item-iframe.html
   calendar/lightning/content/html-item-editing/lightning-item-iframe.html


=== 1.B. Javascript files ===
==== - Javascript files ====


The primary javascript code that is used inside the iframe is located in this file:
The primary javascript code that is used inside the iframe is located in this file:
Line 65: Line 65:
The HTML implementation currently uses the "react.js" and "react-dom.js" source files that are used by devtools, rather than including a separate copy for use by Lightning.
The HTML implementation currently uses the "react.js" and "react-dom.js" source files that are used by devtools, rather than including a separate copy for use by Lightning.


=== 1.C. CSS files ===
==== - CSS files ====


CSS styling inside the iframe is currently provided by this file for the HTML implementation:
CSS styling inside the iframe is currently provided by this file for the HTML implementation:
Line 78: Line 78:
   % style chrome://lightning/content/lightning-item-iframe.xul chrome://calendar-common/skin/dialogs/calendar-event-dialog.css
   % style chrome://lightning/content/lightning-item-iframe.xul chrome://calendar-common/skin/dialogs/calendar-event-dialog.css


=== 2. Outside the iframe: ===
=== Outside the iframe ===


Outside the iframe things are fairly different for the tab and window dialog cases.
Outside the iframe things are fairly different for the tab and window dialog cases.


=== 2.A. XUL files ===
==== - XUL files ====


For the window dialog:
For the window dialog:
Line 98: Line 98:
The "lightning-item-toolbar.xul" file contains content related to the toolbox/toolbar that is used in both the window dialog and tab cases.  It is overlaid into the other two xul files.
The "lightning-item-toolbar.xul" file contains content related to the toolbox/toolbar that is used in both the window dialog and tab cases.  It is overlaid into the other two xul files.


=== 2.B. Javascript files ===
==== - Javascript files ====


For both the window dialog and the tab:
For both the window dialog and the tab:
Line 104: Line 104:
   calendar/lightning/content/lightning-item-panel.js
   calendar/lightning/content/lightning-item-panel.js


=== 2.C. CSS files ===
==== - CSS files ====


For the window dialog case these CSS files (along with other OS-specific files) are included in calendar/base/content/dialogs/calendar-event-dialog.xul and also via calendar/base/jar.mn
For the window dialog case these CSS files (along with other OS-specific files) are included in calendar/base/content/dialogs/calendar-event-dialog.xul and also via calendar/base/jar.mn
Line 116: Line 116:
   calendar/base/content/dialogs/calendar-event-dialog.css
   calendar/base/content/dialogs/calendar-event-dialog.css


=== 3.A. Differences between tab and window dialog implementations ===
=== Differences between tab and window dialog implementations ===


The window dialog case is fairly straightforward.  The xul file is loaded in a dialog window and the js and css files are used for that xul file in that window.
The window dialog case is fairly straightforward.  The xul file is loaded in a dialog window and the js and css files are used for that xul file in that window.
Line 136: Line 136:
   calendar/lightning/content/messenger-overlay-sidebar.js
   calendar/lightning/content/messenger-overlay-sidebar.js


=== 3.B. Load handling for iframe and parent context ===
=== Load handling for iframe and parent context ===


In general, when the content of an iframe is defined directly in the XUL or HTML file that contains the iframe, the load event for the iframe's content fires before the load event of its parent context.
In general, when the content of an iframe is defined directly in the XUL or HTML file that contains the iframe, the load event for the iframe's content fires before the load event of its parent context.
Line 150: Line 150:
So in the parent context's load handler this information is placed at, for example, "iframe.contentWindow.gTimezonesEnabled" where it is accessible inside the iframe.  This lets us restrict the access that the iframe has to its parent context to only message passing.  At some point this will allow us to make the code inside the iframe run with reduced privileges, like a website in a browser.
So in the parent context's load handler this information is placed at, for example, "iframe.contentWindow.gTimezonesEnabled" where it is accessible inside the iframe.  This lets us restrict the access that the iframe has to its parent context to only message passing.  At some point this will allow us to make the code inside the iframe run with reduced privileges, like a website in a browser.


=== 3.C. State of HTML Implementation ===
=== State of HTML Implementation ===


The HTML implementation, based on React.js is still in early stages of development, basically a starting point to build on. For example, saving an event/task does not work yet.  When loading existing events or tabs, only some of the data is loaded. The more complicated elements of the dialog still need implementing, like the date picker, etc.  The appearance and CSS styling still has a long way to go.  That said, the responsive design part works and the interaction with some of the toolbar buttons works (privacy, priority, etc.).   
The HTML implementation, based on React.js is still in early stages of development, basically a starting point to build on. For example, saving an event/task does not work yet.  When loading existing events or tabs, only some of the data is loaded. The more complicated elements of the dialog still need implementing, like the date picker, etc.  The appearance and CSS styling still has a long way to go.  That said, the responsive design part works and the interaction with some of the toolbar buttons works (privacy, priority, etc.).   
Pmorris
52

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1144965"