From e03cef06a7001c61bf8464e598eba1ad2ba77c83 Mon Sep 17 00:00:00 2001
From: Christian Williams <orbit@framezero.com>
Date: Fri, 9 Nov 2012 14:02:41 -0800
Subject: [PATCH] Nicely highlightable alien nodes

Browsers handle highlighting of our alien nodes differently. This change normalizes by hiding the native selection on the aliens, inserting blank image "shields" with native highlighting enabled.

Change-Id: Ica3576ef0e3c42b4aeae1da374cd1dc92f203d7d
---
 demos/ve/pages/aliens.html                  |  9 +++--
 modules/ve/ce/nodes/ve.ce.AlienBlockNode.js | 11 +++++-
 modules/ve/ce/styles/ve.ce.Node.css         | 40 +++++++++++++++------
 modules/ve/ce/ve.ce.Node.js                 | 17 +++++++++
 4 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/demos/ve/pages/aliens.html b/demos/ve/pages/aliens.html
index db700d15c4..9124dd7679 100644
--- a/demos/ve/pages/aliens.html
+++ b/demos/ve/pages/aliens.html
@@ -8,10 +8,15 @@
 
 <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 
-<div>No floating or positioning at all</div>
+<div style="height: 75px; width: 200px;" id="christian">
+	<div style="float: left">float</div>
+	No floating or positioning at all
+</div>
 
 <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 
-<div style="position: absolute; top: 200px; left: 200px;">Oh no, I'm absolutely positioned!</div>
+<div style="position: absolute; top: 200px; left: 200px;">
+	Oh no, I'm absolutely positioned!
+</div>
 
 <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
diff --git a/modules/ve/ce/nodes/ve.ce.AlienBlockNode.js b/modules/ve/ce/nodes/ve.ce.AlienBlockNode.js
index b2c2321f8c..96c03e9ad2 100644
--- a/modules/ve/ce/nodes/ve.ce.AlienBlockNode.js
+++ b/modules/ve/ce/nodes/ve.ce.AlienBlockNode.js
@@ -48,8 +48,17 @@ ve.ce.AlienBlockNode.rules = {
 /* Methods */
 
 ve.ce.AlienBlockNode.prototype.onUpdate = function () {
-	// TODO preventDefault on click for links inside, user should not leave the page
+	var $shieldTemplate = this.constructor.static.$shieldTemplate;
 	this.$.html( this.model.getAttribute( 'html' ) );
+	this.$.add( this.$.find( '*' ) ).each( function () {
+		var $this = $(this);
+		if ( this.nodeType === Node.ELEMENT_NODE ) {
+			if ( !$this.css( 'float' ) && !$this.hasClass( 've-ce-alienBlockNode' ) ) {
+				return;
+			}
+			$this.append( $shieldTemplate.clone() );
+		}
+	} );
 };
 
 /* Registration */
diff --git a/modules/ve/ce/styles/ve.ce.Node.css b/modules/ve/ce/styles/ve.ce.Node.css
index bc0aefbc1b..aea7662e36 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -6,16 +6,38 @@
  */
 
 
+/* Alien styling */
 .ve-ce-alienBlockNode,
 .ve-ce-alienInlineNode,
-.ve-ce-metaBlockNode,
-.ve-ce-metaInlineNode,
 .ve-ce-alienBlockNode *,
-.ve-ce-alienInlineNode *,
-.ve-ce-metaBlockNode *,
-.ve-ce-metaInlineNode * {
+.ve-ce-alienInlineNode * {
 	background-color: #FFFFBA !important;
-	position: static !important;
+	position: relative !important;
+	top: 0 !important;
+	left: 0 !important;
+	bottom: 0 !important;
+	right: 0 !important;
+}
+
+/* Highlightable alien blocks */
+.ve-ce-alienBlockNode,
+.ve-ce-alienBlockNode * {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+.ve-ce-alienBlockNode::-moz-selection,
+.ve-ce-alienBlockNode *::-moz-selection {
+	background: transparent;
+}
+.ve-ce-node-shield {
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	background-color: transparent !important;
+	-webkit-user-select: auto;
 }
 
 /* Fix weird Chrome native selection involving floated elements */
@@ -24,13 +46,11 @@
 	content: '';
 }
 
-.ve-ce-alienBlockNode,
-.ve-ce-metaBlockNode {
+.ve-ce-alienBlockNode {
 	display: block;
 }
 
-.ve-ce-alienInlineNode,
-.ve-ce-metaInlineNode {
+.ve-ce-alienInlineNode {
 	display: inline;
 }
 
diff --git a/modules/ve/ce/ve.ce.Node.js b/modules/ve/ce/ve.ce.Node.js
index 538692d850..eef72b6b76 100644
--- a/modules/ve/ce/ve.ce.Node.js
+++ b/modules/ve/ce/ve.ce.Node.js
@@ -32,6 +32,23 @@ ve.ce.Node = function VeCeNode( type, model, $element ) {
 
 ve.inheritClass( ve.ce.Node, ve.Node );
 
+/* Static Memebers */
+
+ve.ce.Node.static = {};
+
+/**
+ * Template for shield elements.
+ *
+ * Uses data URI to inject a 1x1 transparent GIF image into the DOM.
+ *
+ * @static
+ * @member
+ */
+ve.ce.Node.static.$shieldTemplate = $(
+	'<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ' +
+		'class="ve-ce-node-shield">'
+);
+
 /* Methods */
 
 /**