Open Bug 1272540 (event-in-a-tab) Opened 8 years ago Updated 2 years ago

[meta][GSoC 2016] Calendar: Event in a Tab


(Calendar :: Calendar Frontend, enhancement)



(Not tracked)


(Reporter: pmorris, Unassigned, Mentored)


(Depends on 8 open bugs)


(Keywords: meta)

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:

High level progress updates:
Mentor: philipp
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
Assignee: nobody → paul
Ever confirmed: true
Keywords: meta
Alias: event-in-a-tab
Depends on: 1277972
Depends on: 1283623
Depends on: 1294534
No longer blocks: 1273500
Depends on: 1294924
Depends on: 1294926
Depends on: 1295392
Depends on: 1295861
Depends on: 1291991
Depends on: 1296823

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:

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:

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

Getting Oriented

First Steps

Seeking Feedback on UI Design

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.
Depends on: 1297423
Depends on: 1297425
Depends on: 1297426
Depends on: 1321882
Depends on: 1321991
Depends on: 1322262
Depends on: 1322261
Depends on: 1324006
Depends on: 1355151
Depends on: 1363827
Depends on: 1366592
Depends on: 1444069
No longer depends on: 1444069
Assignee: paul → nobody
Component: General → Calendar Frontend
Type: defect → enhancement
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.