@yuneta/gobj-ui 7.23.172 → 7.23.174

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -76347,11 +76347,15 @@ function build_filter_ctx() {
76347
76347
  out: dev_num("dev_filter_out", 1),
76348
76348
  inc: dev_num("dev_filter_in", 1),
76349
76349
  err: dev_num("dev_filter_err", 1),
76350
- search: SEARCH_TEXT
76350
+ search: SEARCH_TEXT,
76351
+ view: dev_view()
76351
76352
  };
76352
76353
  }
76353
76354
  function entry_hidden(e, ctx) {
76354
- if (e.kind === "log") return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
76355
+ if (e.kind === "log") {
76356
+ if (e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) return true;
76357
+ return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
76358
+ }
76355
76359
  if (e.dir === 1 && !ctx.out) return true;
76356
76360
  if (e.dir === 2 && !ctx.inc) return true;
76357
76361
  if (e.dir === 3 && !ctx.err) return true;
@@ -76928,6 +76932,17 @@ function append_and_follow(logger, node) {
76928
76932
  if (at_bottom) logger.scrollTop = logger.scrollHeight;
76929
76933
  }
76930
76934
  /************************************************************
76935
+ * Keep one entry in the bounded buffer, dropping the oldest
76936
+ * (and its row, if painted).
76937
+ ************************************************************/
76938
+ function push_entry(entry) {
76939
+ TRAFFIC_LOG.push(entry);
76940
+ if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
76941
+ let old = TRAFFIC_LOG.shift();
76942
+ if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
76943
+ }
76944
+ }
76945
+ /************************************************************
76931
76946
  * Append one inter-event message. Kept in a bounded buffer so
76932
76947
  * view/filter switches repaint from memory. Shared by the legacy
76933
76948
  * C_YUI_WINDOW (setup_dev) and the modal (build_dev_panel).
@@ -76945,9 +76960,6 @@ function info_traffic(title, msg, direction, size) {
76945
76960
  }
76946
76961
  let route = dev_route();
76947
76962
  if (route !== "window") console_traffic(title, jn, direction, size);
76948
- let logger = document.getElementById("developer-traffic-logger");
76949
- if (!logger || route === "console") return;
76950
- ensure_dev_style();
76951
76963
  let event = jn && jn.event ? String(jn.event) : "(no event)";
76952
76964
  let kw = jn && jn.kw && typeof jn.kw === "object" ? jn.kw : null;
76953
76965
  let command = kw && typeof kw.command === "string" ? kw.command : "";
@@ -76969,11 +76981,10 @@ function info_traffic(title, msg, direction, size) {
76969
76981
  hay,
76970
76982
  $node: null
76971
76983
  };
76972
- TRAFFIC_LOG.push(entry);
76973
- if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
76974
- let old = TRAFFIC_LOG.shift();
76975
- if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
76976
- }
76984
+ push_entry(entry);
76985
+ let logger = document.getElementById("developer-traffic-logger");
76986
+ if (!logger || route === "console") return;
76987
+ ensure_dev_style();
76977
76988
  if (!entry_hidden(entry, build_filter_ctx())) {
76978
76989
  let node = render_entry(entry);
76979
76990
  entry.$node = node;
@@ -76994,15 +77005,8 @@ function info_log(level, msg, hora) {
76994
77005
  if (__in_info_log__) return;
76995
77006
  if (level === "error") LOG_ERR_COUNT++;
76996
77007
  else if (level === "warning") LOG_WARN_COUNT++;
76997
- if (dev_route() === "console") {
76998
- update_stats();
76999
- return;
77000
- }
77001
- let logger = document.getElementById("developer-traffic-logger");
77002
- if (!logger) return;
77003
77008
  __in_info_log__ = true;
77004
77009
  try {
77005
- ensure_dev_style();
77006
77010
  let lvl = level || "debug";
77007
77011
  let text;
77008
77012
  if (lvl === "json") {
@@ -77023,11 +77027,13 @@ function info_log(level, msg, hora) {
77023
77027
  hay: (lvl + " " + text).toLowerCase(),
77024
77028
  $node: null
77025
77029
  };
77026
- TRAFFIC_LOG.push(entry);
77027
- if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
77028
- let old = TRAFFIC_LOG.shift();
77029
- if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
77030
+ push_entry(entry);
77031
+ let logger = document.getElementById("developer-traffic-logger");
77032
+ if (!logger || dev_route() === "console") {
77033
+ update_stats();
77034
+ return;
77030
77035
  }
77036
+ ensure_dev_style();
77031
77037
  if (!entry_hidden(entry, build_filter_ctx())) {
77032
77038
  let node = render_entry(entry);
77033
77039
  entry.$node = node;
@@ -77090,9 +77096,14 @@ function toggle_automata() {
77090
77096
  }
77091
77097
  }
77092
77098
  function traffic_state() {
77099
+ if (!(0, _yuneta_gobj_js.gclass_find_by_name)("C_IEVENT_CLI")) return 0;
77093
77100
  return (0, _yuneta_gobj_js.gobj_get_gclass_trace_level2)("C_IEVENT_CLI").includes("ievents") ? 1 : 0;
77094
77101
  }
77095
77102
  function toggle_traffic() {
77103
+ if (!(0, _yuneta_gobj_js.gclass_find_by_name)("C_IEVENT_CLI")) {
77104
+ (0, _yuneta_gobj_js.log_error)("yui_dev: no C_IEVENT_CLI in this app, there is no traffic to trace");
77105
+ return;
77106
+ }
77096
77107
  yuno_trace_command("set-gclass-trace", {
77097
77108
  gclass_name: "C_IEVENT_CLI",
77098
77109
  level: "ievents",
@@ -77360,7 +77371,11 @@ function build_control_bar() {
77360
77371
  type: "search",
77361
77372
  "data-role": "search",
77362
77373
  placeholder: (0, i18next.t)("filter events / payload"),
77363
- "data-i18n-placeholder": "filter events / payload"
77374
+ "data-i18n-placeholder": "filter events / payload",
77375
+ title: (0, i18next.t)("filter events / payload"),
77376
+ "data-i18n-title": "filter events / payload",
77377
+ "aria-label": (0, i18next.t)("filter events / payload"),
77378
+ "data-i18n-aria-label": "filter events / payload"
77364
77379
  },
77365
77380
  "",
77366
77381
  { input: (ev) => {
@@ -77368,6 +77383,29 @@ function build_control_bar() {
77368
77383
  rerender_all();
77369
77384
  } }
77370
77385
  ];
77386
+ let search_clear = [
77387
+ "button",
77388
+ {
77389
+ class: "YDEV_CHIP YDEV_SEARCH_CLEAR",
77390
+ type: "button",
77391
+ title: (0, i18next.t)("clear the filter"),
77392
+ "data-i18n-title": "clear the filter",
77393
+ "aria-label": (0, i18next.t)("clear the filter"),
77394
+ "data-i18n-aria-label": "clear the filter"
77395
+ },
77396
+ "✕",
77397
+ { click: (ev) => {
77398
+ ev.stopPropagation();
77399
+ let $bar = ev.currentTarget.closest(".YDEV_BAR");
77400
+ let $input = $bar ? $bar.querySelector(".YDEV_SEARCH") : null;
77401
+ if ($input) {
77402
+ $input.value = "";
77403
+ $input.focus();
77404
+ }
77405
+ SEARCH_TEXT = "";
77406
+ rerender_all();
77407
+ } }
77408
+ ];
77371
77409
  let copy = [
77372
77410
  "button",
77373
77411
  {
@@ -77435,7 +77473,7 @@ function build_control_bar() {
77435
77473
  sep(),
77436
77474
  grp("show", dir_chips),
77437
77475
  sep(),
77438
- grp("find", [search]),
77476
+ grp("find", [search, search_clear]),
77439
77477
  sep(),
77440
77478
  grp("log", [copy, clear])
77441
77479
  ]
@@ -76342,11 +76342,15 @@ function build_filter_ctx() {
76342
76342
  out: dev_num("dev_filter_out", 1),
76343
76343
  inc: dev_num("dev_filter_in", 1),
76344
76344
  err: dev_num("dev_filter_err", 1),
76345
- search: SEARCH_TEXT
76345
+ search: SEARCH_TEXT,
76346
+ view: dev_view()
76346
76347
  };
76347
76348
  }
76348
76349
  function entry_hidden(e, ctx) {
76349
- if (e.kind === "log") return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
76350
+ if (e.kind === "log") {
76351
+ if (e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) return true;
76352
+ return !!(ctx.search && e.hay.indexOf(ctx.search) < 0);
76353
+ }
76350
76354
  if (e.dir === 1 && !ctx.out) return true;
76351
76355
  if (e.dir === 2 && !ctx.inc) return true;
76352
76356
  if (e.dir === 3 && !ctx.err) return true;
@@ -76923,6 +76927,17 @@ function append_and_follow(logger, node) {
76923
76927
  if (at_bottom) logger.scrollTop = logger.scrollHeight;
76924
76928
  }
76925
76929
  /************************************************************
76930
+ * Keep one entry in the bounded buffer, dropping the oldest
76931
+ * (and its row, if painted).
76932
+ ************************************************************/
76933
+ function push_entry(entry) {
76934
+ TRAFFIC_LOG.push(entry);
76935
+ if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
76936
+ let old = TRAFFIC_LOG.shift();
76937
+ if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
76938
+ }
76939
+ }
76940
+ /************************************************************
76926
76941
  * Append one inter-event message. Kept in a bounded buffer so
76927
76942
  * view/filter switches repaint from memory. Shared by the legacy
76928
76943
  * C_YUI_WINDOW (setup_dev) and the modal (build_dev_panel).
@@ -76940,9 +76955,6 @@ function info_traffic(title, msg, direction, size) {
76940
76955
  }
76941
76956
  let route = dev_route();
76942
76957
  if (route !== "window") console_traffic(title, jn, direction, size);
76943
- let logger = document.getElementById("developer-traffic-logger");
76944
- if (!logger || route === "console") return;
76945
- ensure_dev_style();
76946
76958
  let event = jn && jn.event ? String(jn.event) : "(no event)";
76947
76959
  let kw = jn && jn.kw && typeof jn.kw === "object" ? jn.kw : null;
76948
76960
  let command = kw && typeof kw.command === "string" ? kw.command : "";
@@ -76964,11 +76976,10 @@ function info_traffic(title, msg, direction, size) {
76964
76976
  hay,
76965
76977
  $node: null
76966
76978
  };
76967
- TRAFFIC_LOG.push(entry);
76968
- if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
76969
- let old = TRAFFIC_LOG.shift();
76970
- if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
76971
- }
76979
+ push_entry(entry);
76980
+ let logger = document.getElementById("developer-traffic-logger");
76981
+ if (!logger || route === "console") return;
76982
+ ensure_dev_style();
76972
76983
  if (!entry_hidden(entry, build_filter_ctx())) {
76973
76984
  let node = render_entry(entry);
76974
76985
  entry.$node = node;
@@ -76989,15 +77000,8 @@ function info_log(level, msg, hora) {
76989
77000
  if (__in_info_log__) return;
76990
77001
  if (level === "error") LOG_ERR_COUNT++;
76991
77002
  else if (level === "warning") LOG_WARN_COUNT++;
76992
- if (dev_route() === "console") {
76993
- update_stats();
76994
- return;
76995
- }
76996
- let logger = document.getElementById("developer-traffic-logger");
76997
- if (!logger) return;
76998
77003
  __in_info_log__ = true;
76999
77004
  try {
77000
- ensure_dev_style();
77001
77005
  let lvl = level || "debug";
77002
77006
  let text;
77003
77007
  if (lvl === "json") {
@@ -77018,11 +77022,13 @@ function info_log(level, msg, hora) {
77018
77022
  hay: (lvl + " " + text).toLowerCase(),
77019
77023
  $node: null
77020
77024
  };
77021
- TRAFFIC_LOG.push(entry);
77022
- if (TRAFFIC_LOG.length > TRAFFIC_MAX) {
77023
- let old = TRAFFIC_LOG.shift();
77024
- if (old.$node && old.$node.parentNode) old.$node.parentNode.removeChild(old.$node);
77025
+ push_entry(entry);
77026
+ let logger = document.getElementById("developer-traffic-logger");
77027
+ if (!logger || dev_route() === "console") {
77028
+ update_stats();
77029
+ return;
77025
77030
  }
77031
+ ensure_dev_style();
77026
77032
  if (!entry_hidden(entry, build_filter_ctx())) {
77027
77033
  let node = render_entry(entry);
77028
77034
  entry.$node = node;
@@ -77085,9 +77091,14 @@ function toggle_automata() {
77085
77091
  }
77086
77092
  }
77087
77093
  function traffic_state() {
77094
+ if (!gclass_find_by_name("C_IEVENT_CLI")) return 0;
77088
77095
  return gobj_get_gclass_trace_level2("C_IEVENT_CLI").includes("ievents") ? 1 : 0;
77089
77096
  }
77090
77097
  function toggle_traffic() {
77098
+ if (!gclass_find_by_name("C_IEVENT_CLI")) {
77099
+ log_error("yui_dev: no C_IEVENT_CLI in this app, there is no traffic to trace");
77100
+ return;
77101
+ }
77091
77102
  yuno_trace_command("set-gclass-trace", {
77092
77103
  gclass_name: "C_IEVENT_CLI",
77093
77104
  level: "ievents",
@@ -77355,7 +77366,11 @@ function build_control_bar() {
77355
77366
  type: "search",
77356
77367
  "data-role": "search",
77357
77368
  placeholder: t("filter events / payload"),
77358
- "data-i18n-placeholder": "filter events / payload"
77369
+ "data-i18n-placeholder": "filter events / payload",
77370
+ title: t("filter events / payload"),
77371
+ "data-i18n-title": "filter events / payload",
77372
+ "aria-label": t("filter events / payload"),
77373
+ "data-i18n-aria-label": "filter events / payload"
77359
77374
  },
77360
77375
  "",
77361
77376
  { input: (ev) => {
@@ -77363,6 +77378,29 @@ function build_control_bar() {
77363
77378
  rerender_all();
77364
77379
  } }
77365
77380
  ];
77381
+ let search_clear = [
77382
+ "button",
77383
+ {
77384
+ class: "YDEV_CHIP YDEV_SEARCH_CLEAR",
77385
+ type: "button",
77386
+ title: t("clear the filter"),
77387
+ "data-i18n-title": "clear the filter",
77388
+ "aria-label": t("clear the filter"),
77389
+ "data-i18n-aria-label": "clear the filter"
77390
+ },
77391
+ "✕",
77392
+ { click: (ev) => {
77393
+ ev.stopPropagation();
77394
+ let $bar = ev.currentTarget.closest(".YDEV_BAR");
77395
+ let $input = $bar ? $bar.querySelector(".YDEV_SEARCH") : null;
77396
+ if ($input) {
77397
+ $input.value = "";
77398
+ $input.focus();
77399
+ }
77400
+ SEARCH_TEXT = "";
77401
+ rerender_all();
77402
+ } }
77403
+ ];
77366
77404
  let copy = [
77367
77405
  "button",
77368
77406
  {
@@ -77430,7 +77468,7 @@ function build_control_bar() {
77430
77468
  sep(),
77431
77469
  grp("show", dir_chips),
77432
77470
  sep(),
77433
- grp("find", [search]),
77471
+ grp("find", [search, search_clear]),
77434
77472
  sep(),
77435
77473
  grp("log", [copy, clear])
77436
77474
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuneta/gobj-ui",
3
- "version": "7.23.172",
3
+ "version": "7.23.174",
4
4
  "type": "module",
5
5
  "main": "dist/gobj-ui.cjs.js",
6
6
  "module": "dist/gobj-ui.es.js",
package/src/yui_dev.js CHANGED
@@ -17,6 +17,7 @@ import {
17
17
  gobj_global_trace_level,
18
18
  gobj_global_trace_no_level,
19
19
  gobj_get_gclass_trace_level2,
20
+ gclass_find_by_name,
20
21
  trace_level_t,
21
22
  log_error,
22
23
  gobj_create_service,
@@ -81,7 +82,8 @@ const TRAFFIC_TS_FIELDS = {
81
82
  * clear captured traffic, compact, console, copied, copy,
82
83
  * copy visible traffic to clipboard, creation, data, detailed,
83
84
  * dev window and browser console, dev window only, developer,
84
- * errors, expand, expanded, filter events / payload, find, i18n,
85
+ * clear the filter, errors, expand, expanded, filter events / payload,
86
+ * find, i18n,
85
87
  * i18next debug output, incoming, log, machine trace shape,
86
88
  * metadata, name only, outgoing, output, periodic, schema, show,
87
89
  * show this section in the expanded view, simple mach,
@@ -318,12 +320,19 @@ function build_filter_ctx()
318
320
  inc: dev_num("dev_filter_in", 1),
319
321
  err: dev_num("dev_filter_err", 1),
320
322
  search: SEARCH_TEXT,
323
+ view: dev_view(),
321
324
  };
322
325
  }
323
326
 
324
327
  function entry_hidden(e, ctx)
325
328
  {
326
329
  if(e.kind === "log") {
330
+ /* A `json` line is a PAYLOAD (the kw the trace dumps with ev_kw or a
331
+ * publication): the Compact and Name only views promise one line
332
+ * per message, so they leave it out. Its level says what it is. */
333
+ if(e.level === "json" && (ctx.view === "name" || ctx.view === "compact")) {
334
+ return true;
335
+ }
327
336
  /* Mirrored console logs respect the search box only — not the
328
337
  * in/out/err traffic filters, which are about DIRECTION and a
329
338
  * log has none. What is traced at all is the runtime's trace
@@ -929,6 +938,21 @@ function append_and_follow(logger, node)
929
938
  }
930
939
  }
931
940
 
941
+ /************************************************************
942
+ * Keep one entry in the bounded buffer, dropping the oldest
943
+ * (and its row, if painted).
944
+ ************************************************************/
945
+ function push_entry(entry)
946
+ {
947
+ TRAFFIC_LOG.push(entry);
948
+ if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
949
+ let old = TRAFFIC_LOG.shift();
950
+ if(old.$node && old.$node.parentNode) {
951
+ old.$node.parentNode.removeChild(old.$node);
952
+ }
953
+ }
954
+ }
955
+
932
956
  /************************************************************
933
957
  * Append one inter-event message. Kept in a bounded buffer so
934
958
  * view/filter switches repaint from memory. Shared by the legacy
@@ -957,16 +981,6 @@ function info_traffic(title, msg, direction, size)
957
981
  console_traffic(title, jn, direction, size);
958
982
  }
959
983
 
960
- /* Window side: skip when routed to the console only, or when the window
961
- * is not mounted (closed). No fallback console dump — console_traffic
962
- * above already covered every route that wants console output. */
963
- let logger = document.getElementById('developer-traffic-logger');
964
- if(!logger || route === "console") {
965
- return;
966
- }
967
-
968
- ensure_dev_style();
969
-
970
984
  let event = (jn && jn.event) ? String(jn.event) : "(no event)";
