@yuneta/gobj-ui 7.23.85 → 7.23.87

package/README.md

@@ -850,6 +850,20 @@ both keys, either — a G6 `trigger` is a CHORD, not a list of alternatives:
 `Shortcut.match()` compares the keys held to the keys bound as a SET, so
 `['Control', 'Meta']` would mean both at once.
 
+**One glyph size for every toolbar of the library** (`7.23.86`, moved to its
+proper home in `7.23.87`): `YUI_TOOLBAR_ICON_SIZE` in `yui_toolbar.js`, with a
+`yui_toolbar_icon()` that builds the `<i>`. It is in **`rem` and not `em`**
+for a reason worth keeping: in `em` the same `1.5em` drew 24px inside a plain
+button, 18px inside an `is-small` chip of the legend, and a labelled button
+left its icon at the inherited 16px — three sizes in two strips that are read
+as one thing. It is the toolbar's size and not the graph's: the JSON viewer,
+the treedb topics row and the treedb table row take it too. The app BAR keeps
+its own, bigger glyph (`.yui-toolbar-item .icon`, 1.35rem on 44px items) —
+that is a different band, not drift. The legend under the toolbar
+follows it: topic name at `1rem`, count at `.875rem` (the one deliberate step
+down), glyphs at the shared size, and `align-items: stretch` so a chip's star
+and crosshair are as tall as its body.
+
 `C_G6_NODES_TREE` floats a vertical toolbar over the canvas:
 
 | control | what it does |

package/dist/gobj-ui.cjs.js

@@ -10298,6 +10298,35 @@ function register_c_yui_uplot() {
 }
 //#endregion
 //#region src/yui_toolbar.js
