cavalion-vcl 1.1.78 → 1.1.80

package/.md

@@ -1,11 +1,6 @@
-* [CHANGELOG.md]() - [README.md]() -[SNIPPETS.md]()
+* [CHANGELOG.md]() - [README.md]() -[SNIPPETS.md]() - [ISSUES.md]()
 * [.js]() - [src](:/)  - [package.json]()
 
-> * [sampleapp](#workspace-open::)
-* [index.md]()
-
-* `textRenders` vs `rendering` - properties
-
 # cavalion-vcl / classes
 
 * [Factory](src/:.js) [.parse](src/Factory:.js) - [Reader](src/:.js) - [Writer](src/:.js)
@@ -30,7 +25,7 @@
 				* [List](src/ui/:.js) | [ListColumn](src/ui/:.js) - [ListBody](src/ui/:.js) - [ListFooter](src/ui/:.js) - [ListHeader](src/ui/:.js) - [ListRow](src/ui/:.js)
 				* [Tree](src/ui/:.js) - [Node](src/ui/:.js) [.closeable](src/ui/Node:.js)
 
-# prototypes `2022/04/17` 
+# [prototypes](src/:/) `2022/04/17` 
 
 > * [App](src/prototypes/:.js) - <= _#window is instantiated here (weirdly not in .desktop)_
 	* [.console](src/prototypes/App:.js) << _hotkeys_ _probably deprecated_ 
@@ -57,6 +52,101 @@
 		* [Query](src/prototypes/ui/entities/:.js) - [.scaffold](src/prototypes/ui/entities/Query:.js) - [scaffold.future](src/prototypes/ui/entities/Query:.js)
 		* [QueryFilters](src/prototypes/ui/entities/:.js)
 
+# `2024/03/24` In the wild: veldapps-gds-devtools@2.0.16
+
+* Features dynamic content property :-p
+
+![20240324-102116-2fjtA2](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/202403/20240324-102116-2fjtA2.png)
+
+# `2024/02/18` Component::disable vs Control::hide
+
+> _using :: for member functions_
+
+Something is out of balance:
+
+* Control::show - calls setVisible(true)
+* Control::hide - calls setVisible(false)
+* Component::disable - is event stub?
+
+One should be able to call disable() and enable() like hide() and show(). So, then the same goes for all ControlState?
+
+* collapse() and expand()
+* hide() and show()
+* disable() and enable()
+* ... _TODO_
+
+---
+
+* [flexboxfroggy](https://flexboxfroggy.com/)
+
+# `2023/12/28` List.prototype.sortBy
+
+* Sorts by js.nameOf when typeof value === "object"
+
+# `2023/11/17` List.autoColumns
+
+* false, true, or _config_
+* onAutoColumns(evt{columns}) {} // manipulate just before creating
+
+# `2023/10/31` vcl/Control reflectState-methods
+
+The following methods are called by vcl/Control::update in order to update certain attributes or visual style of the control so that it reflects the state in question.
+
+* enabled: enable/disable
+* selected: select/un/deselect
+* hovered: hover/unhover
+* focused: blur/focus - Ace/setFocus
+* visible: showNode/hideNode - ListColumn/showNode
+* showing
+* expanded: expand/collapse - Node
+
+Now, the latter is different for the reason that the methods show() and hide() actually manipulate the state-property, not reflect it. Something is "out of symmetry" here. Looking at their names, it eems that the other methods also have this sense to it, ie. manipulating a property. But they don't. 
+
+The following has no effect on the enabled property:
+
+>	control.enabled()  // instead control.setEnabled(true), must be used
+	control.disable()
+
+It might be time to refactor and renames these methods, with a Node suffix, as well.
+
+Not sure what will "fall down/over" when doing that.
+
+---
+> 
+* [sampleapp](#workspace-open::) - [index.md]()?
+	* "refork/reset": like in the rapportage-module, open nested form based on settings set in parent and then instantiate/fabric a container, but then come back to the settings and change them and "refork"
+* vcl/Action: add/remove classes, like enable/disabled
+* √ vcl/Component.query: support for regexp in something like:
+	* √ `.qsa("*[name=/^Filter/]")`
+* make Sizer transparent while timeout set to update
+* margin in Console can also [$/#_]-notation/handles to previous values
+* blocks.less is loaded twice in veldoffice-xxx-vcl projects
+* vcl/ui/Tabs: animatePages/Controls?
+	* guess we need a host then? Or simply animating translate3d(x) (left/right) upon show?
+* √ vcl/ui/ListColumn: autowidth not escaped
+![20230930-112636-5vMatT](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/202309/20230930-112636-5vMatT.png)
+* vcl/ui/List - performance, Excel (on the web) is faster
+* vcl/ui/List - auto columns
+	* dim content while scrolling, fade in/out
+	* how to easily override in ListOf<>
+	* √ toggle capitalization of auto columns content
+	* toggle .-handling
+* vcl/ui/Panel `zoom`-property 
+	* bounds seem to be bigger
+* Nested specializers become more and more urgent `Hover<ListOf<veldoffice:Onderzoek>>`
+* Cmd+enter with many Hover<> becomes a mess - HOWTO keep track of focus?
+* ui/Console: Alt+DblClick - orange animation
+* interactive console, eg. `ls()` -=> result in folder-nodes?
+* `textRenders` vs `rendering` - properties
+* check whether `fire()` is consistently used, so that multiple event handlers can be implemented as an array (addEventListener("click", ...))
+* `zoom`-property => [CVLN-20230921-1 - zoom property](/Dropbox-cavalion/Issues/:/)
+
+# `2023/09/29` Bug in vcl/Control
+
+Always interesting to find a bug in a low-level module/class/unit. Although, this has been bothering me for a while already, I kinda forgot about it. The warnings in the console didn't seem to trigger any reaction anymore. Because it will happen quite often. 
+
+![20230929-224818-OXBZA0](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/202309/20230929-224818-OXBZA0.png)
+
 # `2023/07/06` Factory.unreq
 
 * [.js]()

package/CHANGELOG.md

@@ -1,5 +1,50 @@
+### `2024/03/28` - 1.1.80
+
+* **Component**: Enhances querying attributes: now supports use of regexp, eg: app.qs("*[attr=/value/]")
+* **Control**:
+	* Itroduces dynamic content property 
+	* Introduces Control.updateAll() 
+	* Adds support for options parameter for scrollIntoView()
+* **Query**: Adds support for one-parameter-object to setAll()
+* **Ace**: Adds support for marking and patching diffs
+* **Console**: 
+	* Improves CSS styles
+	* Adds support for (shift+)ctrl+alt+Enter, printing and logging selection 
+	* Aadds support for filtering history 
+* **Select**: Introduces getSelectedOption and getSelectedValue, and getOption
+* **Tabs**: Improves makeVisible
+* **ListColumn**: 
+	* Updates display property according to setVisible() 
+	* Improves getAttributeClassName() and autoWidth-feature 
+* **List**:
+	* Adds workaroundColumnAlignment 
+	* Adds onColumnInit callback for autoColumns 
+	* Adds onColumnsChanged event
+
+### Prototypes
+
+* **App.v1**: Hacking CSS - makes Hovers closing X hardly visible, appears when hovered
+
+
+### `2023/10/06` - 1.1.79
+
+* **List**: Introduces options for behaviour of auto creating columns updates sorting updates auto-widthing updates the docs
+* **Component**: Fixes an bug in prototype.getVar when dealing with default values 
+* **Component.query**: Fixes throwing exceptions when quering components for specific vars adds override to ComponentQueryResult-class
+
 ### `2023/09/16` - 1.1.78
 
+* cleans up code for readability
+* improves (and fixes?) sort algorithm/procedure - support for custom column sorting, based on value of attribute (not onGetValue)
+* cleans up code for readability
+* comments
+* see previous comment
+* :root => isRootComponent enchances toasting Sizer selection
+* fixes reloadChildNodes-situation changes behavior of ui/Console, ignores <a>nchors, activates console on dblclick
+* adds css styles to App.v1 simplifies code
+* adds css styles to App.v1 simplifies code
+* adjusts Component:setTimeout to automatically name unnamed timeout fixes Control:selectVisible which was pretty buggy - noticeably when trying to make workspace console or navigator visible fixes Node:childNodesNeeded so that callback is made correctly (fixes Cmd+F10 #resource-focus as well)
+
 ### `2023/09/06` - 1.1.77
 
 * **Panel**: Adjusts zoom-logic TODO

package/SNIPPETS.md

@@ -1,3 +1,6 @@
+* [`req("vcl/Component").storageDB.name`](`!`)
+* [`req("vcl/Component").getFactories`](`!`)
+
 # `2023/05/06` Snippet
 
 	const dumpControls = (parent) => parent.getControls().reduce((r, c) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.78",
+  "version": "1.1.80",
   "description": "Visual Component Library for vcl-comps",
   "main": "index.js",
   "scripts": {

package/package_monitor.log

@@ -0,0 +1,10 @@
+2023-11-03 22:06:49 /Users/ralph/Workspaces/cavalion.org/cavalion-vcl src/Component.js 58.31KB (59712)
+2023-11-03 22:07:16 /Users/ralph/Workspaces/cavalion.org/cavalion-vcl src/Component.js 58.36KB (59761)
+2023-11-03 22:07:22 /Users/ralph/Workspaces/cavalion.org/cavalion-vcl src/Component.js 58.38KB (59779)
+2023-11-03 22:08:59 /Users/ralph/Workspaces/cavalion.org/cavalion-vcl .md 7.67KB (7851)
+2023-11-03 22:10:37 /Users/ralph/Workspaces/cavalion.org/cavalion-vcl .md 7.67KB (7851)
+2023-11-03 22:14:14 cavalion.org/cavalion-vcl .md 7.67KB (7851)
+2023-11-03 22:16:03 cavalion.org/cavalion-vcl .md 7.67KB (7851)
+2023-11-08 11:43:33 cavalion.org/cavalion-vcl src/Component.js 58.35KB (59746)
+2023-11-17 22:41:20 cavalion.org/cavalion-vcl .md 7.84KB (8028)
+2023-11-17 22:41:22 cavalion.org/cavalion-vcl .md 7.84KB (8027)

package/src/Component.js

@@ -23,7 +23,6 @@ define(function (require) {
 			};
 			return f;
     	};
-this.print("@overrides", value);
 		for(var k in value) {
 			var method = wrap(value[k]); 
 			
@@ -40,7 +39,6 @@ this.print("@overrides", value);
 		}
     };
 
-
     Component = Component(require, {
         prototype: {
             // properties
@@ -554,13 +552,17 @@ this.print("@overrides", value);
                 return (this._vars && this._vars.hasOwnProperty(key)) || false;
             },
             getVar: function (namePath, fallback_to_owner, defaultValue) {
-                if (defaultValue) {
+                if (this._vars !== null && arguments.length === 3) {
                     this._vars = this._vars || {};
                 }
 
                 var r = this._vars !== null ? js.get(namePath, this._vars, defaultValue) : undefined;
-                if (r === undefined && fallback_to_owner === true && this._owner !== null) {
-                    r = this._owner.getVar(namePath, true, defaultValue);
+                if (r === undefined) {
+                	if(fallback_to_owner === true && this._owner !== null) {
+                    	r = this._owner.getVar(namePath, true, defaultValue);
+                	} else if(arguments.length === 3) {
+                		r = defaultValue;
+                	}
                 }
                 return r;
             },
@@ -1537,7 +1539,7 @@ this.print("@overrides", value);
         }
     });
     
-    // alias `#vcl-20200819-1`
+    // alias `#vcl-20200819-1` - is it really being used? maybe move it to Code/VCL-prototypes/v1
     Component.prototype.udown = Component.prototype.ud;
 
     Property.registerReferencedClass(Component);

package/src/Component.query.js

@@ -653,7 +653,7 @@ define(function() {
     Result.prototype = [];
     
     /*- Prototype methods of Component, Control, Action to mixin */
-    "on,un,once,dispatch,emit,fire,listen,unlisten,connect,disconnect,get,set,execute,toggle,show,hide,render,selectNext,selectPrevious,selectNth,selectFirst,selectLast,toggleClass,print".split(",").forEach(function(name) {
+    "on,un,once,dispatch,emit,fire,listen,unlisten,override,connect,disconnect,get,set,execute,toggle,show,hide,render,selectNext,selectPrevious,selectNth,selectFirst,selectLast,toggleClass,print".split(",").forEach(function(name) {
 	        Result.prototype[name] = function() {
 	            for(var i = 0; i < this.length; ++i) {
 	                if(typeof this[i][name] === "function") {
@@ -790,13 +790,14 @@ define(function() {
             	return component instanceof require("vcl" + "/Application");//.app();
             } else if(pseudo.name === "instanceOf") {
             	return component instanceof require(pseudo.value.replace(/\\\//g, "/"));
-            } else if(pseudo.name === "withVars") {
+            } else if(pseudo.name === "withVars" || pseudo.name === "vars") {
             	var vars = component._vars || {};
-            	try {
-            		return eval("with(vars) { " + pseudo.value + "}");
-            	} catch(e) {
-            		return false;
-            	}
+            	// try {
+            		// return eval("with(vars) { " + pseudo.value + "}");
+            		return vars.hasOwnProperty(pseudo.value);
+            	// } catch(e) {
+            		// return false;
+            	// }
             }
             
             var value;
@@ -831,20 +832,22 @@ define(function() {
     }
     function match_properties(rule, component) {
         return rule.attrs.every(function(attr) {
+
             if(attr.name === "uri") {
             	return match_uri({uri: attr.value.replace(/\\\//g, "/")}, component);
             }
+
             var prop = component.defineProperties()[attr.name];
             var value = prop && prop.get(component);
             if(value instanceof require("vcl/" + "Component")) {
             	value = value.getName();
             }
-            switch(attr.operator) {
-                case "=":
-                    return ("" + value) === ("" + attr.value);
-                
-                default:
-                    return false;
+
+            if(attr.operator === "=") {
+            	if(attr.value.startsWith("\\/") && attr.value.endsWith("\\/")) {
+            		return new RegExp(attr.value.substring(2, attr.value.length - 4)).test("" + value)
+            	}
+            	return ("" + value) === attr.value;
             }
         });
     }

package/src/Control.js

@@ -556,7 +556,27 @@ define(function(require) {
 				return new Dragger(this);
 			},
 			getInnerHtml: function() {
-				return this._content || (this._action ? this._action.getContent(this) : "");
+
+				const parse = (str) => {
+					const v = (function() { return this.vars.apply(this, arguments); }).bind(this);
+					const qs = this.qs.bind(this);
+					const qsa = this.qsa.bind(this);
+					const up = this.up.bind(this);
+					const ud = this.ud.bind(this);
+					const udr = this.udr.bind(this);
+					
+					// Replace the backticked expressions with their evaluations
+					return str.replace(/`([^`]+)`/g, (match, expression) => {
+						try {
+							return eval(js.sf("`%s`", expression));
+						} catch (error) {
+							console.error('Error evaluating expression:', expression);
+							return match; // Return the original match as a fallback
+						}
+					});					
+				};
+
+				return parse(this._content || (this._action ? this._action.getContent(this) : ""));
 			},
 			render: function() {
 				if(this.isVisible()) {
@@ -574,9 +594,13 @@ define(function(require) {
 				// As far as know the same applies...
 				this.layoutChanged();
 			},
-			scrollIntoView: function() {
+			scrollIntoView: function(options) {
 			/**  Makes sure that the calling node is visible by scrolling it into view when necessary. */
-				this.nodeNeeded().scrollIntoView();
+				if(arguments.length === 0) {
+					return this.nodeNeeded().scrollIntoView();
+				}
+				
+				return this.nodeNeeded().scrollIntoView(options);
 			},
 
 			documentToClient: function(x, y) {
@@ -1143,6 +1167,8 @@ define(function(require) {
 				this._post_update = this._post_update || [];
 				if(f !== undefined) {
 					this._post_update.push(f);
+				} else {
+					debugger;
 				}
 			},
 			updateChildren: function(recursive, directly) {
@@ -1338,14 +1364,14 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 				}
 
 				if(this._post_update !== undefined) {
-					while(this._post_update.length > 0) {
+					while(this._post_update && this._post_update.length > 0) {
 						try {
 							this._post_update.shift()();
 						} catch(e) {
 							console.warn("Fix this, I said...", {catched: e});
 						}
 					}
-					if(this._post_update.length === 0) {
+					if(this._post_update && this._post_update.length === 0) {
 						delete this._post_update;
 					}
 				}
@@ -1853,7 +1879,6 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 		},
 		statics: {
 			updateCallCount: 0,
-
 			focused: null,
 			
 			tree: (root) => root.getControls().reduce((r, c) => {
@@ -1861,7 +1886,6 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 					return r;	
 				}, Object.create(root, { hashCode: { value: () => ";-)" } })),
 			
-
 			findByNode: function(node) {
 				while(node !== null && node[EventDispatcher.elementKey] === undefined) {
 					node = node.parentNode || null; // IE
@@ -1922,7 +1946,40 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 					proto["@className"] = className;
 				}
 				return className;
+			},
+			
+			updateAll(all, cb, track) {
+				
+				all = all.filter(c => c.isVisible());
+				
+				// track = track || (window.track = []);
+				
+				return new Promise((resolve, reject) => {
+					const total = all.length;
+					const done = () => resolve(cb ? cb() : total);
+					
+					if (total === 0) done();
+
+					let completed = 0;
+					all.forEach((obj) => {
+						
+						// track && track.push(obj);
+						
+						obj.update(() => {
+							
+							// if(track) track.splice(track.indexOf(obj), 1);
+							
+							completed++;
+							if (completed === total) {
+								done();
+							}
+						});
+					});
+				});
+
 			}
+			
+			
 		},
 		properties: {
 

package/src/entities/Query.js

@@ -220,7 +220,7 @@ define(function(require) {
 				if(this._orderBy !== "") {
 					criteria.orderBy = this._orderBy.split(",");
 				}
-				
+
 				if(this.hasOwnProperty("_onGetRequestCriteria")) {
 					criteria = this.fire("onGetRequestCriteria", [criteria, page]);
 				}
@@ -453,6 +453,17 @@ define(function(require) {
 						return res;
 					}.bind(this));
 				} else {
+					if(entity && typeof entity === "object") {
+						refresh = entity.refresh || refresh;
+						count = entity.count || count;
+						orderBy = entity.orderBy || orderBy;
+						having = entity.having || having;
+						groupBy = entity.groupBy || groupBy;
+						where = entity.where || where;
+						attributes = entity.attributes || attributes;
+						entity = entity.entity || entity;
+					}
+					
 					this._attributes = attributes;
 					this._entity = entity;
 					if(where) {

package/src/prototypes/.md

@@ -0,0 +1,35 @@
+* [actions](:/) - [make](:/) - [ui](:/)
+
+# [prototypes](./)
+
+> # [Component]((./:)) - [cavalion-blocks]((./:))
+
+> # [App]((./:))
+
+> * [vcl/Application]()
+	* [.console]((./App:)) [.desktop]((./App:)) [.framework7]((./App:))
+	* [.glassy]((./App:)) [.openform]((./App:)) [.scaffold]((./App:))
+	* [.toast]((./App:)) [.v1]((./App:))
+
+> # [ui](:/) / [controls](ui/:/) | [entities](ui/:/) | [forms](ui/:/) / [util](ui/forms/:/)
+
+> 
+* [ui/Form]((./:)) / [util/Console]((./ui/forms/:))
+	* [Portal]((./ui/forms/:)) [View]((./ui/forms/:)) [Home]((./ui/forms/:)) [.list]((./ui/forms/Home:)) [.tree]((./ui/forms/Home:))
+	* [Debug]((./ui/forms/:)) - see if there any usable code in there
+	* [Editor]((./ui/forms/:)) - can be deleted
+* [ui/controls](:/) - deprecated it seems
+	* [SizeHandle.js](:/ui/controls/:)
+	* [Toolbar.js](:/ui/controls/:)
+* [ui/entities](:/)
+	* [AttributeInput.js](ui/entities/:) [.scaffold.js](ui/entities/AttributeInput:)
+		* [.@checkbox.js](ui/entities/AttributeInput:) [.@input.js](ui/entities/AttributeInput:) [.@textarea.js](ui/entities/AttributeInput:)
+		* [.boolean.js](ui/entities/AttributeInput:) [.date.js](ui/entities/AttributeInput:) [.double.js](ui/entities/AttributeInput:) 
+		* [.int.js](ui/entities/AttributeInput:) [.long.js](ui/entities/AttributeInput:) [.ref.js](ui/entities/AttributeInput:) - [.set.js](ui/entities/AttributeInput:) 
+		* [.string.js](ui/entities/AttributeInput:) [.text.js](ui/entities/AttributeInput:) - [.timestamp.js](ui/entities/AttributeInput:)
+	* [Edit.js](ui/entities/:) [.scaffold.js](ui/entities/Edit:) [.modal.js](ui/entities/Edit:)
+	* [Home.js](ui/entities/)
+	* [Instance.js](ui/entities/:)
+	* [ModelNavigator.js](ui/entities/:)
+	* [Query.js](ui/entities/:) [.scaffold.js](ui/entities/Query:) [.scaffold.future.js](ui/entities/Query:)
+	* [QueryFilters.js](ui/entities/:)

package/src/prototypes/App.v1.js

@@ -53,8 +53,8 @@ var FormContainer = require("vcl/ui/FormContainer");
     [("#window"), { 
     	css: {
 			'#close-x': {
-				'': "position:absolute;top:0;right:0;color:silver;padding:4px 8px;font-size:14pt;z-index:999999999999;",
-				'&:hover': "color:black;cursor:pointer;"
+				'': "transition: opacity 1s; opacity: 0.1; position:absolute;top:0;right:0;color:silver;padding:4px 8px;font-size:14pt;z-index:999999999999;",
+				'&:hover': "color:black;cursor:pointer;opacity: 1;"
 			},
 			'font-family': "Lucida Grande, Arial, sans-serif", 
 			'font-size': "9pt",
@@ -63,7 +63,8 @@ var FormContainer = require("vcl/ui/FormContainer");
 				'font-family': "Lucida Grande, Arial, sans-serif",
 				'vertical-align': "top",
 				'&.disabled': "color:gray;",
-				'&:active': "line-height:12px; border:2px solid rgb(57,121,217); padding-top:5px; padding-bottom:3px; padding-left:8px; padding-right:6px; background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
+				'&:not(:active)': "margin-bottom:4px;",
+				'&:active:active:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px; background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
 			}
     	}
     }, [

package/src/prototypes/ui/entities/.md

@@ -0,0 +1,25 @@
+* [AttributeInput.js]()
+	* [.@checkbox.js](AttributeInput:)
+	* [.@input.js](AttributeInput:)
+	* [.@textarea.js](AttributeInput:)
+	* [.boolean.js](AttributeInput:)
+	* [.date.js](AttributeInput:)
+	* [.double.js](AttributeInput:)
+	* [.int.js](AttributeInput:)
+	* [.long.js](AttributeInput:)
+	* [.ref.js](AttributeInput:)
+	* [.scaffold.js](AttributeInput:)
+	* [.set.js](AttributeInput:)
+	* [.string.js](AttributeInput:)
+	* [.text.js](AttributeInput:)
+	* [.timestamp.js](AttributeInput:)
+* [Edit.js]()
+	* [.modal.js](Edit:)
+	* [.scaffold.js](Edit:)
+* [Home.js]()
+* [Instance.js]()
+* [ModelNavigator.js]()
+* [Query.js]()
+	* [.scaffold.future.js](Query:)
+	* [.scaffold.js](Query:)
+* [QueryFilters.js]()

package/src/prototypes/ui/forms/Home.tree.js

@@ -12,7 +12,7 @@ var Handlers = {
 
 		if(component instanceof FormContainer) {
     		if(name === "formloadstart") {
-    			root_scope.description.setContent("<img src='/shared/vcl/images/loading.gif'>");
+    			// root_scope.description.setContent("<img src='/shared/vcl/images/loading.gif'>");
     		} else if((form = component.getForm()) !== null) {
     			form_scope = form.getScope();
     			if(name === "formload" && !form_scope.left) {
@@ -100,7 +100,7 @@ var Handlers = {
 
 		if(component instanceof FormContainer) {
     		if(name === "formloadstart") {
-    			root_scope.description.setContent("<img src='/shared/vcl/images/loading.gif'>");
+    			// root_scope.description.setContent("<img src='/shared/vcl/images/loading.gif'>");
     		} else if((form = component.getForm()) !== null) {
     			form_scope = form.getScope();
     			if(name === "formload" && !form_scope.left) {

package/src/prototypes/ui/forms/Portal.js

@@ -84,7 +84,7 @@ var Component = require("vcl/Component");
 	        },
 	        "&.line": {
 	            "padding-bottom": "8px",
-	            "border-bottom": "1px solid gray"
+	            // "border-bottom": "1px solid gray"
 	        },
 	        // "#title_outer": "color:green;",
 	        "#title": "display: inline-block; font-size: 17pt; margin-right: 16px;",

package/src/prototypes/ui/forms/View.js

@@ -3,7 +3,7 @@
 [["ui/Form"], {
     css: {
     	// TODO refactor to be 'singleton' (iykwim)
-    	'#menubar': {
+    	'#menubar#menubar#menubar': {
 		    '&.loading': "background: url(/shared/vcl/images/loading.gif) no-repeat 50% 50%;",
 		    '&.nested-in-tabs': {
 		    	'': "padding: 2px; border: none;",
@@ -101,9 +101,9 @@
         ["vcl/ui/Panel", ("left_content"), { align: "top", autoSize: "height" }, [
 	        ["vcl/ui/Element", ("description"), {
 	            content: [
-	            	"A view form consists of a panel aligned to the left ",
-	            	"and one aligned client. The client panel usually shows a menubar ",
-	            	"aligned to the top."
+	            	// "A view form consists of a panel aligned to the left ",
+	            	// "and one aligned client. The client panel usually shows a menubar ",
+	            	// "aligned to the top."
 	            ].join("")
 	        }]
         ]]

package/src/prototypes/ui/forms/util/Console.js

@@ -17,6 +17,8 @@ var deselect = () => {
 	document.selection && document.selection.empty();
 };
 
+var cl = console.log;
+
 [["ui/Form"], {
     activeControl: "console",
     align: "bottom",
@@ -38,7 +40,7 @@ var deselect = () => {
 
         sizer.on("setControl", function (value) {
         	if(value) {
-        		// app.toast({ content: js.sf("%n", value), classes: "glassy fade"});
+        		// app.toast({ content: js.sf("SETCONTROL: %n", value), classes: "glassy fade"});
         	}
         	
             var consoles = this.app().qsa("vcl/ui/Console").filter(c => c.isVisible());
@@ -71,9 +73,9 @@ var deselect = () => {
                 if (value._owner) {
                     content.push(String.format("%n", value._owner));
                 }
+    			app.toast({ title: js.sf("%n", value), content: js.sf("<ul style='padding:0;padding-left:8px;'><li>%s</li></ul>", content.join("</li><li>")), classes: "glassy fade"});
             }
             scope.sizer_selection.setContent(String.format("%H", content.join(" - ")));
-    		app.toast({ title: js.sf("%n", value), content: js.sf("<ul style='padding:0;padding-left:8px;'><li>%s</li></ul>", content.join("</li><li>")), classes: "glassy fade"});
         }, true);
 
         var down;
@@ -105,10 +107,11 @@ var deselect = () => {
                 }
                 
                 if(sizer._control !== null && name === "keyup" && evt.keyCode === 46 /*Delete*/) {
-                	const names = js.sf("%n", sizer._control).split("#");
+                	const uri = js.sf("%s%s%s", sizer._control.getUri(), sizer._control.isSelected() ? ":selected" : "", sizer._control.isRootComponent() ? ":root" : "");
+                	const names = js.sf("%s#%n", uri, sizer._control).split("#");
                 	let n;
                 	if(confirm(js.sf("Choose OK in order to confirm the destruction of the following component:\n\n%s\n\n%d component%s will be destroyed.", 
-                		names.map((n, i) => js.sf("- %s%s", i ? "#" : "", n)).join("\n"),
+                		names.map((n, i) => js.sf("- %s%s", i > 1 ? "#" : "", n)).join("\n"),
                 		(n = sizer._control.qsa("*").length + 1), n === 1 ? "" : "s"
                 	))) {
                 		sizer._control.destroy();
@@ -228,7 +231,6 @@ var deselect = () => {
         	this.up().print("document", window.location);
         },
         onEvaluate(expr) {
-
 			const cl = console.log;
 			// const cc = require("clipboard-copy");
 			const pr = () => this.print.apply(this, arguments);