diff --git a/content/treestyletab/res/fullScreenCanvas.xul b/content/treestyletab/res/fullScreenCanvas.xul
new file mode 100644
index 00000000..3d445e96
--- /dev/null
+++ b/content/treestyletab/res/fullScreenCanvas.xul
@@ -0,0 +1,129 @@
+<?xml version="1.0"?>
+<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+         xmlns:html="http://www.w3.org/1999/xhtml">
+<script type="application/x-javascript"><![CDATA[
+
+window.addEventListener('DOMContentLoaded', function() {
+	window.removeEventListener('DOMContentLoaded', arguments.callee, true);
+
+	const currentRevision = 1;
+	var root = document.documentElement;
+
+	var loadedRevision = root.getAttribute('fullScreenCanvas');
+	if (loadedRevision) {
+		loadedRevision = Number(loadedRevision);
+		if (loadedRevision >= currentRevision) {
+			return;
+		}
+		else if (loadedRevision < currentRevision) {
+			root.setAttribute('fullScreenCanvas', currentRevision);
+			window.fullScreenCanvas.destroy();
+		}
+	}
+
+	window.fullScreenCanvas = {
+		show : function() 
+		{
+			var canvas = this.canvas;
+
+			var w = window.innerWidth;
+			var h = window.innerHeight;
+			canvas.style.width = (canvas.width = w)+'px';
+			canvas.style.height = (canvas.height = h)+'px';
+			try {
+				var ctx = canvas.getContext("2d");
+				ctx.clearRect(0, 0, w, h);
+				ctx.save();
+				ctx.drawWindow(window, 0, 0, w, h, "rgb(255,255,255)");
+				ctx.restore();
+
+				var browsers = [this.browser];
+				if ('SplitBrowser' in window) browsers = browsers.concat(SplitBrowser.browsers);
+				browsers.forEach(function(aBrowser) {
+					var b = aBrowser;
+					if (b.localName == 'subbrowser') b = b.browser;
+					var TST = b.treeStyleTab;
+					var frame = b.contentWindow;
+					var x = (b.localName == 'tabbrowser' ? b.mCurrentBrowser : b ).boxObject.x;
+					var y = (b.localName == 'tabbrowser' ? b.mCurrentBrowser : b ).boxObject.y;
+					var w = frame.innerWidth;
+					var h = frame.innerHeight;
+					var dx = 0;
+					var dy = 0;
+					if (TST &&
+						TST.autoHideEnabled &&
+						TST.tabbarShown) {
+						var pos = b.getAttribute(TST.kTABBAR_POSITION);
+						switch (pos)
+						{
+							case 'left':
+								dx = TST.tabbarWidth;
+								w -= TST.tabbarWidth;
+								break;
+							case 'right':
+								x += TST.tabbarWidth;
+								w -= TST.tabbarWidth;
+								break;
+							case 'top':
+								dy = TST.tabbarHeight;
+								h -= TST.tabbarHeight;
+								break;
+							case 'bottom':
+								y += TST.tabbarHeight;
+								h -= TST.tabbarHeight;
+								break;
+						}
+					}
+					ctx.save();
+					ctx.translate(x, y);
+					ctx.drawWindow(frame, dx+frame.scrollX, dy+frame.scrollY, w, h, "rgb(255,255,255)");
+					ctx.restore();
+				});
+
+				this.container.removeAttribute('hidden');
+			}
+			catch(e) {
+				this.container.setAttribute('hidden', true);
+			}
+		},
+
+		hide : function() 
+		{
+			this.container.setAttribute('hidden', true);
+		},
+
+		get browser() 
+		{
+			return 'SplitBrowser' in window ? window.SplitBrowser.activeBrowser :
+				window.gBrowser ;
+		},
+		get canvas()
+		{
+			return document.getElementById('fullScreenCanvas-canvas');
+		},
+		get container()
+		{
+			return document.getElementById('fullScreenCanvas-container');
+		},
+
+		destroy : function() {
+		}
+	};
+}, true);
+
+]]></script>
+
+<window id="main-window">
+	<vbox id="fullScreenCanvas-container"
+		hidden="true"
+		style="
+			position: fixed;
+			z-index: 60000;
+			top: 0;
+			left: 0;
+		">
+		<html:canvas id="fullScreenCanvas-canvas"/>
+	</vbox>
+</window>
+
+</overlay>
diff --git a/content/treestyletab/treestyletab.css b/content/treestyletab/treestyletab.css
index 8277357e..7f965ec2 100644
--- a/content/treestyletab/treestyletab.css
+++ b/content/treestyletab/treestyletab.css
@@ -106,14 +106,6 @@ tabbrowser[treestyletab-mode="multirow"] .tabbrowser-tab {
 */
 
 
-#treestyletab-fullscreen-canvas-container {
-	position: fixed;
-	z-index: 60000;
-	top: 0;
-	left: 0;
-}
-
-
 /* for some themes */
 image.tab-icon {
 	display: -moz-stack;
diff --git a/content/treestyletab/treestyletab.js b/content/treestyletab/treestyletab.js
index 26ad2bfd..2cbe2fbe 100644
--- a/content/treestyletab/treestyletab.js
+++ b/content/treestyletab/treestyletab.js
@@ -483,73 +483,6 @@ var TreeStyleTabService = {
 		this.setTreePref('allowSubtreeCollapseExpand', vertical);
 	},
  
-	showFullScreenCanvas : function() 
-	{
-		var canvas = document.getElementById('treestyletab-fullscreen-canvas');
-		var w = window.innerWidth;
-		var h = window.innerHeight;
-		canvas.style.width = (canvas.width = w)+'px';
-		canvas.style.height = (canvas.height = h)+'px';
-		try {
-			var ctx = canvas.getContext("2d");
-			ctx.clearRect(0, 0, w, h);
-			ctx.save();
-			ctx.drawWindow(window, 0, 0, w, h, "rgb(255,255,255)");
-			ctx.restore();
-
-			var browsers = [this.browser];
-			if ('SplitBrowser' in window) browsers = browsers.concat(SplitBrowser.browsers);
-			browsers.forEach(function(aBrowser) {
-				var b = aBrowser;
-				if (b.localName == 'subbrowser') b = b.browser;
-				var sv = b.treeStyleTab;
-				var frame = b.contentWindow;
-				var x = (b.localName == 'tabbrowser' ? b.mCurrentBrowser : b ).boxObject.x;
-				var y = (b.localName == 'tabbrowser' ? b.mCurrentBrowser : b ).boxObject.y;
-				var w = frame.innerWidth;
-				var h = frame.innerHeight;
-				var dx = 0;
-				var dy = 0;
-				if (sv && sv.autoHideEnabled && sv.tabbarShown) {
-					var pos = b.getAttribute(sv.kTABBAR_POSITION);
-					switch (pos)
-					{
-						case 'left':
-							dx = sv.tabbarWidth;
-							w -= sv.tabbarWidth;
-							break;
-						case 'right':
-							x += sv.tabbarWidth;
-							w -= sv.tabbarWidth;
-							break;
-						case 'top':
-							dy = sv.tabbarHeight;
-							h -= sv.tabbarHeight;
-							break;
-						case 'bottom':
-							y += sv.tabbarHeight;
-							h -= sv.tabbarHeight;
-							break;
-					}
-				}
-				ctx.save();
-				ctx.translate(x, y);
-				ctx.drawWindow(frame, dx+frame.scrollX, dy+frame.scrollY, w, h, "rgb(255,255,255)");
-				ctx.restore();
-			});
-
-			canvas.parentNode.removeAttribute('hidden');
-		}
-		catch(e) {
-			canvas.parentNode.setAttribute('hidden', true);
-		}
-	},
- 	
-	hideFullScreenCanvas : function() 
-	{
-		document.getElementById('treestyletab-fullscreen-canvas-container').setAttribute('hidden', true);
-	},
- 
 /* get tab(s) */ 
 	
 	getTabById : function(aId, aTabBrowserChildren) 
@@ -607,7 +540,7 @@ var TreeStyleTabService = {
 				aTab
 			).snapshotLength;
 	},
