From 5db880ac88564b5b138fd07f0f10e5398a2a9e7a Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kevin.schaaf@palm.com>
Date: Mon, 27 Aug 2012 13:12:06 -0700
Subject: [PATCH] ENYO-662, ENYO-660: Handle wrap/nowrap with CSS whitespace,
 and add IE8 workaround for retaining newlines in pre.
 Enyo-DCO-1.0-Signed-off-by: Kevin Schaaf <kevin.schaaf@palm.com>

---
 source/App.css |  2 +-
 source/App.js  | 36 ++++++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/source/App.css b/source/App.css
index 523ef1e..3c0d946 100644
--- a/source/App.css
+++ b/source/App.css
@@ -75,7 +75,7 @@ button {
 }
 
 .nowrap {
-	width:2000px;
+	white-space: pre;
 }
 
 .wrap-label {
diff --git a/source/App.js b/source/App.js
index 816c0a4..f5f64f5 100644
--- a/source/App.js
+++ b/source/App.js
@@ -23,10 +23,10 @@ enyo.kind({
 				{kind: "FittableRows", classes:"wide onyx", components: [
 					{kind: "Panels", name:"sourcePanels", fit:true, draggable:false, components: [
 						{kind: "Scroller", classes:"enyo-fit scroller", components: [
-							{name:"sourceContent", classes:"source nowrap enyo-selectable"}
+							{kind:"SourceView", name:"sourceContent"}
 						]},
 						{kind: "Scroller", classes:"enyo-fit scroller", components: [
-							{name:"cssContent", classes:"source nowrap enyo-selectable"}
+							{kind:"SourceView", name:"cssContent"}
 						]}
 					]},
 					{kind:"onyx.Toolbar", layoutKind: "FittableColumnsLayout", classes:"footer-toolbar", noStretch:true, components: [
@@ -290,8 +290,8 @@ enyo.kind({
 		}
 	},
 	wrapChanged: function(inSender, inEvent) {
-		this.$.sourceContent.addRemoveClass("nowrap", !inSender.getValue());
-		this.$.cssContent.addRemoveClass("nowrap", !inSender.getValue());
+		this.$.sourceContent.setWrap(inSender.getValue());
+		this.$.cssContent.setWrap(inSender.getValue());
 	},
 	getHashComponentName: function() {
 		return window.location.hash.slice(1);
@@ -339,6 +339,34 @@ enyo.kind({
 	}
 });
 
+enyo.kind({
+	name: "SourceView",
+	kind: "Control",
+	tag: "pre",
+	classes: "source enyo-selectable",
+	published: {
+		wrap: false
+	},
+	create: function() {
+		this.inherited(arguments);
+		this.wrapChanged();
+	},
+	// IE8 normalizes whitespace when setting innerHTML even in <pre> tags, so appending
+	// text nodes into the pre works around it (http://stackoverflow.com/a/195385)
+	contentChanged: function(inOld) {
+		var node = this.hasNode();
+		if (node) {
+			while(node.hasChildNodes()) { 
+				node.removeChild(node.firstChild);
+			}
+			node.appendChild(document.createTextNode(this.content));
+		}
+	},
+	wrapChanged: function(inOld) {
+		this.addRemoveClass("nowrap", !this.wrap);
+	}
+});
+
 enyo.kind({
 	name: "ViewStack",
 	kind: "Panels",