971
985
  let kw = (jn && jn.kw && typeof jn.kw === "object") ? jn.kw : null;
972
986
  let command = (kw && typeof kw.command === "string") ? kw.command : "";
@@ -984,14 +998,16 @@ function info_traffic(title, msg, direction, size)
984
998
  kw: kw, jn: jn, hay: hay, $node: null,
985
999
  };
986
1000
 
987
- TRAFFIC_LOG.push(entry);
1001
+ push_entry(entry);
988
1002
 
989
- if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
990
- let old = TRAFFIC_LOG.shift();
991
- if(old.$node && old.$node.parentNode) {
992
- old.$node.parentNode.removeChild(old.$node);
993
- }
1003
+ /* Window side: the entry is buffered above whatever happens, so the
1004
+ * window shows what arrived before it was opened. Painted only when the
1005
+ * window is mounted and not routed to the console only. */
1006
+ let logger = document.getElementById('developer-traffic-logger');
1007
+ if(!logger || route === "console") {
1008
+ return;
994
1009
  }
1010
+ ensure_dev_style();
995
1011
 
996
1012
  if(!entry_hidden(entry, build_filter_ctx())) {
997
1013
  let node = render_entry(entry);
@@ -1032,20 +1048,8 @@ function info_log(level, msg, hora)
1032
1048
  } else if(level === "warning") {
1033
1049
  LOG_WARN_COUNT++;
1034
1050
  }
