@yuneta/gobj-ui 7.23.177 → 7.23.179

package/dist/gobj-ui.cjs.js

@@ -76444,6 +76444,10 @@ function ensure_dev_style() {
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
+    part that gives way when the row runs out of width -- the event name and
+    the size/time must not be the ones to go.  */
+.TRAFFIC_SRC { opacity: 0.45; font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
@@ -76508,8 +76512,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 ******************************/
 /************************************************************
 *  One scalar field as a bullet row: `• key: value`.
-*  Type-coloured; long strings clipped (full text on hover);
-*  timestamp fields get an ISO annotation.
+*  Type-coloured; long strings clipped (the whole value is in the Expanded
+*  view); timestamp fields get an ISO annotation.
 ************************************************************/
 function traffic_scalar_row(key, value) {
 	let cls;
@@ -76527,14 +76531,10 @@ function traffic_scalar_row(key, value) {
 		cls = "t-str";
 		text = String(value);
 	}
-	let full = text;
 	if (text.length > 200) text = text.slice(0, 200) + "…";
 	let val_children = [[
 		"span",
-		{
-			class: "TRAFFIC_VAL " + cls,
-			title: full
-		},
+		{ class: "TRAFFIC_VAL " + cls },
 		text
 	]];
 	if (key in TRAFFIC_TS_FIELDS && typeof value === "number") {
@@ -76640,10 +76640,7 @@ function traffic_value_node(key, value) {
 				],
 				[
 					"span",
-					{
-						class: "TRAFFIC_NEST_HINT",
-						title: `${count}`
-					},
+					{ class: "TRAFFIC_NEST_HINT" },
 					hint
 				]
 			]
@@ -76681,6 +76678,11 @@ function event_spans(e) {
 		{ class: "TRAFFIC_CMD" },
 		e.command
 	]);
+	if (e.title) spans.push([
+		"span",
+		{ class: "TRAFFIC_SRC" },
+		e.title
+	]);
 	return spans;
 }
 function render_detailed(e) {
@@ -76708,10 +76710,7 @@ function render_detailed(e) {
 	]);
 	return (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
@@ -76766,20 +76765,14 @@ function render_full(e) {
 	]];
 	return (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
 function render_log(e) {
 	let $row = (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{
-			class: "YDEV_LOGROW YDEV_LOG_" + e.level,
-			title: e.level
-		},
+		{ class: "YDEV_LOGROW YDEV_LOG_" + e.level },
 		[
 			[
 				"span",

package/dist/gobj-ui.es.js

@@ -76439,6 +76439,10 @@ function ensure_dev_style() {
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
+    part that gives way when the row runs out of width -- the event name and
+    the size/time must not be the ones to go.  */
+.TRAFFIC_SRC { opacity: 0.45; font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
@@ -76503,8 +76507,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 ******************************/
 /************************************************************
 *  One scalar field as a bullet row: `• key: value`.
-*  Type-coloured; long strings clipped (full text on hover);
-*  timestamp fields get an ISO annotation.
+*  Type-coloured; long strings clipped (the whole value is in the Expanded
+*  view); timestamp fields get an ISO annotation.
 ************************************************************/
 function traffic_scalar_row(key, value) {
 	let cls;
@@ -76522,14 +76526,10 @@ function traffic_scalar_row(key, value) {
 		cls = "t-str";
 		text = String(value);
 	}
-	let full = text;
 	if (text.length > 200) text = text.slice(0, 200) + "…";
 	let val_children = [[
 		"span",
-		{
-			class: "TRAFFIC_VAL " + cls,
-			title: full
-		},
+		{ class: "TRAFFIC_VAL " + cls },
 		text
 	]];
 	if (key in TRAFFIC_TS_FIELDS && typeof value === "number") {
@@ -76635,10 +76635,7 @@ function traffic_value_node(key, value) {
 				],
 				[
 					"span",
-					{
-						class: "TRAFFIC_NEST_HINT",
-						title: `${count}`
-					},
+					{ class: "TRAFFIC_NEST_HINT" },
 					hint
 				]
 			]
@@ -76676,6 +76673,11 @@ function event_spans(e) {
 		{ class: "TRAFFIC_CMD" },
 		e.command
 	]);
+	if (e.title) spans.push([
+		"span",
+		{ class: "TRAFFIC_SRC" },
+		e.title
+	]);
 	return spans;
 }
 function render_detailed(e) {
@@ -76703,10 +76705,7 @@ function render_detailed(e) {
 	]);
 	return createElement2([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
@@ -76761,20 +76760,14 @@ function render_full(e) {
 	]];
 	return createElement2([
 		"div",
-		{
-			class: "TRAFFIC_ENTRY " + dir_class(e.dir),
-			title: e.title
-		},
+		{ class: "TRAFFIC_ENTRY " + dir_class(e.dir) },
 		children
 	]);
 }
 function render_log(e) {
 	let $row = createElement2([
 		"div",
-		{
-			class: "YDEV_LOGROW YDEV_LOG_" + e.level,
-			title: e.level
-		},
+		{ class: "YDEV_LOGROW YDEV_LOG_" + e.level },
 		[
 			[
 				"span",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.177",
+  "version": "7.23.179",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/yui_dev.js

@@ -464,6 +464,10 @@ function ensure_dev_style()
 .TRAFFIC_ARROW { font-weight: 700; }
 .TRAFFIC_EVENT { font-weight: 700; }
 .TRAFFIC_CMD { opacity: 0.75; font-weight: 600; }
+/*  Where the message went through. min-width 0 and flex 0 1 auto so it is the
+    part that gives way when the row runs out of width -- the event name and
+    the size/time must not be the ones to go.  */
+.TRAFFIC_SRC { opacity: 0.45; font-size: 11px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dir-out .TRAFFIC_ARROW, .dir-out .TRAFFIC_EVENT { color: #2563eb; }
 .dir-in  .TRAFFIC_ARROW, .dir-in  .TRAFFIC_EVENT { color: #059669; }
 .dir-err .TRAFFIC_ARROW, .dir-err .TRAFFIC_EVENT { color: #dc2626; }
@@ -532,8 +536,8 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 
 /************************************************************
  *  One scalar field as a bullet row: `• key: value`.
- *  Type-coloured; long strings clipped (full text on hover);
- *  timestamp fields get an ISO annotation.
+ *  Type-coloured; long strings clipped (the whole value is in the Expanded
+ *  view); timestamp fields get an ISO annotation.
  ************************************************************/
 function traffic_scalar_row(key, value)
 {
@@ -553,13 +557,16 @@ function traffic_scalar_row(key, value)
         text = String(value);
     }
 
-    let full = text;
     if(text.length > 200) {
         text = text.slice(0, 200) + "…";
     }
 
+    /*  No `title` with the full text: a tooltip that pops over the log while
+        it is being read is what this window had too much of, and the whole
+        value is one click away in the Expanded view. On a value SHORTER than
+        the clip -- almost all of them -- it repeated the visible text anyway.  */
     let val_children = [
-        ['span', {class: 'TRAFFIC_VAL ' + cls, title: full}, text],
+        ['span', {class: 'TRAFFIC_VAL ' + cls}, text],
     ];
     if((key in TRAFFIC_TS_FIELDS) && typeof value === "number") {
         let iso = traffic_iso(value);
@@ -662,7 +669,7 @@ function traffic_value_node(key, value)
         ['summary', {}, [
             ['span', {class: 'TRAFFIC_BULLET'}, '▸'],
             ['span', {class: 'TRAFFIC_NEST_KEY'}, key],
-            ['span', {class: 'TRAFFIC_NEST_HINT', title: `${count}`}, hint],
+            ['span', {class: 'TRAFFIC_NEST_HINT'}, hint],
         ]],
         ['div', {class: 'TRAFFIC_KW'}, traffic_bullets(value)],
     ]];
@@ -692,6 +699,20 @@ function traffic_bullets(obj)
                      ******************************/
 
 
+/*  The head of a traffic entry: direction, event, command, and WHERE the
+ *  message went through -- the gobj and the url, which gobj-js composes
+ *  (`c_ievent_cli`) and the browser console prints in its prefix.
+ *
+ *  It is written as TEXT, dim, and not as a `title`: as a tooltip it popped a
+ *  box over the log while it was being read, and it is the one thing in that
+ *  tooltip that was written nowhere else -- an app browsing several backends
+ *  cannot tell its messages apart without it. It shrinks before anything
+ *  else in the row.
+ *
+ *  The string carries its own `==>` / `<==`, which says the direction the
+ *  arrow already says. It is left as it comes: taking it out means parsing a
+ *  string built in another package, and it would go wrong the day that one
+ *  writes it differently.  */
 function event_spans(e)
 {
     let spans = [['span', {class: 'TRAFFIC_ARROW'}, dir_arrow(e.dir)],
@@ -699,6 +720,9 @@ function event_spans(e)
     if(e.command) {
         spans.push(['span', {class: 'TRAFFIC_CMD'}, e.command]);
     }
+    if(e.title) {
+        spans.push(['span', {class: 'TRAFFIC_SRC'}, e.title]);
+    }
     return spans;
 }
 
@@ -715,7 +739,7 @@ function render_detailed(e)
     } else if(!kw) {
         children.push(['div', {class: 'TRAFFIC_KW'}, traffic_bullets(e.jn)]);
     }
-    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir), title: e.title}, children]);
+    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir)}, children]);
 }
 
 /*  Whether an Expanded-view section is shown (persisted toggles). schema
@@ -775,14 +799,14 @@ function render_full(e)
         ['div', {class: 'TRAFFIC_HEADER'}, head],
         ['pre', {class: 'TRAFFIC_FULL'}, text],
     ];
-    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir), title: e.title}, children]);
+    return createElement2(['div', {class: 'TRAFFIC_ENTRY ' + dir_class(e.dir)}, children]);
 }
 
 /*  A mirrored framework log line (error/warning/info/debug/msg). */
 function render_log(e)
 {
     let $row = createElement2(
-        ['div', {class: 'YDEV_LOGROW YDEV_LOG_' + e.level, title: e.level}, [
+        ['div', {class: 'YDEV_LOGROW YDEV_LOG_' + e.level}, [
             ['span', {class: 'YDEV_LOG_LVL'}, e.level],
             ['span', {class: 'YDEV_LOG_TXT'}, ''],
             ['span', {class: 'TRAFFIC_META'}, e.ts],
@@ -1757,4 +1781,11 @@ function build_dev_panel()
     return {$el: $el, dispose: dispose};
 }
 
-export {info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open};
+export {
+    info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open,
+    /*  Exported for its test: a pure formatter, and the import is also what
+        guards this file from a syntax error nothing else would catch --
+        the stylesheet below is a template literal, so one backtick in a CSS
+        comment stops the whole module from parsing.  */
+    object_preview,
+};

package/src/yui_dev_preview.test.js

@@ -0,0 +1,58 @@
+/***********************************************************************
+ *          yui_dev_preview.test.js
+ *
+ *          What a FOLDED object says about itself in the Developer
+ *          window: its first fields, the way a browser console says it.
+ *
+ *          Importing the module at all is half of this file's job: the
+ *          monitor's stylesheet is a template literal, so a single
+ *          backtick in a CSS comment stops yui_dev.js from parsing --
+ *          twice now -- and nothing else in the suite imports it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+import {object_preview} from "./yui_dev.js";
+
+describe("object_preview", () => {
+    it("names the first fields instead of counting them", () => {
+        const col = {
+            header: "id", fillspace: 18, type: "string",
+            flag: ["persistent"], hidden: false,
+        };
+        expect(object_preview(col, Object.keys(col).length)).toBe(
+            '{header: "id", fillspace: 18, type: "string", flag: […], …}'
+        );
+    });
+
+    it("quotes strings, so a value does not run into the next key", () => {
+        expect(object_preview({result: 0, comment: "ok"}, 2)).toBe(
+            '{result: 0, comment: "ok"}'
+        );
+    });
+
+    it("does not enter a nested container", () => {
+        const o = {a: {x: 1}, b: [1, 2]};
+        expect(object_preview(o, 2)).toBe("{a: {…}, b: […]}");
+    });
+
+    it("says there is more with an ellipsis", () => {
+        const o = {a: 1, b: 2, c: 3, d: 4, e: 5};
+        expect(object_preview(o, 5)).toBe("{a: 1, b: 2, c: 3, d: 4, …}");
+    });
+
+    it("clips a long string at 28 characters", () => {
+        const o = {comment: "x".repeat(60)};
+        expect(object_preview(o, 1)).toBe('{comment: "' + "x".repeat(28) + '…"}');
+    });
+
+    it("keeps one field even when it alone is too wide", () => {
+        const o = {only: "y".repeat(200), other: 1};
+        expect(object_preview(o, 2).startsWith('{only: "yyy')).toBe(true);
+    });
+
+    it("renders null and booleans as themselves", () => {
+        expect(object_preview({a: null, b: true}, 2)).toBe("{a: null, b: true}");
+    });
+});