Make calendar usable again for light-on-dark themes in the trunk (bug 283101). r=stuart. Not part of the default build.

calendar/resources/content/calendar.js

@@ -87,9 +87,6 @@ var gEventSource = null;
 // single global instance of CalendarWindow
 var gCalendarWindow;
 
-// style sheet number for calendar
-var gCalendarStyleSheet;
-
 //an array of indexes to boxes for the week view
 var gHeaderDateItemArray = null;
 
@@ -152,12 +149,12 @@ var categoryPrefObserver =
         }
       }
 
-      var catergoryPrefBranch = prefService.getBranch("calendar.category.color.");
+      var categoryPrefBranch = prefService.getBranch("calendar.category.color.");
       var prefCount = { value: 0 };
-      var prefArray = catergoryPrefBranch.getChildList("", prefCount);
+      var prefArray = categoryPrefBranch.getChildList("", prefCount);
       for (i = 0; i < prefArray.length; ++i) {
          var prefName = prefArray[i];
-         var prefValue = catergoryPrefBranch.getCharPref(prefName);
+         var prefValue = categoryPrefBranch.getCharPref(prefName);
          this.mCalendarStyleSheet.insertRule(".event-category-" + prefName + " { border-color: " + prefValue +" !important; }", 1);
       }
    }
@@ -193,7 +190,7 @@ function calendarInit()
    	
    checkForMailNews();
 
-    //updateColors();
+   updateColors();
 }
 
 function updateColors()
@@ -202,89 +199,71 @@ function updateColors()
     // initialize calendar color style rules in the calendar's styleSheet
 
     // find calendar's style sheet index