-  
+  	
 /* tree manipulations */ 
 	
 	get rootTabs() 
diff --git a/content/treestyletab/treestyletab.xul b/content/treestyletab/treestyletab.xul
index de9188d0..49662008 100644
--- a/content/treestyletab/treestyletab.xul
+++ b/content/treestyletab/treestyletab.xul
@@ -2,10 +2,10 @@
 <?xml-stylesheet href="treestyletab.css" type="text/css"?>
 <?xml-stylesheet href="chrome://treestyletab/skin/treestyletab.css" type="text/css"?>
 <?xul-overlay href="res/tabFx2Compatible.xul"?>
+<?xul-overlay href="res/fullScreenCanvas.xul"?>
 <!DOCTYPE overlay SYSTEM "chrome://treestyletab/locale/treestyletab.dtd">
 <overlay id="treestyletab-overlay"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-         xmlns:html="http://www.w3.org/1999/xhtml">
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <script src="treestyletab.js" type="application/x-javascript"/>
 <script src="treestyletabbrowser.js" type="application/x-javascript"/>
@@ -88,10 +88,6 @@
 			</menupopup>
 		</menu>
 	</data>
-	<vbox id="treestyletab-fullscreen-canvas-container"
-		hidden="true">
-		<html:canvas id="treestyletab-fullscreen-canvas"/>
-	</vbox>
 </window>
 
 </overlay>
diff --git a/content/treestyletab/treestyletabbrowser.js b/content/treestyletab/treestyletabbrowser.js
index fd1669f8..47920df2 100644
--- a/content/treestyletab/treestyletabbrowser.js
+++ b/content/treestyletab/treestyletabbrowser.js
@@ -2740,7 +2740,7 @@ TreeStyleTabBrowser.prototype = {
 	{
 		var b = this.mTabBrowser;
 		if (this.tabbarShown) {
-			this.showFullScreenCanvas();
+			fullScreenCanvas.show();
 			var splitter = document.getAnonymousElementByAttribute(b, 'class', this.kSPLITTER);
 			this.tabbarHeight = b.mStrip.boxObject.height;
 			this.tabbarWidth = b.mStrip.boxObject.width +
@@ -2751,7 +2751,7 @@ TreeStyleTabBrowser.prototype = {
 			this.tabbarShown = false;
 		}
 		else {
-			this.showFullScreenCanvas();
+			fullScreenCanvas.show();
 			switch (b.getAttribute(this.kTABBAR_POSITION))
 			{
 				case 'left':
@@ -2774,7 +2774,7 @@ TreeStyleTabBrowser.prototype = {
 		this.redrawContentArea();
 		window.setTimeout(function() {
 			b.treeStyleTab.checkTabsIndentOverflow();
-			b.treeStyleTab.hideFullScreenCanvas();
+			fullScreenCanvas.hide();
 		}, 0);
 	},
 	showHideTabbarReason : 0,