+/************************************************************
+*  ONE size for every glyph of a view's toolbar, in `rem`.
+*
+*  It lives here because it belongs to the TOOLBAR and not to
+*  any one view: it was born in the graph rows (7.23.86) and the
+*  JSON viewer beside them still drew 16px, which is the same
+*  drift one level up.
+*
+*  `rem` and not `em` is the whole lesson: `em` is measured
+*  against the button, so one declaration draws three icons --
+*  `1.5em` is 24px in a plain button, 18px in an `is-small`
+*  chip, and a labelled button that declares nothing keeps the
+*  inherited 16px. `rem` is measured against the page, so a
+*  chip deliberately shorter than a button still carries the
+*  same glyph.
+*
+*  20px against a row's 16px text: an icon-only button is
+*  legible at half its 40px height, and beside a label the
+*  glyph reads as a marker rather than as a second word. The
+*  app BAR is a different band and keeps its own, bigger size
+*  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+************************************************************/
+var YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+function yui_toolbar_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
 function yui_toolbar(attrs = {}, items = []) {
 	function arrow_button(side, icon, label) {
 		return [
@@ -10577,10 +10606,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": (0, i18next.t)(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
-			class: icon
-		}],
+		yui_toolbar_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
@@ -11370,7 +11396,7 @@ var attrs_table$13 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "json_data", 0, null, "JSON data to visualize"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -11673,7 +11699,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -11707,19 +11733,23 @@ function make_toolbar$5(gobj) {
 		];
 	});
 	let right_items = [(0, _yuneta_gobj_js.createElement2)([
-		"select",
+		"div",
 		{
-			class: "JSON_GRAPH_LAYOUT select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: (0, i18next.t)("layout"),
-			"data-i18n-title": "layout",
-			"aria-label": (0, i18next.t)("layout"),
-			"data-i18n-aria-label": "layout"
+			class: "select",
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT",
+				style: { height: toolbar_wide },
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
@@ -13199,7 +13229,7 @@ function make_toolbar$4(gobj) {
 		[$search_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
@@ -13249,7 +13279,7 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 		[[
 			"span",
 			{ class: "icon" },
-			[["i", { class: icon }]]
+			[yui_toolbar_icon(icon)]
 		]],
 		{ click: function(evt) {
 			evt.stopPropagation();
@@ -13286,7 +13316,7 @@ function view_mode_switch$1(gobj) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: v.icon }]]
+					[yui_toolbar_icon(v.icon)]
 				]],
 				{ click: function(evt) {
 					evt.stopPropagation();
@@ -17462,7 +17492,7 @@ var attrs_table$9 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", 0, "vertical-compact", "Current layout key"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	(0, _yuneta_gobj_js.SDATA_END)()
@@ -18115,7 +18145,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18185,24 +18215,31 @@ function make_toolbar$1(gobj) {
 			LAYOUTS[key].label
 		]);
 	}
-	let $select = (0, _yuneta_gobj_js.createElement2)([
-		"select",
+	let $wrap = (0, _yuneta_gobj_js.createElement2)([
+		"div",
 		{
 			class: "select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: (0, i18next.t)("layout")
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "GOBJ_TREE_LAYOUT",
+				style: { height: toolbar_wide },
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			let value = evt.target.value;
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: value }, gobj);
 		} }
 	]);
-	priv.$layout_select = $select;
-	right_items.push($select);
+	priv.$layout_select = $wrap.querySelector("select");
+	right_items.push($wrap);
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -21352,7 +21389,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-arrow-left" }]]
+								[yui_toolbar_icon("yi-arrow-left")]
 							], [
 								"span",
 								{ i18n: "topics" },
@@ -21375,7 +21412,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-hexagon-nodes" }]]
+								[yui_toolbar_icon("yi-hexagon-nodes")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -21396,7 +21433,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-cloudversify" }]]
+								[yui_toolbar_icon("yi-cloudversify")]
 							], [
 								"span",
 								{ class: "TREEDB_TOPICS_SOURCE_URL" },
@@ -21416,7 +21453,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-eye" }]]
+								[yui_toolbar_icon("yi-eye")]
 							], [
 								"span",
 								{ i18n: "raw json" },
@@ -24036,7 +24073,7 @@ function build_ui$5(gobj) {
 					id: ``,
 					class: "button button-edit-record mr-1"
 				},
-				[["i", { class: "yi-pen" }], [
+				[yui_toolbar_icon("yi-pen"), [
 					"span",
 					{
 						class: "is-hidden-mobile",
@@ -24059,7 +24096,7 @@ function build_ui$5(gobj) {
 						class: "button button-new-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-plus" }], [
+					[yui_toolbar_icon("yi-plus"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24083,7 +24120,7 @@ function build_ui$5(gobj) {
 						class: "button button-delete-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-trash" }], [
+					[yui_toolbar_icon("yi-trash"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24107,7 +24144,7 @@ function build_ui$5(gobj) {
 						class: "button button-copy-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-copy" }], [
+					[yui_toolbar_icon("yi-copy"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24131,7 +24168,7 @@ function build_ui$5(gobj) {
 						class: "button button-paste-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-paste" }], [
+					[yui_toolbar_icon("yi-paste"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24172,7 +24209,7 @@ function build_ui$5(gobj) {
 			}], [
 				"span",
 				{ class: "icon is-left" },
-				[["i", { class: "yi-magnifying-glass" }]]
+				[yui_toolbar_icon("yi-magnifying-glass")]
 			]]
 		]);
 		let $search_input = $search_box.querySelector(`#${search_id}`);
@@ -24190,7 +24227,7 @@ function build_ui$5(gobj) {
 				title: (0, i18next.t)("refresh"),
 				"data-i18n-title": "refresh"
 			},
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24216,7 +24253,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("schema"),
 				"data-i18n-aria-label": "schema"
 			},
-			[["i", { class: "yi-hexagon-nodes" }], [
+			[yui_toolbar_icon("yi-hexagon-nodes"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24242,7 +24279,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("columns"),
 				"data-i18n-aria-label": "columns"
 			},
-			[["i", { class: "yi-table" }], [
+			[yui_toolbar_icon("yi-table"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24268,7 +24305,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("export"),
 				"data-i18n-aria-label": "export"
 			},
-			[["i", { class: "yi-download" }], [
+			[yui_toolbar_icon("yi-download"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62082,10 +62119,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				["i", {
-					style: "font-size:1.5em; color:inherit;",
-					class: NODE_MODE_ICONS[mode]
-				}],
+				yui_toolbar_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62107,10 +62141,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;",
-			class: "yi-font"
-		}],
+		yui_toolbar_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62204,7 +62235,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62229,7 +62260,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[["i", { class: "yi-eye" }], [
+			[yui_toolbar_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62274,7 +62305,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63243,9 +63274,9 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
-var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
-var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -63418,7 +63449,7 @@ function refresh_legend(gobj) {
 			"div",
 			{
 				class: "GRAPH_LEGEND_CHIP buttons has-addons",
-				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
 			[$body].concat(extras.map((spec) => (0, _yuneta_gobj_js.createElement2)(spec)))
 		]);

package/dist/gobj-ui.es.js

@@ -10293,6 +10293,35 @@ function register_c_yui_uplot() {
 }
 //#endregion
 //#region src/yui_toolbar.js
+/************************************************************
+*  ONE size for every glyph of a view's toolbar, in `rem`.
+*
+*  It lives here because it belongs to the TOOLBAR and not to
+*  any one view: it was born in the graph rows (7.23.86) and the
+*  JSON viewer beside them still drew 16px, which is the same
+*  drift one level up.
+*
+*  `rem` and not `em` is the whole lesson: `em` is measured
+*  against the button, so one declaration draws three icons --
+*  `1.5em` is 24px in a plain button, 18px in an `is-small`
+*  chip, and a labelled button that declares nothing keeps the
+*  inherited 16px. `rem` is measured against the page, so a
+*  chip deliberately shorter than a button still carries the
+*  same glyph.
+*
+*  20px against a row's 16px text: an icon-only button is
+*  legible at half its 40px height, and beside a label the
+*  glyph reads as a marker rather than as a second word. The
+*  app BAR is a different band and keeps its own, bigger size
+*  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+************************************************************/
+var YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+function yui_toolbar_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
 function yui_toolbar(attrs = {}, items = []) {
 	function arrow_button(side, icon, label) {
 		return [
@@ -10572,10 +10601,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": t(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
-			class: icon
-		}],
+		yui_toolbar_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, event_name, { evt }, gobj);
@@ -11365,7 +11391,7 @@ var attrs_table$13 = [
 	SDATA(data_type_t.DTP_JSON, "json_data", 0, null, "JSON data to visualize"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	SDATA(data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	SDATA_END()
 ];
@@ -11668,7 +11694,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -11702,19 +11728,23 @@ function make_toolbar$5(gobj) {
 		];
 	});
 	let right_items = [createElement2([
-		"select",
+		"div",
 		{
-			class: "JSON_GRAPH_LAYOUT select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: t("layout"),
-			"data-i18n-title": "layout",
-			"aria-label": t("layout"),
-			"data-i18n-aria-label": "layout"
+			class: "select",
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT",
+				style: { height: toolbar_wide },
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
@@ -13194,7 +13224,7 @@ function make_toolbar$4(gobj) {
 		[$search_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
@@ -13244,7 +13274,7 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 		[[
 			"span",
 			{ class: "icon" },
-			[["i", { class: icon }]]
+			[yui_toolbar_icon(icon)]
 		]],
 		{ click: function(evt) {
 			evt.stopPropagation();
@@ -13281,7 +13311,7 @@ function view_mode_switch$1(gobj) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: v.icon }]]
+					[yui_toolbar_icon(v.icon)]
 				]],
 				{ click: function(evt) {
 					evt.stopPropagation();
@@ -17457,7 +17487,7 @@ var attrs_table$9 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	SDATA(data_type_t.DTP_STRING, "layout", 0, "vertical-compact", "Current layout key"),
 	SDATA(data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	SDATA_END()
@@ -18110,7 +18140,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18180,24 +18210,31 @@ function make_toolbar$1(gobj) {
 			LAYOUTS[key].label
 		]);
 	}
-	let $select = createElement2([
-		"select",
+	let $wrap = createElement2([
+		"div",
 		{
 			class: "select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: t("layout")
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "GOBJ_TREE_LAYOUT",
+				style: { height: toolbar_wide },
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			let value = evt.target.value;
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: value }, gobj);
 		} }
 	]);
-	priv.$layout_select = $select;
-	right_items.push($select);
+	priv.$layout_select = $wrap.querySelector("select");
+	right_items.push($wrap);
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -21347,7 +21384,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-arrow-left" }]]
+								[yui_toolbar_icon("yi-arrow-left")]
 							], [
 								"span",
 								{ i18n: "topics" },
@@ -21370,7 +21407,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-hexagon-nodes" }]]
+								[yui_toolbar_icon("yi-hexagon-nodes")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -21391,7 +21428,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-cloudversify" }]]
+								[yui_toolbar_icon("yi-cloudversify")]
 							], [
 								"span",
 								{ class: "TREEDB_TOPICS_SOURCE_URL" },
@@ -21411,7 +21448,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-eye" }]]
+								[yui_toolbar_icon("yi-eye")]
 							], [
 								"span",
 								{ i18n: "raw json" },
@@ -24031,7 +24068,7 @@ function build_ui$5(gobj) {
 					id: ``,
 					class: "button button-edit-record mr-1"
 				},
-				[["i", { class: "yi-pen" }], [
+				[yui_toolbar_icon("yi-pen"), [
 					"span",
 					{
 						class: "is-hidden-mobile",
@@ -24054,7 +24091,7 @@ function build_ui$5(gobj) {
 						class: "button button-new-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-plus" }], [
+					[yui_toolbar_icon("yi-plus"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24078,7 +24115,7 @@ function build_ui$5(gobj) {
 						class: "button button-delete-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-trash" }], [
+					[yui_toolbar_icon("yi-trash"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24102,7 +24139,7 @@ function build_ui$5(gobj) {
 						class: "button button-copy-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-copy" }], [
+					[yui_toolbar_icon("yi-copy"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24126,7 +24163,7 @@ function build_ui$5(gobj) {
 						class: "button button-paste-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-paste" }], [
+					[yui_toolbar_icon("yi-paste"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24167,7 +24204,7 @@ function build_ui$5(gobj) {
 			}], [
 				"span",
 				{ class: "icon is-left" },
-				[["i", { class: "yi-magnifying-glass" }]]
+				[yui_toolbar_icon("yi-magnifying-glass")]
 			]]
 		]);
 		let $search_input = $search_box.querySelector(`#${search_id}`);
@@ -24185,7 +24222,7 @@ function build_ui$5(gobj) {
 				title: t("refresh"),
 				"data-i18n-title": "refresh"
 			},
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24211,7 +24248,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("schema"),
 				"data-i18n-aria-label": "schema"
 			},
-			[["i", { class: "yi-hexagon-nodes" }], [
+			[yui_toolbar_icon("yi-hexagon-nodes"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24237,7 +24274,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("columns"),
 				"data-i18n-aria-label": "columns"
 			},
-			[["i", { class: "yi-table" }], [
+			[yui_toolbar_icon("yi-table"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24263,7 +24300,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("export"),
 				"data-i18n-aria-label": "export"
 			},
-			[["i", { class: "yi-download" }], [
+			[yui_toolbar_icon("yi-download"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62077,10 +62114,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				["i", {
-					style: "font-size:1.5em; color:inherit;",
-					class: NODE_MODE_ICONS[mode]
-				}],
+				yui_toolbar_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62102,10 +62136,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;",
-			class: "yi-font"
-		}],
+		yui_toolbar_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62199,7 +62230,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62224,7 +62255,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[["i", { class: "yi-eye" }], [
+			[yui_toolbar_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62269,7 +62300,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63238,9 +63269,9 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
-var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
-var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
@@ -63413,7 +63444,7 @@ function refresh_legend(gobj) {
 			"div",
 			{
 				class: "GRAPH_LEGEND_CHIP buttons has-addons",
-				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
 			[$body].concat(extras.map((spec) => createElement2(spec)))
 		]);

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -54,7 +54,7 @@ import {
 } from "./yui_gclass_view.js";
 import {yui_shell_of} from "./c_yui_shell.js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
@@ -98,7 +98,7 @@ SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Container eleme
 SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
-SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "wide",             0,  "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 SDATA(data_type_t.DTP_STRING,   "layout",           0,  "vertical-compact", "Current layout key"),
 SDATA(data_type_t.DTP_INTEGER,  "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 
@@ -906,7 +906,7 @@ function make_find_items(gobj)
                  style: 'margin-left:.5rem; margin-right:.5rem; ' +
                         'max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -1018,23 +1018,27 @@ function make_toolbar(gobj)
         options.push(['option', opt_attrs, LAYOUTS[key].label]);
     }
 
-    let $select = createElement2(
-        ['select', {
-                class: 'select',
-                style: {height: toolbar_wide, "margin-left": "0.5em"},
-                title: t("layout"),
-            },
-            options,
-            {
-                change: (evt) => {
-                    let value = evt.target.value;
-                    gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: value}, gobj);
-                }
+    /*  `.select` on the WRAPPER and not on the control: Bulma styles
+     *  `.select select`, so the class on the `<select>` itself matched
+     *  nothing and the box kept the browser's 13.3px font in a row of
+     *  16px controls.  */
+    let $wrap = createElement2(
+        ['div', {class: 'select', style: {"margin-left": "0.5em"}}, [
+            ['select', {
+                class: 'GOBJ_TREE_LAYOUT',
+                style: {height: toolbar_wide},
+                title: t("layout"), 'data-i18n-title': "layout",
+                'aria-label': t("layout"), 'data-i18n-aria-label': "layout",
+            }, options]
+        ], {
+            change: (evt) => {
+                let value = evt.target.value;
+                gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: value}, gobj);
             }
-        ]
+        }]
     );
-    priv.$layout_select = $select;
-    right_items.push($select);
+    priv.$layout_select = $wrap.querySelector("select");
+    right_items.push($wrap);
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],

package/src/c_yui_json.js

@@ -102,7 +102,7 @@ import {
     container_label,
 } from "./json_view_helpers.js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {register_c_yui_json_graph} from "./c_yui_json_graph.js";
 import {attach_clear} from "./yui_inputs.js";
 
@@ -388,7 +388,7 @@ function make_toolbar(gobj)
         ['div', {class: 'control has-icons-left JSON_SEARCH_CONTROL',
                  style: 'max-width:22em;'}, [
             $search_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     /*  The GLOBAL fold leads the row, ahead of the find box — the same
      *  place both graphs put theirs.  It opens the whole document; the
@@ -426,7 +426,7 @@ function icon_button(gobj, icon, event_name, label_key)
     return ['button', {class: `button ${event_name}`, style: 'width:2.5em;',
                        title: t(label_key), 'data-i18n-title': label_key,
                        'aria-label': t(label_key), 'data-i18n-aria-label': label_key}, [
-        ['span', {class: 'icon'}, [['i', {class: icon}]]]
+        ['span', {class: 'icon'}, [yui_toolbar_icon(icon)]]
     ], {
         click: function(evt) {
             evt.stopPropagation();
@@ -452,7 +452,7 @@ function view_mode_switch(gobj)
                            type: 'button', style: 'width:2.5em;',
                            title: label, 'data-i18n-title': v.key,
                            'aria-label': label, 'data-i18n-aria-label': v.key}, [
-            ['span', {class: 'icon'}, [['i', {class: v.icon}]]]
+            ['span', {class: 'icon'}, [yui_toolbar_icon(v.icon)]]
         ], {
             click: function(evt) {
                 evt.stopPropagation();

package/src/c_yui_json_graph.js

@@ -47,7 +47,7 @@ import {
     refresh_language,
 } from "@yuneta/gobj-js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
@@ -176,7 +176,7 @@ SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Container eleme
 SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
-SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "wide",             0,  "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 SDATA(data_type_t.DTP_STRING,   "layout",           0,  "json-tree", "Layout key (see LAYOUTS)"),
 
 SDATA_END()
@@ -585,7 +585,7 @@ function make_toolbar(gobj)
         ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -656,13 +656,20 @@ function make_toolbar(gobj)
         return ['option', attrs, layout_label(key)];
     });
 
+    /*  Bulma's `.select` styles a WRAPPER that holds the control, not
+     *  the control: on the `<select>` itself its `.select select` rule
+     *  never matches, so the box kept the browser's own font -- 13.3px
+     *  in a row where everything else says 16 -- and none of Bulma's
+     *  chrome. The class goes where Bulma looks for it.  */
     let $layout_select = createElement2(
-        ['select', {
-            class: 'JSON_GRAPH_LAYOUT select',
-            style: {height: toolbar_wide, "margin-left": "0.5em"},
-            title: t("layout"), 'data-i18n-title': "layout",
-            'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
-        }, options, {
+        ['div', {class: 'select', style: {"margin-left": "0.5em"}}, [
+            ['select', {
+                class: 'JSON_GRAPH_LAYOUT',
+                style: {height: toolbar_wide},
+                title: t("layout"), 'data-i18n-title': "layout",
+                'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
+            }, options]
+        ], {
             change: (evt) => {
                 evt.stopPropagation();
                 gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: evt.target.value}, gobj);

package/src/c_yui_shell.css

@@ -524,6 +524,16 @@
  *      Circular badge populated by the host-registered provider
  *      via yui_shell_set_avatar_provider().
  *============================================================*/
+/*  The badge is 2rem, and the item's own 0.5rem padding put the
+ *  avatar at 48px in a row of 44px items -- the only thing in the app
+ *  bar that stood taller than the rest. The padding gives way; the
+ *  badge (which is the identity, and the hit target) does not, and the
+ *  item keeps the row's 2.75rem min-height.  */
+.yui-toolbar-item.yui-toolbar-avatar {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
 .yui-toolbar-avatar .yui-avatar {
     display: inline-flex;
     align-items: center;

package/src/c_yui_treedb_graph.js

@@ -79,10 +79,11 @@ import {
     gobj_stop_children,
 } from "@yuneta/gobj-js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+
 import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
 import {yui_graph_fold_items} from "./yui_graph_camera.js";
+import {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE} from "./yui_toolbar.js";
 import {
     removeChildElements,
     disableElements,
@@ -574,7 +575,7 @@ function node_shape_items(gobj, wide)
                            title: t(key), 'data-i18n-title': key,
                            'aria-label': t(key), 'data-i18n-aria-label': key,
                            'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: NODE_MODE_ICONS[mode]}],
+            yui_toolbar_icon(NODE_MODE_ICONS[mode]),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -591,7 +592,7 @@ function node_shape_items(gobj, wide)
                     title: t('node labels'), 'data-i18n-title': 'node labels',
                     'aria-label': t('node labels'), 'data-i18n-aria-label': 'node labels',
                     'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: 'yi-font'}],
+            yui_toolbar_icon('yi-font'),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -693,7 +694,7 @@ function make_toolbar(gobj)
         }],
 
         ['button', {class: 'GRAPH_REFRESH button'}, [
-            ['i', {class: 'yi-arrows-rotate'}],
+            yui_toolbar_icon('yi-arrows-rotate'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'refresh'}, 'refresh']
         ], {
             click: (evt) => {
@@ -718,7 +719,7 @@ function make_toolbar(gobj)
         ['button', {class: 'button ml-2 TREEDB_JSON_BTN',
                     title: t('raw json'), 'aria-label': t('raw json'),
                     'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-            ['i', {class: 'yi-eye'}],
+            yui_toolbar_icon('yi-eye'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'raw json'}, 'raw json']
         ], {
             click: (evt) => {
@@ -775,7 +776,7 @@ function make_toolbar(gobj)
         ['div', {class: 'GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -2453,19 +2454,20 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
  *  into the URL, so what you are looking at stays linkable.
  ************************************************************/
-/*  The glyphs of a chip's small buttons: `is-small` sets a 0.75rem
- *  font and a star or a crosshair at that size is a speck. The BUTTON
- *  stays small so the strip keeps its height; the glyph inside grows.  */
-const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
-
-/*  And the same for what a chip SAYS. The legend is a layer control --
- *  a gadget somebody uses, not a footnote somebody glances at -- and a
- *  topic name is the thing it is read for, so 0.75rem is the wrong
- *  size for it. The button stays `is-small` because the strip has to
- *  hold a chip per topic on one row; the name and the count come back
- *  up inside it, exactly as the glyphs did.  */
-const LEGEND_NAME_STYLE  = 'font-size:1.2em; line-height:1.2;';
-const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:1em;';
+/*  The legend is the strip UNDER the toolbar, and the two are read as
+ *  one thing: what they say has to be the same size, or the lower one
+ *  reads as a footnote to the upper. `is-small` earns its place in the
+ *  PADDING -- a chip per topic has to fit on one row -- and nowhere
+ *  else, so the text and the glyphs are given back in `rem`, which is
+ *  measured against the page instead of against the 0.75rem the class
+ *  sets. In `em` they were 18px and 14.4px against the toolbar's 24px
+ *  and 16px: three sizes in two strips.
+ *
+ *  The count is the one deliberate step down: it is the number beside
+ *  the name, not the name.  */
+const LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
+const LEGEND_NAME_STYLE  = 'font-size:1rem; line-height:1.2;';
+const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:.875rem;';
 
 /*  The focused chip is HIGHLIGHTED, not pressed. The body of a chip is
  *  the show/hide toggle, and that is what its `aria-pressed` says;
@@ -2653,8 +2655,15 @@ function refresh_legend(gobj)
         }
 
         let $chip = createElement2(
+            /*  `align-items: stretch`: Bulma's `.buttons` centres its
+             *  children, so the star and the crosshair -- a glyph and
+             *  nothing else -- stood 20px tall beside a 30px chip body
+             *  that carries a swatch, a name and a count. In a
+             *  `has-addons` group that reads as three buttons of three
+             *  heights welded together.  */
             ['div', {class: 'GRAPH_LEGEND_CHIP buttons has-addons',
-                     style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap;'},
+                     style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap; ' +
+                            'align-items:stretch;'},
              [$body].concat(extras.map((spec) => createElement2(spec)))]
         );
         $legend.appendChild($chip);

package/src/c_yui_treedb_topic_with_form.js

@@ -91,6 +91,8 @@ import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
 
+import {yui_toolbar_icon} from "./yui_toolbar.js";
+
 import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
 import {yui_file_read, yui_files_manifest, yui_file_id_label} from "./yui_file_field.js";
 import {yui_asset_id} from "./yui_asset.js";
@@ -583,7 +585,7 @@ function build_ui(gobj)
              *  reorder this group as if they were peer actions.  */
             let $edit_button = createElement2(
                 ['button', {id: ``, class: 'button button-edit-record mr-1'}, [
-                    ['i', {class: 'yi-pen'}],
+                    yui_toolbar_icon('yi-pen'),
                     ['span',
                         {
                             class: 'is-hidden-mobile', i18n: 'edit', style: 'padding-left:5px;'
@@ -609,7 +611,7 @@ function build_ui(gobj)
             if(with_new_button) {
                 let $new_button = createElement2(
                     ['button', {id: ``, class: 'button button-new-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-plus'}],
+                        yui_toolbar_icon('yi-plus'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'new', style: 'padding-left:5px;'
@@ -629,7 +631,7 @@ function build_ui(gobj)
             if(with_delete_button) {
                 let $delete_button = createElement2(
                     ['button', {id: ``, class: 'button button-delete-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-trash'}],
+                        yui_toolbar_icon('yi-trash'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'delete', style: 'padding-left:5px;'
@@ -650,7 +652,7 @@ function build_ui(gobj)
             if(with_copy_button) {
                 let $copy_button = createElement2(
                     ['button', {id: ``, class: 'button button-copy-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-copy'}],
+                        yui_toolbar_icon('yi-copy'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'copy', style: 'padding-left:5px;'
@@ -671,7 +673,7 @@ function build_ui(gobj)
             if(with_paste_button) {
                 let $paste_button = createElement2(
                     ['button', {id: ``, class: 'button button-paste-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-paste'}],
+                        yui_toolbar_icon('yi-paste'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'paste', style: 'padding-left:5px;'
@@ -727,7 +729,7 @@ function build_ui(gobj)
                     'data-i18n-placeholder': 'search'
                 }],
                 ['span', {class: 'icon is-left'}, [
-                    ['i', {class: 'yi-magnifying-glass'}]
+                    yui_toolbar_icon('yi-magnifying-glass')
                 ]]
             ]]
         );
@@ -754,7 +756,7 @@ function build_ui(gobj)
     if(with_refresh_button) {
         let $refresh = createElement2(
             ['button', {class: 'button mr-1', title: t('refresh'), 'data-i18n-title': 'refresh'}, [
-                ['i', {class: 'yi-arrows-rotate'}],
+                yui_toolbar_icon('yi-arrows-rotate'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'refresh', style: 'padding-left:5px;'}, 'refresh']
             ], {
                 'click': (event) => {
@@ -775,7 +777,7 @@ function build_ui(gobj)
             ['button', {class: 'TREEDB_TABLE_SCHEMA button mr-1',
                         title: t('schema'), 'data-i18n-title': 'schema',
                         'aria-label': t('schema'), 'data-i18n-aria-label': 'schema'}, [
-                ['i', {class: 'yi-hexagon-nodes'}],
+                yui_toolbar_icon('yi-hexagon-nodes'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'schema', style: 'padding-left:5px;'}, 'schema']
             ], {
                 'click': (event) => {
@@ -796,7 +798,7 @@ function build_ui(gobj)
                         title: t('choose the columns to show'),
                         'data-i18n-title': 'choose the columns to show',
                         'aria-label': t('columns'), 'data-i18n-aria-label': 'columns'}, [
-                ['i', {class: 'yi-table'}],
+                yui_toolbar_icon('yi-table'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'columns', style: 'padding-left:5px;'}, 'columns']
             ], {
                 'click': (event) => {
@@ -817,7 +819,7 @@ function build_ui(gobj)
                         title: t('download the rows loaded in this table as csv'),
                         'data-i18n-title': 'download the rows loaded in this table as csv',
                         'aria-label': t('export'), 'data-i18n-aria-label': 'export'}, [
-                ['i', {class: 'yi-download'}],
+                yui_toolbar_icon('yi-download'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'export', style: 'padding-left:5px;'}, 'export']
             ], {
                 'click': (event) => {

package/src/c_yui_treedb_topics.js

@@ -60,6 +60,7 @@ import "./c_yui_treedb_topics.css";
 import {yui_shell_show_error, yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
 import {yui_shell_of, yui_shell_set_sub_routes} from "./c_yui_shell.js";
 import {nodes_answer} from "./nodes_answer.js";
+import {yui_toolbar_icon} from "./yui_toolbar.js";
 
 import {t} from "i18next";
 
@@ -273,7 +274,7 @@ function build_ui(gobj)
                     ['button', {class: 'button TREEDB_TOPICS_BACK is-hidden',
                                 title: t('topics'), 'aria-label': t('topics'),
                                 'data-i18n-title': 'topics', 'data-i18n-aria-label': 'topics'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-arrow-left'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-arrow-left')]],
                         ['span', {i18n: 'topics'}, 'topics']
                     ], {
                         click: (evt) => {
@@ -287,7 +288,7 @@ function build_ui(gobj)
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-hexagon-nodes'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -305,7 +306,7 @@ function build_ui(gobj)
                     ['div', {class: source_url?
                                 'TREEDB_TOPICS_SOURCE' : 'TREEDB_TOPICS_SOURCE is-hidden',
                              title: source_url, 'aria-label': source_url}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-cloudversify'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-cloudversify')]],
                         ['span', {class: 'TREEDB_TOPICS_SOURCE_URL'}, source_url]
                     ]],
                     /*  Inspect the treedb's raw tranger json (whole service,
@@ -315,7 +316,7 @@ function build_ui(gobj)
                                 style: 'margin-left:auto;',
                                 title: t('raw json'), 'aria-label': t('raw json'),
                                 'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-eye'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-eye')]],
                         ['span', {i18n: 'raw json'}, 'raw json']
                     ], {
                         click: (evt) => {

package/src/yui_graph_camera.js

@@ -40,6 +40,9 @@ import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
 import {t} from "i18next";
 
 import {set_pressed_state} from "./lib_graph.js";
+/*  The glyph size is the TOOLBAR's, not the graph's: it is shared with
+ *  the JSON viewer and the treedb topics row, which are not graphs.  */
+import {yui_toolbar_icon} from "./yui_toolbar.js";
 
 
 /************************************************************
@@ -51,8 +54,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style)
                        style: {height: wide, width: '2.5em'},
                        title: t(label_key), 'data-i18n-title': label_key,
                        'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        ['i', {style: 'font-size:1.5em; color:inherit;' + (extra_style || ''),
-               class: icon}],
+        yui_toolbar_icon(icon, extra_style),
         {
             click: (evt) => {
                 evt.stopPropagation();

package/src/yui_toolbar.js

@@ -16,6 +16,41 @@ import {
 
 import "./yui_toolbar.css"; // Must be in index.js ?
 
+
+/************************************************************
+ *  ONE size for every glyph of a view's toolbar, in `rem`.
+ *
+ *  It lives here because it belongs to the TOOLBAR and not to
+ *  any one view: it was born in the graph rows (7.23.86) and the
+ *  JSON viewer beside them still drew 16px, which is the same
+ *  drift one level up.
+ *
+ *  `rem` and not `em` is the whole lesson: `em` is measured
+ *  against the button, so one declaration draws three icons --
+ *  `1.5em` is 24px in a plain button, 18px in an `is-small`
+ *  chip, and a labelled button that declares nothing keeps the
+ *  inherited 16px. `rem` is measured against the page, so a
+ *  chip deliberately shorter than a button still carries the
+ *  same glyph.
+ *
+ *  20px against a row's 16px text: an icon-only button is
+ *  legible at half its 40px height, and beside a label the
+ *  glyph reads as a marker rather than as a second word. The
+ *  app BAR is a different band and keeps its own, bigger size
+ *  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+ ************************************************************/
+const YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+
+/*  The `<i>` spec of a toolbar glyph, at that one size.  */
+function yui_toolbar_icon(icon_class, extra_style)
+{
+    return ['i', {
+        class: icon_class,
+        style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` +
+               (extra_style || ''),
+    }];
+}
+
 function yui_toolbar(attrs={}, items = [])
 {
     /*
@@ -125,4 +160,4 @@ function yui_toolbar(attrs={}, items = [])
     return $toolbar;
 }
 
-export {yui_toolbar};
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE};