diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 62c0de01..ac7ec0d7 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -1045,30 +1045,37 @@ stretching in width... */
 
 
 /* XXX these are still experimental... */
-// XXX these need to be updated...
-.mark.brace-opening {
-	width: @image-tile-size / 15;
-	height: @image-tile-size + 10;
+.mark.brace-open,
+.mark.brace-close {
+	width: @image-border * 2;
+	height: @image-tile-size;
+	overflow: visible;
 
-	border-top: solid 5px yellow;
-	border-left: solid 5px yellow;
-	border-bottom: solid 5px yellow;
-
-	margin-top: -10px;
-	margin-bottom: -10px;
-	margin-right: -15px;
+	margin-left: 0px;
 }
-.mark.brace-closing {
-	width: @image-tile-size / 15;
-	height: @image-tile-size + 10;
+.mark.brace-close:after,
+.mark.brace-open:after {
+	display: block;
+	position: absolute;
+	content: "";
 
-	border-top: solid 5px yellow;
-	border-right: solid 5px yellow;
-	border-bottom: solid 5px yellow;
+	width: @image-tile-size / 20;
+	height: 100%;
 
-	margin-top: -10px;
-	margin-bottom: -10px;
-	margin-left: -15px;
+	box-sizing: content-box;
+
+	border-top: solid @image-border*2 yellow;
+	border-bottom: solid @image-border*2 yellow;
+
+	margin-top: -@image-border * 2;
+}
+.mark.brace-open:after {
+	border-left: solid @image-border*2 yellow;
+}
+.mark.brace-close:after {
+	left: -@image-tile-size / 20;
+
+	border-right: solid @image-border*2 yellow;
 }
 
 
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index db15bf4c..d8684095 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -1596,15 +1596,50 @@ var WidgetTestActions = actions.Actions({
 
 	makePartitionAfter: ['Test/Make Partition after image',
 		function(image, text){
-			var attrs = {}
+			var gid = this.data.getImage(image || 'current')
+			var attrs = {
+				gid: gid
+			}
 			if(text){
 				attrs.text = text
 			}
-			this.ribbons.getImage(this.data.getImage(image))
+			this.ribbons.getImage(gid)
 				.after($('<span>')
 					.addClass('mark partition')
 					.attr(attrs))
 		}],
+	openBrace: ['Test/Open brace',
+		function(image){
+			var gid = this.data.getImage(image || 'current')
+			var r = this.ribbons.getRibbon(this.data.getRibbon(gid))
+
+			this.ribbons.getImage(gid)
+				.before($('<span>')
+					.addClass('mark brace-open')
+					.attr('gid', gid))
+
+			// XXX this does not work for non-current images ...
+			this.ribbons.preventTransitions(r)
+			// XXX is this correct here???
+			this.focusImage()
+			this.ribbons.restoreTransitions(r)
+		}],
+	closeBrace: ['Test/Close brace',
+		function(image){
+			var gid = this.data.getImage(image || 'current')
+			var r = this.ribbons.getRibbon(this.data.getRibbon(gid))
+
+			this.ribbons.getImage(gid)
+				.after($('<span>')
+					.addClass('mark brace-close')
+					.attr('gid', gid))
+
+			// XXX this does not work for non-current images ...
+			this.ribbons.preventTransitions(r)
+			// XXX is this correct here???
+			this.focusImage()
+			this.ribbons.restoreTransitions(r)
+		}],
 })
 
 var WidgetTest =