On firefox, tiddlywiki sometimes redraws the document more than once

[UdoBorkowski]

(Reported in  posting by BobMcElrath?)

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).

[UdoBorkowski]

Patchfile supplied by BobMcElrath? to fix the problem

[JeremyRuston]

Fixed in changeset:561

[BobMcElrath]

2.1.0b6 still flashes when drawing the editor (because the height of the editor is changed after it is added to the document). The patch below (against 2.0.11 in config.macros.edit.handler) fixes that.

@@ -1949,7 +1957,7 @@
                switch(field)
                        {
                        case "title":
-                               var e = createTiddlyElement(place,"input");
+                               var e = createTiddlyElement(null,"input");
                                if(tiddler.isReadOnly())
                                        e.setAttribute("readOnly","readOnly");
                                e.setAttribute("edit","title");
@@ -1957,10 +1965,11 @@
                                e.value = tiddler.title;
                                e.setAttribute("size","40");
                                e.setAttribute("autocomplete","off");
+                                place.appendChild(e);
                                break;
                        case "text":
-                               var wrapper1 = createTiddlyElement(place,"fieldset",null,"fieldsetFix",null);
-                               var wrapper2 = createTiddlyElement(wrapper1,"div",null,null,null);
+                               var wrapper1 = createTiddlyElement(null,"fieldset",null,"fieldsetFix",null);
+                               var wrapper2 = createTiddlyElement(null,"div",null,null,null);
                                var e = createTiddlyElement(wrapper2,"textarea");
                                if(tiddler.isReadOnly())
                                        e.setAttribute("readOnly","readOnly");
@@ -1973,9 +1982,12 @@
                                rows = Math.min(rows,maxLines);
                                e.setAttribute("rows",rows);
                                e.setAttribute("edit","text");
+                                wrapper1.appendChild(wrapper2);
+                                wrapper2.appendChild(e);
+                                place.appendChild(wrapper1);
                                break;
                        case "tags":
-                               var e = createTiddlyElement(place,"input");
+                               var e = createTiddlyElement(null,"input");
                                if(tiddler.isReadOnly())
                                        e.setAttribute("readOnly","readOnly");
                                e.setAttribute("edit","tags");
@@ -1983,6 +1995,7 @@
                                e.value = tiddler.getTags();
                                e.setAttribute("size","40");
                                e.setAttribute("autocomplete","off");
+                                place.appendChild(e);
                                break;
                        }
                }

[BobMcElrath]

This patch is in my repo, Revision 608.

[JeremyRuston]

Fixed in 2.1