-   var i;
-   for (i=0; i<document.styleSheets.length; i++)
-   {
-      if (document.styleSheets[i].href.match(/chrome.*\/skin.*\/calendar.css$/))
-      {
-          gCalendarStyleSheet = document.styleSheets[i];
+    for (var i in document.styleSheets) {
+        if (document.styleSheets[i].href.match(
+                /chrome.*\/skin.*\/calendar.css$/ )) {
+            var calStyleSheet = document.styleSheets[i];
             break;
         }
     }
 
-   var calendarNode;
-   var containerName;
-   var calendarColor;
+    // get the list of all calendars from the manager
+    const calMgr = getCalendarManager();
+    var count = {};
+    var calendars = calMgr.getCalendars(count);
     
-   // loop through the calendars via the rootSequence of the RDF datasource
-   var seq = gCalendarWindow.calendarManager.rdf.getRootSeq("urn:calendarcontainer");
-   var list = seq.getSubNodes();
-   var calListItems = document.getElementById( "list-calendars-listbox" ).getElementsByTagName("listitem");
+    var calListItems = document.getElementById( "list-calendars-listbox" )
+        .getElementsByTagName("listitem");
 
-   for(i=0; i<list.length;i++)
-   {
+    for(i in calendars) {
+        // XXX need to get this from the calendar prefs
+        const containerName = "default";
 
-     calendarNode = gCalendarWindow.calendarManager.rdf.getNode( list[i].subject );
-     
-     // grab the container name and use it for the name of the style rule
-     containerName = list[i].subject.split(":")[2];
-
-     // obtain calendar color from the rdf datasource
-     calendarColor = calendarNode.getAttribute("http://home.netscape.com/NC-rdf#color");
+        // XXX need to get this from the calendar prefs
+        const calendarColor = "#FFFFFF"; // XXX what is default?
 
         // if the calendar had a color attribute create a style sheet for it
-     if (calendarColor != null)
-     {
-       gCalendarStyleSheet.insertRule("." + containerName + " { background-color:" + calendarColor + "!important;}", 1);
-
-       var calcColor = calendarColor.replace(/#/g, "");
-       var red = parseInt(calcColor.substring(0, 2), 16);
-       var green = parseInt(calcColor.substring(2, 4), 16);
-       var blue = parseInt(calcColor.substring(4, 6), 16);
-
-       // Calculate the L(ightness) value of the HSL color system.
-       // L = (max(R, G, B) + min(R, G, B)) / 2
-       var max = Math.max(Math.max(red, green), blue);
-       var min = Math.min(Math.min(red, green), blue);
-       var lightness = (max + min) / 2;
-
-       // Consider all colors with less than 50% Lightness as dark colors
-       // and use white as the foreground color; otherwise use black.
-       // Actually we use a treshold a bit below 50%, so colors like
-       // #FF0000, #00FF00 and #0000FF still get black text which looked
-       // better when we tested this.
-       if (lightness < 120) {
-         gCalendarStyleSheet.insertRule("." + containerName + " { color:" + " white" + "!important;}", 1);
-       } else {
-         gCalendarStyleSheet.insertRule("." + containerName + " { color:" + " black" + "!important;}", 1);
-       }
-       var calListItem = calListItems[i+1];
+        if (calendarColor != null) {
+            calStyleSheet.insertRule("." + containerName
+                                     + " { background-color:"
+                                     + calendarColor + "!important;}", 1);
+            calStyleSheet.insertRule("." + containerName + " { color:"
+                                     + getContrastingTextColor(calendarColor)
+                                     + "!important;}", 1);
+            //dump("calListItems[0] = " + calListItems[0] + "\n");
+            //dump("calListItems[1] = " + calListItems[1] + "\n");
+            var calListItem = calListItems[i];
             if (calListItem && calListItem.childNodes[0]) {
-         calListItem.childNodes[0].setAttribute("class", "calendar-list-item-class " + containerName);
+                calListItem.childNodes[0]
+                    .setAttribute("class", "calendar-list-item-class "
+                                  + containerName);
             }
         }
     }
 
     // Setup css classes for category colors
     var catergoryPrefBranch = prefService.getBranch("");
-   var pbi = catergoryPrefBranch.QueryInterface(Components.interfaces.nsIPrefBranchInternal);
+    var pbi = catergoryPrefBranch.QueryInterface(
+        Components.interfaces.nsIPrefBranchInternal);
     pbi.addObserver("calendar.category.color.", categoryPrefObserver, false);
-   categoryPrefObserver.mCalendarStyleSheet = gCalendarStyleSheet;
+    categoryPrefObserver.mCalendarStyleSheet = calStyleSheet;
     categoryPrefObserver.observe(null, null, "");
 
-   if( ("arguments" in window) &&
-       (window.arguments.length) &&
+    if( ("arguments" in window) && (window.arguments.length) &&
         (typeof(window.arguments[0]) == "object") &&
-       ("channel" in window.arguments[0]) )
-   {
-      gCalendarWindow.calendarManager.checkCalendarURL( window.arguments[0].channel );
+        ("channel" in window.arguments[0]) ) {
+        gCalendarWindow.calendarManager.checkCalendarURL( 
+            window.arguments[0].channel );
     }
 
     // a bit of a hack since the menulist doesn't remember the selected value
     var value = document.getElementById( 'event-filter-menulist' ).value;
-   document.getElementById( 'event-filter-menulist' ).selectedItem = document.getElementById( 'event-filter-'+value );
+    document.getElementById( 'event-filter-menulist' ).selectedItem = 
+        document.getElementById( 'event-filter-'+value );
 
-   gEventSource.alarmObserver.firePendingAlarms();
+    // XXX busted somehow, so I've commented it out for now.  also, why the
+    // heck are we doing this here?
+    //gEventSource.alarmObserver.firePendingAlarms();
 
     // All is settled, enable feedbacks to observers
     gICalLib.batchMode = false;
@@ -743,7 +722,7 @@ function getCalendar()
        return selectedCalendar;
    } catch(e) {
        newCalendarDialog();
-       var selectedCalendar = calendarList.currentItem.calendar;
+       selectedCalendar = calendarList.currentItem.calendar;
        return selectedCalendar;
    }
 }
@@ -1701,3 +1680,36 @@ function addCalendarToUI(doc, calendar)
     if (calendarList.selectedIndex == -1)
         calendarList.selectedIndex = 0;
 }
+
+
+/**
+ * Pick whichever of "black" or "white" will look better when used as a text
+ * color against a background of bgColor. 
+ *
+ * @param bgColor   the background color as a "#RRGGBB" string
+ */
+function getContrastingTextColor(bgColor)
+{
+    var calcColor = bgColor.replace(/#/g, "");
+    var red = parseInt(calcColor.substring(0, 2), 16);
+    var green = parseInt(calcColor.substring(2, 4), 16);
+    var blue = parseInt(calcColor.substring(4, 6), 16);
+
+    // Calculate the L(ightness) value of the HSL color system.
+    // L = (max(R, G, B) + min(R, G, B)) / 2
+    var max = Math.max(Math.max(red, green), blue);
+    var min = Math.min(Math.min(red, green), blue);
+    var lightness = (max + min) / 2;
+
+    // Consider all colors with less than 50% Lightness as dark colors
+    // and use white as the foreground color; otherwise use black.
+    // Actually we use a threshold a bit below 50%, so colors like
+    // #FF0000, #00FF00 and #0000FF still get black text which looked
+    // better when we tested this.
+    if (lightness < 120) {
+        return "white";
+    }
+    
+    return "black";
+}
+

calendar/resources/content/calendarWindow.js

@@ -760,8 +760,8 @@ CalendarView.prototype.createEventBox = function(aItemOccurrence, aInteralFuncti
 
 CalendarView.prototype.setEventboxClass = function calView_setEventboxClass(aEventBox, aEvent, aViewType)
 {
-   var containerName = gCalendarWindow.calendarManager.getCalendarByName(
-                           aEvent.parent.server ).subject.split(":")[2];
+   // XXX this isn't really const, of course; need to get it from prefs
+   const containerName = "default";
 
    // set the event box to be of class <aViewType>-event-class
    // and the appropriate calendar-color class

calendar/resources/content/dayView.js

@@ -325,7 +325,7 @@ DayView.prototype.createAllDayEventBox = function dayview_createAllDayEventBox(
    eventBox.setAttribute( "name", "day-view-event-box-" + calendarEventDisplay.event.id );
    
    eventBox.setAttribute("class", "day-view-event-class");
-   //this.setEventboxClass( eventBox, calendarEventDisplay.event, "day-view-all-day");
+   this.setEventboxClass( eventBox, calendarEventDisplay.event, "day-view-all-day");
    
    eventBox.setAttribute( "onclick", "dayEventItemClick( this, event )" );
    eventBox.setAttribute( "ondblclick", "dayEventItemDoubleClick( this, event )" );
@@ -431,7 +431,7 @@ DayView.prototype.createEventBoxInternal = function(itemOccurrence, startDate, e
 
    // set the event box to be of class day-view-event-class and the appropriate calendar-color class
    eventBox.setAttribute("class", "day-view-event-class");
-   //this.setEventboxClass( eventBox, calEvent, "day-view");
+   this.setEventboxClass( eventBox, calEvent, "day-view");
 
    eventBox.setAttribute( "top", eventTop );
    eventBox.setAttribute( "left", eventLeft );

calendar/resources/content/monthView.js

@@ -259,13 +259,13 @@ MonthView.prototype.createEventBoxInternal = function(itemOccurrence, startDate,
     eventBox.setAttribute("name", "month-view-event-box-" + itemOccurrence.id );
     //eventBox.setAttribute( "event"+toString(calendarEventDisplay.event.id), true );
 
-    //this.setEventboxClass(eventBox, calendarEventDisplay.event, "month-view");
-    eventBox.setAttribute("class", "month-view-event-class");
+    this.setEventboxClass(eventBox, calEvent, "month-view");
+    eventBox.setAttribute("class", "month-view-event-class default");
     
     eventBox.setAttribute("eventbox", "monthview" );
     eventBox.setAttribute("onclick", "monthEventBoxClickEvent( this, event )" );
     eventBox.setAttribute("ondblclick", "monthEventBoxDoubleClickEvent( this, event )" );
-    eventBox.setAttribute("onmouseover", "gCalendarWindow.changeMouseOverInfo( calendarEventDisplay, event )" );
+//    eventBox.setAttribute("onmouseover", "gCalendarWindow.changeMouseOverInfo( calendarEventDisplay, event )" );
     eventBox.setAttribute("tooltip", "eventTooltip" );
     eventBox.setAttribute("ondraggesture", "nsDragAndDrop.startDrag(event,monthViewEventDragAndDropObserver);" );
     // add a property to the event box that holds the calendarEvent that the

calendar/resources/content/multiweekView.js

@@ -278,7 +278,7 @@ MultiweekView.prototype.createEventBoxInternal = function multiweekView_createEv
     eventBox = document.createElement( "box" );
     eventBox.setAttribute( "id", "multiweek-view-event-box-" + itemOccurrence.id );
     eventBox.setAttribute( "name", "multiweek-view-event-box-"+ itemOccurrence.id );
-    eventBox.setAttribute("class", "multiweek-view-event-class");
+    eventBox.setAttribute("class", "multiweek-view-event-class default");
     
     eventBox.setAttribute( "eventbox", "multiweekview" );
 
@@ -904,7 +904,7 @@ MultiweekView.prototype.setFictitiousEvents = function multiweekView_setFictitio
   // Make a box item to hold the event
   var eventBox = document.createElement( "box" );
   eventBox.setAttribute( "id", "multiweek-view-event-box-fictitious" );
-  eventBox.setAttribute( "class", "multiweek-view-event-class" );
+  eventBox.setAttribute( "class", "multiweek-view-event-class default" );
   eventBox.setAttribute( "eventbox", "multiweekview" );
   dayBoxItem.appendChild( eventBox );
   // Make a text item to show the event title

calendar/resources/content/weekView.js

@@ -120,7 +120,7 @@ WeekView.prototype.refreshEvents = function()
     this.highestEndHour = getIntPref(this.calendarWindow.calendarPreferences.calendarPref, "event.defaultendhour", 17);
 
     //now hide those that aren't applicable
-    for (i = 0; i < 24; i++) {
+    for (var i = 0; i < 24; i++) {
         document.getElementById("week-view-row-"+i).removeAttribute("collapsed");
     }
     for (i = 0; i < this.lowestStartHour; i++) {
@@ -406,12 +406,11 @@ dump(this.displayEndDate+"\n");
     var boxLeft = document.getElementById("week-tree-day-"+index+"-item-"+startHour).boxObject.x - 
                   document.getElementById( "week-view-content-box" ).boxObject.x +
                   ( /*calendarEventDisplay.startDrawSlot*/0 * eventSlotWidth );
-    dump(boxLeft + "\n");
+    //dump(boxLeft + "\n");
     eventBox.setAttribute("left", boxLeft);
    
     // set the event box to be of class week-view-event-class and the appropriate calendar-color class
-    //this.setEventboxClass(eventBox, calItem, "week-view");
-    eventBox.setAttribute("class", "week-view-event-class");
+    this.setEventboxClass(eventBox, calEvent, "week-view");
   
     eventBox.setAttribute("eventbox", "weekview");
     eventBox.setAttribute("dayindex", index + 1);