1272540 - (event-in-a-tab) [meta][GSoC 2016] Calendar: Event in a Tab

Status: NEW

(Calendar :: Calendar Frontend, enhancement)

Description

[Paul Morris [:pmorris]]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160425114621

Steps to reproduce:

This bug will track the Google Summer of Code 2016 work that Paul is doing.

Project summary:  Currently, events and tasks are created and edited in a dialog window. This project will add the option to create and edit them in a tab instead, providing more room and flexibility for the UI design. A supplemental goal is to explore implementing this feature in HTML/CSS/Javascript rather than XUL. By using a responsive design, an HTML-based implementation could fully replace the current XUL-based event dialog. The UI could change depending on the width of the viewport, providing either a wider (tab) view or a narrower (dialog window) view. 

Wiki page: https://wiki.mozilla.org/Calendar:Event_in_a_Tab

High level progress updates: https://blog.mozilla.org/calendar/tag/gsoc/

Comment 1

[Philipp Kewisch [:Fallen][📱📆]]

Thanks for filing this bug. I may be adding the one or other dependent bug here. Please note that not all of the dependent bugs need to be fixed for the project to be a success, some might just be followup and good to keep in mind while implementing

Comment 2

[Paul Morris [:pmorris]]

SUMMARY OF WORK FOR GOOGLE SUMMER OF CODE

This comment is the official summary of my work on the "Event in a Tab" project for Google Summer of Code 2016, as required by the final submission guidelines.

I completed the main goal of adding a tab-based UI for editing events and tasks, alongside the existing window dialog UI.  This entailed moving most of the UI into an iframe and using message passing for communication between the inside and outside of the iframe.  I also designed a new version of the UI and created a preliminary (work-in-progress) implementation of this new design using HTML and React.js (rather than XUL), which was a secondary goal of the project.

My coding work has been merged into the Calendar/Lightning code base, reviewed and flagged to be merged, or for a couple of the most recent patches is still pending review.  This page is the tracking bug for the project with links out to other bugs where the code I wrote can be found.


These are the bugs for the project (the first one is this tracking bug):

Bug 1272540 - (event-in-a-tab) [meta][GSoC 2016] Calendar: Event in a Tab 

Bug 1277972 - [GSoC 2016] Port the current UI for editing events and tasks to a tab

Bug 1283623 - [GSoC 2016] Fix issues in the UI for editing events/tasks in a tab

Bug 1295525 - Event capture/edit dialog not working when cloud attachment provider is configured and enabled

Bug 1295089 - In mail view elements in statusbar are shifted to the left

Bug 1291991 - Attendees context menu is missing two items for sending email to attendees

Bug 1294534 - [GSOC 2016] Implement the new design of the UI for editing events and tasks in HTML

Bug 1296823 - [GSOC 2016] Event/task UI: refactor iframe load handling and remove use of 'parent'

Bug 1295392 - [GSOC 2016] Simplify iframe message passing code for event/task in a tab

Bug 1297392 - [GSOC 2016] Missing CSS file for the HTML UI for events/tasks


These are bugs for additional follow-up work, and there also remains more to be done on the HTML implementation:

Bug 1297423 - Prevent opening more than one tab for a given event/task

Bug 1297425 - Offer a way to save an event/task in a tab without closing the tab

Bug 1297426 - The todaypane's shown/hidden state should be separate for mail, event, and task tabs

Bug 1294926 - Write mozmill tests for the UI for editing events/tasks in a tab

Bug 1294924 - Allow read-only events and tasks to be opened in a tab 

Bug 1295861 - Item dialog: attachments context menu does not offer cloud provider options


I wrote some documentation that is a high-level guide to this part of the code base and touches on some of the challenges and the current state of the HTML/React.js implementation:

https://wiki.mozilla.org/Calendar:Event_in_a_Tab/documentation


This is the wiki page that briefly describes the project and documents the work I did on the new UI design, including a number of mockups I created as part of the process:

https://wiki.mozilla.org/Calendar:Event_in_a_Tab


I wrote four posts for the Mozilla Calendar Project Blog which describe my experience and some of the challenges:

Getting Oriented
https://blog.mozilla.org/calendar/2016/05/gsoc-2016-getting-oriented/

First Steps
https://blog.mozilla.org/calendar/2016/06/gsoc-2016-first-steps/

Seeking Feedback on UI Design
https://blog.mozilla.org/calendar/2016/06/gsoc-2016-seeking-feedback-on-ui-design/

Wrapping Up
http://blog.mozilla.org/calendar/2016/08/gsoc-2016-wrapping-up/


Many thanks to my mentors Philipp Kewisch (Fallen) and MakeMyDay for their guidance and tireless willingness to answer my questions and review code.  Also thanks to Richard Marti (Paenglab) for his feedback on the UI design work.  It has been a good summer of coding.  I learned a lot, enjoyed contributing, and hope to continue to contribute as time permits.