1035
- /* Routed to the console only: the line already reached the browser
1036
- * console (gobj-js gate left on), so don't mirror it into the window —
1037
- * but keep the status-line tally live if the window is open. */
1038
- if(dev_route() === "console") {
1039
- update_stats();
1040
- return;
1041
- }
1042
- let logger = document.getElementById('developer-traffic-logger');
1043
- if(!logger) {
1044
- return;
1045
- }
1046
1051
  __in_info_log__ = true;
1047
1052
  try {
1048
- ensure_dev_style();
1049
1053
  let lvl = level || "debug";
1050
1054
  let text;
1051
1055
  if(lvl === "json") {
@@ -1065,13 +1069,16 @@ function info_log(level, msg, hora)
1065
1069
  dir: 0, size: 0, ts: traffic_now(),
1066
1070
  hay: (lvl + " " + text).toLowerCase(), $node: null,
1067
1071
  };
1068
- TRAFFIC_LOG.push(entry);
1069
- if(TRAFFIC_LOG.length > TRAFFIC_MAX) {
1070
- let old = TRAFFIC_LOG.shift();
1071
- if(old.$node && old.$node.parentNode) {
1072
- old.$node.parentNode.removeChild(old.$node);
1073
- }
1072
+ /* Buffered always: the window shows what the app logged before it
1073
+ * was opened. Painted only when mounted and not routed to the
1074
+ * console only (the line already reached the console). */
1075
+ push_entry(entry);
1076
+ let logger = document.getElementById('developer-traffic-logger');
1077
+ if(!logger || dev_route() === "console") {
1078
+ update_stats();
1079
+ return;
1074
1080
  }
1081
+ ensure_dev_style();
1075
1082
  if(!entry_hidden(entry, build_filter_ctx())) {
1076
1083
  let node = render_entry(entry);
1077
1084
  entry.$node = node;
@@ -1150,11 +1157,20 @@ function toggle_automata()
1150
1157
  * gclass=C_IEVENT_CLI level=ievents` on a node. */
1151
1158
  function traffic_state()
1152
1159
  {
1160
+ /* An app with no websocket registers no C_IEVENT_CLI: nothing to trace,
1161
+ * and nothing wrong with that, so ask before reading its levels. */
1162
+ if(!gclass_find_by_name("C_IEVENT_CLI")) {
1163
+ return 0;
1164
+ }
1153
1165
  return gobj_get_gclass_trace_level2("C_IEVENT_CLI").includes("ievents") ? 1 : 0;
1154
1166
  }
1155
1167
 
1156
1168
  function toggle_traffic()
1157
1169
  {
1170
+ if(!gclass_find_by_name("C_IEVENT_CLI")) {
1171
+ log_error("yui_dev: no C_IEVENT_CLI in this app, there is no traffic to trace");
1172
+ return;
1173
+ }
1158
1174
  yuno_trace_command("set-gclass-trace",
1159
1175
  {gclass_name: "C_IEVENT_CLI", level: "ievents", set: traffic_state() ? 0 : 1});
1160
1176
  }
@@ -1418,6 +1434,8 @@ function build_control_bar()
1418
1434
  class: 'YDEV_SEARCH', type: 'search', 'data-role': 'search',
1419
1435
  placeholder: t('filter events / payload'),
1420
1436
  'data-i18n-placeholder': 'filter events / payload',
1437
+ title: t('filter events / payload'), 'data-i18n-title': 'filter events / payload',
1438
+ 'aria-label': t('filter events / payload'), 'data-i18n-aria-label': 'filter events / payload',
1421
1439
  }, '', {
1422
1440
  input: (ev) => {
1423
1441
  SEARCH_TEXT = String(ev.target.value || '').toLowerCase().trim();
@@ -1425,6 +1443,26 @@ function build_control_bar()
1425
1443
  }
1426
1444
  }];
1427
1445
 
1446
+ /* Its own button: a `type=search` input shows a clear cross in some
1447
+ * browsers only (not in Firefox). */
1448
+ let search_clear = ['button', {
1449
+ class: 'YDEV_CHIP YDEV_SEARCH_CLEAR', type: 'button',
1450
+ title: t('clear the filter'), 'data-i18n-title': 'clear the filter',
1451
+ 'aria-label': t('clear the filter'), 'data-i18n-aria-label': 'clear the filter',
1452
+ }, '✕', {
1453
+ click: (ev) => {
1454
+ ev.stopPropagation();
1455
+ let $bar = ev.currentTarget.closest('.YDEV_BAR');
1456
+ let $input = $bar ? $bar.querySelector('.YDEV_SEARCH') : null;
1457
+ if($input) {
1458
+ $input.value = '';
1459
+ $input.focus();
1460
+ }
1461
+ SEARCH_TEXT = '';
1462
+ rerender_all();
1463
+ }
1464
+ }];
1465
+
1428
1466
  let copy = ['button', {class: 'YDEV_CHIP', type: 'button',
1429
1467
  title: t('copy visible traffic to clipboard'),
1430
1468
  'data-i18n-title': 'copy visible traffic to clipboard',
@@ -1459,7 +1497,7 @@ function build_control_bar()
1459
1497
  grp('output', [output_seg]), sep(),
1460
1498
  grp('view', [view_seg]), expand_grp, sep(),
1461
1499
  grp('show', dir_chips), sep(),
1462
- grp('find', [search]), sep(),
1500
+ grp('find', [search, search_clear]), sep(),
1463
1501
  grp('log', [copy, clear]),
1464
1502
  ]]);
1465
1503
  }