Update layers panel on programatic call to createLayer.

Add class=“layer” to each layer element. This happens when calling
createLayer() or any call to identifyLayers(). This happens with new
drawings and when opening legacy drawings, so it’s fully backwards
compatible.
svg-editor.js elementChanged() looks for g.layer as an addition test
for calling populateLayers() which updates the layers panel.
Addition tests for class=“layer” added to draw_test.html.
Fixed Firefox exception in draw_test.html.

editor/draw.js

@@ -20,6 +20,8 @@ if (!svgedit.draw) {
 }
 // alias
 var NS = svgedit.NS;
+var LAYER_CLASS = svgedit.LAYER_CLASS;
+var LAYER_CLASS_REGEX = svgedit.LAYER_CLASS_REGEX;
 
 var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',');
 
@@ -30,6 +32,21 @@ var RandomizeModes = {
 };
 var randomize_ids = RandomizeModes.LET_DOCUMENT_DECIDE;
 
+/**
+ * Add class 'layer' to the element
+ *
+ * Parameters:
+ * @param {SVGGElement} elem - The SVG element to update
+ */
+function addLayerClass(elem) {
+	var classes = elem.getAttribute('class')
+	if (classes === null || classes === undefined || classes.length === 0) {
+		elem.setAttribute('class', LAYER_CLASS);
+	} else if (! LAYER_CLASS_REGEX.test(classes)) {
+		elem.setAttribute('class', classes + ' ' + LAYER_CLASS);
+	}
+}
+
 /**
  * This class encapsulates the concept of a layer in the drawing
  * @param {String} name - Layer name
@@ -386,6 +403,7 @@ svgedit.draw.Drawing.prototype.identifyLayers = function() {
 					a_layer = child;
 					svgedit.utilities.walkTree(child, function(e){e.setAttribute("style", "pointer-events:inherit");});
 					a_layer.setAttribute("style", "pointer-events:none");
+					addLayerClass(a_layer)
 				}
 				// if group did not have a name, it is an orphan
 				else {
@@ -407,22 +425,36 @@ svgedit.draw.Drawing.prototype.identifyLayers = function() {
 		// TODO(codedread): What about internationalization of "Layer"?
 		while (layernames.indexOf(("Layer " + i)) >= 0) { i++; }
 		var newname = "Layer " + i;
-		a_layer = svgdoc.createElementNS(NS.SVG, "g");
-		var layer_title = svgdoc.createElementNS(NS.SVG, "title");
-		layer_title.textContent = newname;
-		a_layer.appendChild(layer_title);
+		a_layer = this._doCreateLayer(newname);
 		var j;
 		for (j = 0; j < orphans.length; ++j) {
 			a_layer.appendChild(orphans[j]);
 		}
-		this.svgElem_.appendChild(a_layer);
-		this.all_layers.push( [newname, a_layer] );
+		this.all_layers.push([newname, a_layer] );
 	}
 	svgedit.utilities.walkTree(a_layer, function(e){e.setAttribute("style", "pointer-events:inherit");});
 	this.current_layer = a_layer;
 	this.current_layer.setAttribute("style", "pointer-events:all");
 };
 
+	/**
+	 * Private function that actually creates a new top-level layer in the drawing
+	 * with the given name and sets the current layer to it.
+	 * @param {string} name - The given name
+	 * @returns {SVGGElement} The SVGGElement of the new layer, which is
+	 * also the current layer of this drawing.
+	 */
+	svgedit.draw.Drawing.prototype._doCreateLayer = function(name) {
+		var svgdoc = this.svgElem_.ownerDocument;
+		var new_layer = svgdoc.createElementNS(NS.SVG, "g");
+		addLayerClass(new_layer);
+		var layer_title = svgdoc.createElementNS(NS.SVG, "title");
+		layer_title.textContent = name;
+		new_layer.appendChild(layer_title);
+		this.svgElem_.appendChild(new_layer);
+		return new_layer;
+	};
+
 /**
  * Creates a new top-level layer in the drawing with the given name and 
  * sets the current layer to it.
@@ -431,12 +463,7 @@ svgedit.draw.Drawing.prototype.identifyLayers = function() {
  * also the current layer of this drawing.
 */
 svgedit.draw.Drawing.prototype.createLayer = function(name) {
-	var svgdoc = this.svgElem_.ownerDocument;
-	var new_layer = svgdoc.createElementNS(NS.SVG, "g");
-	var layer_title = svgdoc.createElementNS(NS.SVG, "title");
-	layer_title.textContent = name;
-	new_layer.appendChild(layer_title);
-	this.svgElem_.appendChild(new_layer);
+	var new_layer = this._doCreateLayer(name);
 	this.identifyLayers();
 	return new_layer;
 };

editor/svg-editor.js

@@ -1835,6 +1835,15 @@ TODOS
 				});
 			};
 
+			/**
+			 * Test whether an element is a layer or not.
+			 * @param {SVGGElement} elem - The SVGGElement to test.
+			 * @returns {boolean} True if the element is a layer
+			 */
+			function isLayer(elem) {
+				return elem && elem.tagName === 'g' && svgedit.LAYER_CLASS_REGEX.test(elem.getAttribute('class'))
+			}
+
 			// called when any element has changed
 			var elementChanged = function(win, elems) {
 				var i,
@@ -1846,10 +1855,13 @@ TODOS
 				for (i = 0; i < elems.length; ++i) {
 					var elem = elems[i];
 
-					// if the element changed was the svg, then it could be a resolution change
-					if (elem && elem.tagName === 'svg') {
+					var isSvgElem = (elem && elem.tagName === 'svg');
+					if (isSvgElem || isLayer(elem)) {
 						populateLayers();
-						updateCanvas();
+						// if the element changed was the svg, then it could be a resolution change
+						if (isSvgElem) {
+							updateCanvas();
+						}
 					}
 					// Update selectedElement if element is no longer part of the image.
 					// This occurs for the text elements in Firefox

editor/svgedit.js

@@ -15,8 +15,10 @@ svgedit = {
 		XLINK: 'http://www.w3.org/1999/xlink',
 		XML: 'http://www.w3.org/XML/1998/namespace',
 		XMLNS: 'http://www.w3.org/2000/xmlns/' // see http://www.w3.org/TR/REC-xml-names/#xmlReserved
-	}
+	},
+	LAYER_CLASS: 'layer'
 };
+svgedit.LAYER_CLASS_REGEX = new RegExp('(\\s|^)' + svgedit.LAYER_CLASS + '(\\s|$)');
 
 // return the svgedit.NS with key values switched and lowercase
 svgedit.getReverseNS = function() {'use strict';