[PATCH] Firefox reflow fixes

[Bob McElrath]

On firefox, tiddlywiki sometimes redraws the document more than once.
This is particularly noticable on tiddlylinks after an edit. The cause
is that they are assigned the class "button" erroneously, which is then
fixed in refreshTiddlers.

Also when "edit" is first pressed, the title of the tiddler being edited
is drawn with the "tiddler" class, and later "missing" may be added,
which causes the title to flash from an upright font to an italic font
(with the default tiddlywiki styles).

Lastly I noticed that the defaultCommand in the toolbar was reflowing,
and fixed that.

So the moral of the story is...on firefox, to avoid reflows, assign the
class correctly when the element is created, rather than fixing it up or
adding classes later.

Attached is a patch against 2.0.11 (but the problems still exist in
2.1.0b4). This duplicates a bit of code so perhaps someone wants to
hack a better solution. Also there are probably other places which
cause reflows that I didn't catch. We should probably audit the use of
addClass and .className = ... Of course there are many places in the
code where the class is changed dynamically to achieve interactivity
that shouldn't be changed (such as in onMouseOver).

--
Cheers,
Bob McElrath [Univ. of California at Davis, Department of Physics]

Only after you've tried to figure something out for yourself and
failed are you ready to absorb "the answer."

[Udo Borkowski]

Hi Bob,

very nice job in tracking down the problem. I added a ticket to cover this (http://trac.tiddlywiki.org/tiddlywiki/ticket/130). I marked it with "high severity" but I am not sure if it will go into 2.1. (Jeremy?)

Many thanks for you efforts,


Udo



Bob McElrath wrote:

--- tiddlywiki-2.0.11.html	2006-06-08 08:48:36.000000000 -0700
+++ tiddlywiki-2.0.11-reflow.html	2006-08-08 23:52:12.000000000 -0700
@@ -977,6 +977,15 @@
 		else
 			{
 			var link = createTiddlyLink(w.output,w.matchText,false);
+			if(!store.tiddlerExists(w.matchText)) {
+				if(store.isShadowTiddler(w.matchText))
+					addClass(link,"shadow");
+				else
+					addClass(link,"missing");
+                        } else {
+				removeClass(link,"shadow");
+				removeClass(link,"missing");
+                        }
 			w.outputText(link,w.matchStart,w.nextMatch);
 			}
 	}
@@ -2054,12 +2063,11 @@
 		var tooltip = ro && command.readOnlyTooltip ? command.readOnlyTooltip : command.tooltip;
 		if(!ro || (ro && !command.hideReadOnly))
 			{
-			var btn = createTiddlyButton(place,text,tooltip,this.onClickCommand);
+                            var btn = createTiddlyButton(place,text,tooltip,this.onClickCommand,
+                                    theClass?"button "+theClass:null);
 			btn.setAttribute("commandName", commandName);
 			btn.setAttribute("tiddler", title);
-			if(theClass)
-				addClass(btn,theClass);
-			}
+                        }
 		}
 }
 
@@ -2853,6 +2861,15 @@
 Story.prototype.createTiddler = function(place,before,title,template)
 {
 	var theTiddler = createTiddlyElement(null,"div",this.idPrefix + title,"tiddler",null);
+        if(store.getTaggedTiddlers(title).length > 0)
+                addClass(theTiddler,"isTag");
+        if(!store.tiddlerExists(title))
+                {
+                if(store.isShadowTiddler(title))
+                        addClass(theTiddler,"shadow");
+                else
+                        addClass(theTiddler,"missing");
+                }
 	place.insertBefore(theTiddler,before);
 	this.refreshTiddler(title,template);
 	return theTiddler;
@@ -3973,7 +3990,6 @@
 function createTiddlyButton(theParent,theText,theTooltip,theAction,theClass,theId,theAccessKey)
 {
 	var theButton = document.createElement("a");
-	theButton.className = "button";
 	if(theAction)
 		{
 		theButton.onclick = theAction;
@@ -3984,6 +4000,8 @@
 		theButton.appendChild(document.createTextNode(theText));
 	if(theClass)
 		theButton.className = theClass;
+        else
+                theButton.className = "button";
 	if(theId)
 		theButton.id = theId;
 	if(theParent)
@@ -3996,10 +4014,29 @@
 function createTiddlyLink(place,title,includeText,theClass)
 {
 	var text = includeText ? title : null;
+	var subTitle, theClass = "tiddlyLink";
+	var tiddler = store.fetchTiddler(title);
+	if(tiddler)
+		{
+		subTitle = tiddler.getSubtitle();
+		theClass += " tiddlyLinkExisting";
+		}
+	else
+		{
+		subTitle = config.messages.undefinedTiddlerToolTip.format([title]);
+		theClass += " tiddlyLinkNonExisting";
+		if(store.isShadowTiddler(title))
+			{
+			subTitle = config.messages.shadowedTiddlerToolTip.format([title]);
+			theClass += " shadow";
+			}
+		else
+			subTitle = config.messages.undefinedTiddlerToolTip.format([title]);
+		}
 	var btn = createTiddlyButton(place,text,null,onClickTiddlerLink,theClass);
 	btn.setAttribute("refresh","link");
 	btn.setAttribute("tiddlyLink",title);
-	refreshTiddlyLink(btn,title);
+	btn.title = subTitle;
 	return(btn);
 }