@yuneta/gobj-ui 7.23.86 → 7.23.88

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 [
@@ -10555,30 +10584,6 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
-*   ONE size for every glyph of a graph's toolbar ROW, in
-*   `rem` and not `em`.
-*
-*   In `em` the same declaration draws three different icons:
-*   `1.5em` is 24px inside a plain button, 18px inside an
-*   `is-small` one, and a labelled button left its icon at the
-*   inherited 16px -- so one row held 16px, 18px and 24px
-*   glyphs and looked like three toolbars pushed together.
-*   `rem` is measured against the page, so a chip that is
-*   deliberately shorter than a button still carries the same
-*   glyph.
-*
-*   20px against the 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.
-************************************************************/
-var YUI_GRAPH_ICON_SIZE = "1.25rem";
-function yui_graph_icon(icon_class, extra_style) {
-	return ["i", {
-		class: icon_class,
-		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
-	}];
-}
-/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10596,7 +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
 		},
-		yui_graph_icon(icon, extra_style),
+		yui_toolbar_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, event_name, { evt }, gobj);
@@ -11386,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()
 ];
@@ -11689,7 +11694,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -11723,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);
@@ -13215,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"));
@@ -13265,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();
@@ -13302,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();
@@ -17478,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()
@@ -18131,7 +18140,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18201,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",
@@ -21368,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" },
@@ -21391,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" },
@@ -21412,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" },
@@ -21432,7 +21448,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-eye" }]]
+								[yui_toolbar_icon("yi-eye")]
 							], [
 								"span",
 								{ i18n: "raw json" },
@@ -24052,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",
@@ -24075,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",
@@ -24099,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",
@@ -24123,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",
@@ -24147,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",
@@ -24188,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}`);
@@ -24206,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",
@@ -24232,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",
@@ -24258,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",
@@ -24284,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",
@@ -61939,7 +61955,7 @@ function build_ui$3(gobj) {
 				"div",
 				{
 					class: "GRAPH_LEGEND is-flex-grow-0",
-					style: "display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; padding:.3rem .5rem; overflow-x:auto; min-height:2.2rem;"
+					style: "display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; padding:.3rem .5rem; overflow-x:auto; min-height:2.9rem;"
 				},
 				[]
 			],
@@ -62098,7 +62114,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				yui_graph_icon(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);
@@ -62120,7 +62136,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		yui_graph_icon("yi-font"),
+		yui_toolbar_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62214,7 +62230,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[yui_graph_icon("yi-arrows-rotate"), [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62239,7 +62255,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[yui_graph_icon("yi-eye"), [
+			[yui_toolbar_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62284,7 +62300,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63253,9 +63269,11 @@ 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:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+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;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem; opacity:.8;";
+var LEGEND_MAIN_NAME_STYLE = "font-size:1rem; line-height:1.2; font-weight:700;";
+var LEGEND_STAR_MAIN_STYLE = LEGEND_GLYPH_STYLE + " color:var(--bulma-warning-on-scheme, var(--bulma-warning, #ffdd57));";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
@@ -63281,20 +63299,20 @@ function refresh_legend(gobj) {
 			"span",
 			{
 				class: "GRAPH_LEGEND_NAME",
-				style: LEGEND_NAME_STYLE + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
+				style: (is_main ? LEGEND_MAIN_NAME_STYLE : LEGEND_NAME_STYLE) + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
 			},
 			topic_name
 		], [
 			"span",
 			{
-				class: "GRAPH_LEGEND_COUNT has-text-grey",
+				class: "GRAPH_LEGEND_COUNT",
 				style: LEGEND_COUNT_STYLE
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
 			title: t(body_key),
@@ -63302,8 +63320,15 @@ function refresh_legend(gobj) {
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"
 		};
-		if (is_main) body_attrs.disabled = "disabled";
-		let $body = createElement2([
+		let $body;
+		if (is_main) {
+			delete body_attrs["aria-pressed"];
+			$body = createElement2([
+				"div",
+				body_attrs,
+				controls
+			]);
+		} else $body = createElement2([
 			"button",
 			body_attrs,
 			controls,
@@ -63319,9 +63344,9 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small pressed_state",
+				class: "GRAPH_LEGEND_STAR button pressed_state",
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": t("main topic"),
@@ -63330,7 +63355,7 @@ function refresh_legend(gobj) {
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]],
 			{ click: (evt) => {
@@ -63344,23 +63369,23 @@ function refresh_legend(gobj) {
 		else if (is_main) extras.push([
 			"span",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small is-static",
-				style: "padding:0 .4rem;",
+				class: "GRAPH_LEGEND_STAR button",
+				style: "padding:0 .5rem; cursor:default;",
 				title: t("main topic"),
 				"data-i18n-title": "main topic"
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]]
 		]);
 		else if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small",
+				class: "GRAPH_LEGEND_STAR button",
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": t("main topic"),
@@ -63382,9 +63407,9 @@ function refresh_legend(gobj) {
 		if (!hidden && entry.linked && entry.loose > 0) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " pressed_state" : ""),
+				class: "GRAPH_LEGEND_LOOSE button" + (entry.loose_shown ? " pressed_state" : ""),
 				type: "button",
-				style: "padding:0 .45rem;",
+				style: "padding:0 .55rem;",
 				title: t("loose records"),
 				"data-i18n-title": "loose records",
 				"aria-label": t("loose records"),
@@ -63403,9 +63428,9 @@ function refresh_legend(gobj) {
 		if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " pressed_state" : ""),
+				class: "GRAPH_LEGEND_FOCUS button" + (focused ? " pressed_state" : ""),
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: t("highlight topic"),
 				"data-i18n-title": "highlight topic",
 				"aria-label": t("highlight topic"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.86",
+  "version": "7.23.88",
   "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,
@@ -62,7 +62,6 @@ import {
     yui_graph_update_anchor,
     yui_graph_center_on,
     yui_graph_fold_items,
-    yui_graph_icon,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
@@ -99,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."),
 
@@ -907,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'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -1019,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();