add missing parts and make it super fast

core/modules/startup/render.js

@@ -21,6 +21,7 @@ exports.synchronous = true;
 // Default story and history lists
 var PAGE_TITLE_TITLE = "$:/core/wiki/title";
 var PAGE_STYLESHEET_TITLE = "$:/core/ui/PageStylesheet";
+var ROOT_STYLESHEET_TITLE = "$:/core/ui/RootStylesheet";
 var PAGE_TEMPLATE_TITLE = "$:/core/ui/RootTemplate";
 
 // Time (in ms) that we defer refreshing changes to draft tiddlers
@@ -43,21 +44,11 @@ exports.startup = function() {
 		}
 	});
 	// Set up the styles
-	$tw.styleWidgetNode = $tw.wiki.makeTranscludeWidget(PAGE_STYLESHEET_TITLE,{document: $tw.fakeDocument});
-	$tw.styleContainer = $tw.fakeDocument.createElement("style");
-	$tw.styleWidgetNode.render($tw.styleContainer,null);
-	$tw.styleWidgetNode.assignedStyles = $tw.styleContainer.textContent;
-	$tw.styleElement = document.createElement("style");
-	$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-	document.head.insertBefore($tw.styleElement,document.head.firstChild);
+	var styleParser = $tw.wiki.parseTiddler(ROOT_STYLESHEET_TITLE,{parseAsInline: true}),
+		styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: document});
+	styleWidgetNode.render(document.head,null);
 	$tw.wiki.addEventListener("change",$tw.perf.report("styleRefresh",function(changes) {
-		if($tw.styleWidgetNode.refresh(changes,$tw.styleContainer,null)) {
-			var newStyles = $tw.styleContainer.textContent;
-			if(newStyles !== $tw.styleWidgetNode.assignedStyles) {
-				$tw.styleWidgetNode.assignedStyles = newStyles;
-				$tw.styleElement.innerHTML = $tw.styleWidgetNode.assignedStyles;
-			}
-		}
+		styleWidgetNode.refresh(changes,document.head,null);
 	}));
 	// Display the $:/core/ui/PageTemplate tiddler to kick off the display
 	$tw.perf.report("mainRender",function() {

core/modules/startup/windows.js

@@ -64,24 +64,16 @@ exports.startup = function() {
 			$tw.wiki.removeEventListener("change",refreshHandler);
 		},false);
 		// Set up the styles
-		var styleWidgetNode = $tw.wiki.makeTranscludeWidget("$:/core/ui/PageStylesheet",{
-				document: $tw.fakeDocument,
-				variables: variables,
-				importPageMacros: true}),
-			styleContainer = $tw.fakeDocument.createElement("style");
-		styleWidgetNode.render(styleContainer,null);
-		var styleElement = srcDocument.createElement("style");
-		styleElement.innerHTML = styleContainer.textContent;
-		srcDocument.head.insertBefore(styleElement,srcDocument.head.firstChild);
+		var styleParser = $tw.wiki.parseTiddler("$:/core/ui/RootStylesheet",{parseAsInline: true}),
+			styleWidgetNode = $tw.wiki.makeWidget(styleParser,{document: srcDocument});
+		styleWidgetNode.render(srcDocument.head,null);
 		// Render the text of the tiddler
 		var parser = $tw.wiki.parseTiddler(template),
 			widgetNode = $tw.wiki.makeWidget(parser,{document: srcDocument, parentWidget: $tw.rootWidget, variables: variables});
 		widgetNode.render(srcDocument.body,srcDocument.body.firstChild);
 		// Function to handle refreshes
 		refreshHandler = function(changes) {
-			if(styleWidgetNode.refresh(changes,styleContainer,null)) {
-				styleElement.innerHTML = styleContainer.textContent;
-			}
+			styleWidgetNode.refresh(changes);
 			widgetNode.refresh(changes);
 		};
 		$tw.wiki.addEventListener("change",refreshHandler);

core/modules/widgets/refresh-blocker.js

@@ -0,0 +1,61 @@
+/*\
+title: $:/core/modules/widgets/refresh-blocker.js
+type: application/javascript
+module-type: widget
+
+RefreshBlocker widget
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var RefreshBlocker = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+var RefreshBlockerWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+RefreshBlockerWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+RefreshBlockerWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	this.execute();
+	this.renderChildren(parent,null);
+};
+
+/*
+Compute the internal state of the widget
+*/
+RefreshBlockerWidget.prototype.execute = function() {
+	// Make child widgets
+	this.makeChildWidgets();
+};
+
+RefreshBlockerWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	var refreshBlockerList = this.wiki.filterTiddlers(this.getAttribute("refreshBlockerList"));
+	if(refreshBlockerList && (this.getAttribute("enabled") === "yes")  && $tw.utils.hopArray(changedTiddlers,refreshBlockerList)) {
+		console.log("false");
+		return false;
+	} else {
+		return this.refreshChildren(changedTiddlers);
+	}
+};
+
+exports["refresh-blocker"] = RefreshBlockerWidget;
+
+})();

core/modules/widgets/view.js

@@ -18,6 +18,89 @@ var ViewWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
 
+var ViewHandler = function(widget) {
+	this.wiki = widget.wiki;
+	this.widget = widget;
+	this.document = widget.document;
+};
+
+/*
+Base ViewHandler render method
+*/
+ViewHandler.prototype.render = function(parent,nextSibling) {
+	this.text = this.getValue();
+	this.createTextNode(parent,nextSibling);
+};
+
+/*
+Base ViewHandler render method for wikified views
+*/
+ViewHandler.prototype.renderWikified = function(parent,nextSibling) {
+	this.createFakeWidget();
+	this.text = this.getValue();
+	this.createWikifiedTextNode(parent,nextSibling);
+};
+
+/*
+ViewHandler method to create a simple text node
+*/
+ViewHandler.prototype.createTextNode = function(parent,nextSibling) {
+	if(this.text) {
+		var textNode = this.document.createTextNode(this.text);
+		parent.insertBefore(textNode,nextSibling);
+		this.widget.domNodes.push(textNode);
+	} else {
+		this.widget.makeChildWidgets();
+		this.widget.renderChildren(parent,nextSibling);
+	}
+};
+
+/*
+ViewHandler method to always create a text node, even if there's no text
+*/
+ViewHandler.prototype.createWikifiedTextNode = function(parent,nextSibling) {
+	var textNode = this.document.createTextNode(this.text || "");
+	parent.insertBefore(textNode,nextSibling);
+	this.widget.domNodes.push(textNode);
+};
+
+/*
+ViewHandler method to create a fake widget used by wikified views
+*/
+ViewHandler.prototype.createFakeWidget = function() {
+	this.fakeWidget = this.wiki.makeTranscludeWidget(this.widget.viewTitle,{
+		document: $tw.fakeDocument,
+		field: this.widget.viewField,
+		index: this.widget.viewIndex,
+		parseAsInline: this.widget.viewMode !== "block",
+		mode: this.widget.viewMode === "block" ? "block" : "inline",
+		parentWidget: this.widget,
+		subTiddler: this.widget.viewSubTiddler
+	});
+	this.fakeNode = $tw.fakeDocument.createElement("div");
+	this.fakeWidget.makeChildWidgets();
+	this.fakeWidget.render(this.fakeNode,null);
+};
+
+ViewHandler.prototype.refreshWikified = function(changedTiddlers) {
+	var refreshed = this.fakeWidget.refresh(changedTiddlers);
+	if(refreshed) {
+		var newText = this.getValue();
+		if(newText !== this.text) {
+			this.widget.domNodes[0].textContent = newText;
+			this.text = newText;
+		}
+	}
+	return refreshed;
+};
+
+/*
+Base ViewHandler refresh method
+*/
+ViewHandler.prototype.refresh = function(changedTiddlers) {
+	return false;
+};
+
 /*
 Inherit from the base widget class
 */
@@ -30,14 +113,8 @@ ViewWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
-	if(this.text) {
-		var textNode = this.document.createTextNode(this.text);
-		parent.insertBefore(textNode,nextSibling);
-		this.domNodes.push(textNode);
-	} else {
-		this.makeChildWidgets();
-		this.renderChildren(parent,nextSibling);
-	}
+	this.view = this.getView(this.viewFormat);
+	this.view.render(parent,nextSibling);
 };
 
 /*
@@ -52,49 +129,238 @@ ViewWidget.prototype.execute = function() {
 	this.viewFormat = this.getAttribute("format","text");
 	this.viewTemplate = this.getAttribute("template","");
 	this.viewMode = this.getAttribute("mode","block");
-	switch(this.viewFormat) {
-		case "htmlwikified":
-			this.text = this.getValueAsHtmlWikified(this.viewMode);
-			break;
-		case "plainwikified":
-			this.text = this.getValueAsPlainWikified(this.viewMode);
-			break;
-		case "htmlencodedplainwikified":
-			this.text = this.getValueAsHtmlEncodedPlainWikified(this.viewMode);
-			break;
-		case "htmlencoded":
-			this.text = this.getValueAsHtmlEncoded();
-			break;
-		case "htmltextencoded":
-			this.text = this.getValueAsHtmlTextEncoded();
-			break;
-		case "urlencoded":
-			this.text = this.getValueAsUrlEncoded();
-			break;
-		case "doubleurlencoded":
-			this.text = this.getValueAsDoubleUrlEncoded();
-			break;
-		case "date":
-			this.text = this.getValueAsDate(this.viewTemplate);
-			break;
-		case "relativedate":
-			this.text = this.getValueAsRelativeDate();
-			break;
-		case "stripcomments":
-			this.text = this.getValueAsStrippedComments();
-			break;
-		case "jsencoded":
-			this.text = this.getValueAsJsEncoded();
-			break;
-		default: // "text"
-			this.text = this.getValueAsText();
-			break;
-	}
 };
 
 /*
-The various formatter functions are baked into this widget for the moment. Eventually they will be replaced by macro functions
+Initialise the view subclasses
 */
+ViewWidget.prototype.getView = function(format) {
+	var View = this.initialiseView();
+	View.prototype = Object.create(ViewHandler.prototype);
+	switch(format) {
+		case "htmlwikified":
+			View = this.initialiseHTMLWikifiedView(View);
+			break;
+		case "plainwikified":
+			View = this.initialisePlainWikifiedView(View);
+			break;
+		case "htmlencodedplainwikified":
+			View = this.initialiseHTMLEncodedPlainWikifiedView(View);
+			break;
+		case "htmlencoded":
+			View = this.initialiseHTMLEncodedView(View);
+			break;
+		case "htmltextencoded":
+			View = this.initialiseHTMLTextEncodedView(View);
+			break;
+		case "urlencoded":
+			View = this.initialiseURLEncodedView(View);
+			break;
+		case "doubleurlencoded":
+			View = this.initialiseDoubleURLEncodedView(View);
+			break;
+		case "date":
+			View = this.initialiseDateView(View);
+			break;
+		case "relativedate":
+			View = this.initialiseRelativeDateView(View);
+			break;
+		case "stripcomments":
+			View = this.initialiseStripCommentsView(View);
+			break;
+		case "jsencoded":
+			View = this.initialiseJSEncodedView(View);
+			break;
+		default: // "text"
+			View = this.initialiseTextView(View);
+			break;
+	};
+	return new View(this);
+};
+
+/*
+Return the function to intitialise the view subclass
+*/
+ViewWidget.prototype.initialiseView = function() {
+	return function(widget) {
+		ViewHandler.call(this,widget);
+	};
+};
+
+/*
+Initialise HTML wikified view methods
+*/
+ViewWidget.prototype.initialiseHTMLWikifiedView = function(View) {
+
+	View.prototype.render = function(parent,nextSibling) {
+		this.renderWikified(parent,nextSibling);
+	};
+
+	View.prototype.getValue = function() {
+		return this.fakeNode.innerHTML;
+	};
+
+	View.prototype.refresh = function(changedTiddlers) {
+		return this.refreshWikified(changedTiddlers);
+	};
+	return View;
+};
+
+/*
+Initialise plain wikified view methods
+*/
+ViewWidget.prototype.initialisePlainWikifiedView = function(View) {
+
+	View.prototype.render = function(parent,nextSibling) {
+		this.renderWikified(parent,nextSibling);
+	};
+
+	View.prototype.getValue = function() {
+		return this.fakeNode.textContent;
+	};
+
+	View.prototype.refresh = function(changedTiddlers) {
+		return this.refreshWikified(changedTiddlers);
+	};
+	return View;
+};
+
+/*
+Initialise HTML encoded plain wikified methods
+*/
+ViewWidget.prototype.initialiseHTMLEncodedPlainWikifiedView = function(View) {
+	
+	View.prototype.render = function(parent,nextSibling) {
+		this.renderWikified(parent,nextSibling);
+	};
+
+	View.prototype.getValue = function() {
+		return $tw.utils.htmlEncode(this.fakeNode.textContent);
+	};
+
+	View.prototype.refresh = function(changedTiddlers) {
+		return this.refreshWikified(changedTiddlers);
+	};
+	return View;
+};
+
+/*
+Initialise HTML encoded mehods
+*/
+ViewWidget.prototype.initialiseHTMLEncodedView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return $tw.utils.htmlEncode(self.getValueAsText());
+	};
+	return View;
+};
+
+/*
+Initialise HTML text encoded mehods
+*/
+ViewWidget.prototype.initialiseHTMLTextEncodedView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return $tw.utils.htmlTextEncode(self.getValueAsText());
+	};
+	return View;
+};
+
+/*
+Initialise URL encoded mehods
+*/
+ViewWidget.prototype.initialiseURLEncodedView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return $tw.utils.encodeURIComponentExtended(self.getValueAsText());
+	};
+	return View;
+};
+
+/*
+Initialise double URL encoded mehods
+*/
+ViewWidget.prototype.initialiseDoubleURLEncodedView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return $tw.utils.encodeURIComponentExtended($tw.utils.encodeURIComponentExtended(self.getValueAsText()));
+	};
+	return View;
+};
+
+/*
+Initialise date mehods
+*/
+ViewWidget.prototype.initialiseDateView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		var format = self.viewTemplate || "YYYY MM DD 0hh:0mm";
+		var value = $tw.utils.parseDate(self.getValue());
+		if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
+			return $tw.utils.formatDateString(value,format);
+		} else {
+			return "";
+		}
+	};
+	return View;
+};
+
+/*
+Initialise relative date mehods
+*/
+ViewWidget.prototype.initialiseRelativeDateView = function(View) {
+	var self = this;
+	View.prototype.getValue = function(format) {
+		var value = $tw.utils.parseDate(self.getValue());
+		if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
+			return $tw.utils.getRelativeDate((new Date()) - (new Date(value))).description;
+		} else {
+			return "";
+		}
+	};
+	return View;
+};
+
+/*
+Initialise stripcomments mehods
+*/
+ViewWidget.prototype.initialiseStripCommentsView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		var lines = self.getValueAsText().split("\n"),
+			out = [];
+		for(var line=0; line<lines.length; line++) {
+			var text = lines[line];
+			if(!/^\s*\/\/#/.test(text)) {
+				out.push(text);
+			}
+		}
+		return out.join("\n");
+	};
+	return View;
+};
+
+/*
+Initialise JS encoded mehods
+*/
+ViewWidget.prototype.initialiseJSEncodedView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return $tw.utils.stringify(self.getValueAsText());
+	};
+	return View;
+};
+
+/*
+Initialise text mehods
+*/
+ViewWidget.prototype.initialiseTextView = function(View) {
+	var self = this;
+	View.prototype.getValue = function() {
+		return self.getValueAsText();
+	};
+	return View;
+};
 
 /*
 Retrieve the value of the widget. Options are:
@@ -138,78 +404,6 @@ ViewWidget.prototype.getValueAsText = function() {
 	return this.getValue({asString: true});
 };
 
-ViewWidget.prototype.getValueAsHtmlWikified = function(mode) {
-	return this.wiki.renderText("text/html","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	});
-};
-
-ViewWidget.prototype.getValueAsPlainWikified = function(mode) {
-	return this.wiki.renderText("text/plain","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	});
-};
-
-ViewWidget.prototype.getValueAsHtmlEncodedPlainWikified = function(mode) {
-	return $tw.utils.htmlEncode(this.wiki.renderText("text/plain","text/vnd.tiddlywiki",this.getValueAsText(),{
-		parseAsInline: mode !== "block",
-		parentWidget: this
-	}));
-};
-
-ViewWidget.prototype.getValueAsHtmlEncoded = function() {
-	return $tw.utils.htmlEncode(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsHtmlTextEncoded = function() {
-	return $tw.utils.htmlTextEncode(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsUrlEncoded = function() {
-	return $tw.utils.encodeURIComponentExtended(this.getValueAsText());
-};
-
-ViewWidget.prototype.getValueAsDoubleUrlEncoded = function() {
-	return $tw.utils.encodeURIComponentExtended($tw.utils.encodeURIComponentExtended(this.getValueAsText()));
-};
-
-ViewWidget.prototype.getValueAsDate = function(format) {
-	format = format || "YYYY MM DD 0hh:0mm";
-	var value = $tw.utils.parseDate(this.getValue());
-	if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
-		return $tw.utils.formatDateString(value,format);
-	} else {
-		return "";
-	}
-};
-
-ViewWidget.prototype.getValueAsRelativeDate = function(format) {
-	var value = $tw.utils.parseDate(this.getValue());
-	if(value && $tw.utils.isDate(value) && value.toString() !== "Invalid Date") {
-		return $tw.utils.getRelativeDate((new Date()) - (new Date(value))).description;
-	} else {
-		return "";
-	}
-};
-
-ViewWidget.prototype.getValueAsStrippedComments = function() {
-	var lines = this.getValueAsText().split("\n"),
-		out = [];
-	for(var line=0; line<lines.length; line++) {
-		var text = lines[line];
-		if(!/^\s*\/\/#/.test(text)) {
-			out.push(text);
-		}
-	}
-	return out.join("\n");
-};
-
-ViewWidget.prototype.getValueAsJsEncoded = function() {
-	return $tw.utils.stringify(this.getValueAsText());
-};
-
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
@@ -219,7 +413,7 @@ ViewWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	} else {
-		return false;
+		return this.view.refresh(changedTiddlers);
 	}
 };
 

core/ui/PageTemplate/alerts.tid

@@ -1,8 +1,12 @@
 title: $:/core/ui/PageTemplate/alerts
 tags: $:/tags/PageTemplate
 
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <div class="tc-alerts">
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/Alert]!has[draft.of]]" template="$:/core/ui/AlertTemplate" storyview="pop"/>
 
 </div>
+
+</$refresh-blocker>

core/ui/PageTemplate/drafts.tid

@@ -2,6 +2,7 @@ title: $:/core/ui/PageTemplate/drafts
 tags: $:/tags/PageTemplate
 
 \whitespace trim
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
 <$reveal state="$:/status/IsReadOnly" type="nomatch" text="yes" tag="div" class="tc-drafts-list">
 <$list filter="[has[draft.of]!sort[modified]] -[list[$:/StoryList]]">
 <$link>
@@ -9,3 +10,4 @@ tags: $:/tags/PageTemplate
 </$link>
 </$list>
 </$reveal>
+</$refresh-blocker>

core/ui/PageTemplate/pluginreloadwarning.tid

@@ -3,6 +3,8 @@ tags: $:/tags/PageTemplate
 
 \define lingo-base() $:/language/
 
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <$list filter="[{$:/status/RequireReloadDueToPluginChange}match[yes]]">
 
 <$reveal type="nomatch" state="$:/temp/HidePluginWarning" text="yes">
@@ -20,3 +22,5 @@ tags: $:/tags/PageTemplate
 </$reveal>
 
 </$list>
+
+</$refresh-blocker>

core/ui/PageTemplate/sidebar.tid

@@ -20,6 +20,8 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
 
 <% endif %>
 
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <$scrollable fallthrough="no" class="tc-sidebar-scrollable">
 
 <div class="tc-sidebar-header">
@@ -42,4 +44,6 @@ $:/config/SideBarSegments/Visibility/$(listItem)$
 
 </$scrollable>
 
+</$refresh-blocker>
+
 </$eventcatcher>

core/ui/PageTemplate/story.tid

@@ -2,6 +2,8 @@ title: $:/core/ui/PageTemplate/story
 tags: $:/tags/PageTemplate
 
 \whitespace trim
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <section class="tc-story-river" role="main">
 
 <section class="story-backdrop">
@@ -27,3 +29,5 @@ tags: $:/tags/PageTemplate
 </section>
 
 </section>
+
+</$refresh-blocker>

core/ui/PageTemplate/topleftbar.tid

@@ -1,6 +1,8 @@
 title: $:/core/ui/PageTemplate/topleftbar
 tags: $:/tags/PageTemplate
 
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <span class="tc-topbar tc-topbar-left">
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/TopLeftBar]!has[draft.of]]" variable="listItem" storyview="pop">
@@ -10,3 +12,5 @@ tags: $:/tags/PageTemplate
 </$list>
 
 </span>
+
+</$refresh-blocker>

core/ui/PageTemplate/toprightbar.tid

@@ -1,6 +1,8 @@
 title: $:/core/ui/PageTemplate/toprightbar
 tags: $:/tags/PageTemplate
 
+<$refresh-blocker refreshBlockerList="[[$:/state/sidebar/dimensions]]" enabled={{{ [[$:/state/sidebar/resizing]!is[missing]then[yes]] }}}>
+
 <span class="tc-topbar tc-topbar-right">
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/TopRightBar]!has[draft.of]]" variable="listItem" storyview="pop">
@@ -10,3 +12,5 @@ tags: $:/tags/PageTemplate
 </$list>
 
 </span>
+
+</$refresh-blocker>

core/ui/RootStylesheet.tid

@@ -0,0 +1,12 @@
+title: $:/core/ui/RootStylesheet
+code-body: yes
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+\whitespace trim
+<$let currentTiddler={{$:/language}} languageTitle={{!!name}}>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!is[draft]]">
+		<style type="text/css">
+			<$view format={{{ [<currentTiddler>tag[$:/tags/Stylesheet/Static]then[text]else[plainwikified]] }}} mode="block"/>
+		</style>
+	</$list>
+</$let>

core/wiki/config/PerformanceInstrumentation.tid

@@ -1,2 +1,2 @@
 title: $:/config/Performance/Instrumentation
-text: no
+text: yes

themes/tiddlywiki/snowwhite/base.tid

@@ -5,7 +5,9 @@ tags: [[$:/tags/Stylesheet]]
 <$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
 \end
 
-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
+
+<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
 
 .tc-sidebar-header {
 	text-shadow: 0 1px 0 <<colour sidebar-foreground-shadow>>;
@@ -112,3 +114,5 @@ canvas.tc-edit-bitmapeditor  {
 .tc-plugin-info {
 	<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
 }
+
+</$refresh-blocker>

themes/tiddlywiki/vanilla/base.tid

@@ -63,7 +63,9 @@ $else$
 </$set>
 \end
 
-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock html
+
+<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
 
 /*
 ** Start with the normalize CSS reset, and then belay some of its effects
@@ -1018,8 +1020,12 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
+</$refresh-blocker>
+
 @media (min-width: <<sidebarbreakpoint>>) {
 
+	<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
+
 	.tc-message-box {
 		margin: 21px -21px 21px -21px;
 	}
@@ -1051,6 +1057,8 @@ button.tc-btn-invisible.tc-remove-tag-button {
 		padding: 42px 0px 42px 42px;
 	}
 
+	</$refresh-blocker>
+
 <<if-no-sidebar "
 
 	.tc-story-river {
@@ -1067,6 +1075,8 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 }
 
+<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
+
 @media print {
 
 	body.tc-body {
@@ -1156,13 +1166,20 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
+</$refresh-blocker>
+
 @media (min-width: <<sidebarbreakpoint>>) {
+
+	<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
+
 	.tc-tiddler-frame {
 		padding: 28px 42px 42px 42px;
 		width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
 		border-radius: 2px;
 	}
 
+	</$refresh-blocker>
+
 <<if-no-sidebar "
 
 	.tc-tiddler-frame {
@@ -1176,6 +1193,8 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	}
 }
 
+<$refresh-blocker refreshBlockerList="[all[tiddlers+shadows]prefix[$:/state/]] [all[tiddlers+shadows]prefix[$:/temp/]]" enabled="yes">
+
 .tc-site-title,
 .tc-titlebar {
 	font-weight: normal;
@@ -3562,3 +3581,4 @@ span.tc-translink > a:first-child {
 	margin-bottom: 3px;
 }
 
+</$refresh-blocker>