Add config for max number of rows for json before scrollinga

Author: swordfish444

debug-db-base/src/main/assets/custom.css

@@ -78,6 +78,7 @@ body.addb-sidebar-compact #table-list .list-group-item {
 :root {
     --addb-max-col-width: 480px;
     --addb-sticky-header-top: 50px;
+    --addb-json-max-lines: 10;
 }
 
 body.addb-sticky-header #parent-data-div .dataTables_scrollHead {
@@ -128,6 +129,14 @@ body.addb-json-mode-wrapped #parent-data-div table.dataTable td.addb-json-cell {
     vertical-align: top;
 }
 
+body.addb-json-mode-wrapped #parent-data-div table.dataTable td.addb-json-cell .addb-json-text {
+    display: block;
+    line-height: 1.25;
+    max-height: calc(var(--addb-json-max-lines) * 1.25em);
+    overflow-y: auto;
+    padding-right: 6px;
+}
+
 body.addb-json-mode-pretty #parent-data-div table.dataTable td.addb-json-cell {
     white-space: pre;
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -143,6 +152,11 @@ body.addb-max-col-width.addb-json-mode-pretty #parent-data-div table.dataTable t
 
 body.addb-json-mode-pretty #parent-data-div table.dataTable td.addb-json-cell .addb-json-tree {
     display: inline-block;
+    line-height: 1.25;
+    max-height: calc(var(--addb-json-max-lines) * 1.25em);
+    overflow-y: auto;
+    overflow-x: visible;
+    padding-right: 6px;
 }
 
 #parent-data-div table.dataTable td.addb-json-cell .addb-json-line {

debug-db-base/src/main/assets/index.html

@@ -260,6 +260,15 @@
                                             </select>
                                             <p class="help-block">Applies to cells that contain valid JSON objects/arrays.</p>
                                         </div>
+
+                                        <div class="form-group">
+                                            <label for="addb-json-max-lines">Max JSON lines (before scrolling)</label>
+                                            <div class="input-group addb-max-width-input">
+                                                <input type="number" class="form-control" id="addb-json-max-lines" placeholder="e.g. 10" min="1" max="200" step="1">
+                                                <span class="input-group-addon">lines</span>
+                                            </div>
+                                            <p class="help-block">Limits row height when JSON is wrapped or pretty-printed.</p>
+                                        </div>
                                     </div>
 
                                     <div class="addb-customize-category display-none" data-category="paging">

debug-db-base/src/main/assets/ui-customization.js

@@ -17,6 +17,7 @@
     wrapLongText: false,
     maxColumnWidthPx: null, // number | null
     jsonMode: "raw", // raw | wrapped | pretty
+    jsonMaxLines: 10, // number (limits cell height when JSON is shown)
     stickyHeader: false,
     pageLength: 10 // 10 | 25 | 50 | 100
   };
@@ -112,6 +113,16 @@
       }
     }
 
+    var jsonMaxLinesRaw = raw.jsonMaxLines;
+    if (jsonMaxLinesRaw === "" || jsonMaxLinesRaw === null || typeof jsonMaxLinesRaw === "undefined") {
+      settings.jsonMaxLines = DEFAULT_SETTINGS.jsonMaxLines;
+    } else {
+      var parsedJsonMaxLines = parseInt(jsonMaxLinesRaw, 10);
+      if (!isNaN(parsedJsonMaxLines)) {
+        settings.jsonMaxLines = clampInt(parsedJsonMaxLines, 1, 200);
+      }
+    }
+
     return settings;
   }
 
@@ -206,6 +217,15 @@
     }
   }
 
+  function applyJsonMaxLines(settings) {
+    var jsonMaxLines =
+      typeof settings.jsonMaxLines === "number" && settings.jsonMaxLines > 0
+        ? settings.jsonMaxLines
+        : DEFAULT_SETTINGS.jsonMaxLines;
+
+    document.documentElement.style.setProperty("--addb-json-max-lines", String(jsonMaxLines));
+  }
+
   function looksLikeJson(value) {
     if (typeof value !== "string") return false;
     var trimmed = value.trim();
@@ -372,6 +392,26 @@
     }, 0);
   }
 
+  function renderWrappedJsonCell(td, jsonText) {
+    if (
+      td.childNodes.length === 1 &&
+      td.firstChild &&
+      td.firstChild.nodeType === 1 &&
+      td.firstChild.classList &&
+      td.firstChild.classList.contains("addb-json-text") &&
+      td.firstChild.textContent === jsonText
+    ) {
+      return false;
+    }
+
+    td.textContent = "";
+    var wrapper = document.createElement("div");
+    wrapper.className = "addb-json-text";
+    wrapper.textContent = jsonText;
+    td.appendChild(wrapper);
+    return true;
+  }
+
   function applyJsonFormattingToCurrentPage(dataTableApi, settings) {
     if (!dataTableApi) return;
 
@@ -404,10 +444,7 @@
 
         if (mode === "wrapped") {
           // Keep raw JSON text, but apply JSON cell styling.
-          if (td.textContent !== cellData || td.childNodes.length !== 1 || td.firstChild.nodeType !== 3) {
-            td.textContent = cellData;
-            didMutateDom = true;
-          }
+          if (renderWrappedJsonCell(td, cellData)) didMutateDom = true;
           continue;
         }
 
@@ -460,6 +497,7 @@
     applySidebarWidth(currentSettings);
     applyBodyClasses(currentSettings);
     applyMaxColumnWidth(currentSettings);
+    applyJsonMaxLines(currentSettings);
 
     var dataTableReason = reason;
     if (previousSettings.jsonMode !== currentSettings.jsonMode) dataTableReason = "jsonMode";
@@ -583,13 +621,15 @@
 
   function readDraftFromForm() {
     var maxWidthRaw = $("#addb-max-column-width").val();
+    var jsonMaxLinesRaw = $("#addb-json-max-lines").val();
     var settings = {
       tableWidth: $("input[name='addb-table-width']:checked").val(),
       sidebarWidth: $("input[name='addb-sidebar-width']:checked").val(),
       rowDensity: $("input[name='addb-row-density']:checked").val(),
       wrapLongText: $("#addb-wrap-long-text").is(":checked"),
       maxColumnWidthPx: maxWidthRaw === "" ? null : maxWidthRaw,
       jsonMode: $("#addb-json-mode").val(),
+      jsonMaxLines: jsonMaxLinesRaw,
       stickyHeader: $("#addb-sticky-header").is(":checked"),
       pageLength: $("#addb-page-length").val()
     };
@@ -603,6 +643,7 @@
     $("#addb-wrap-long-text").prop("checked", !!settings.wrapLongText);
     $("#addb-max-column-width").val(settings.maxColumnWidthPx === null ? "" : settings.maxColumnWidthPx);
     $("#addb-json-mode").val(settings.jsonMode);
+    $("#addb-json-max-lines").val(String(settings.jsonMaxLines));
     $("#addb-sticky-header").prop("checked", !!settings.stickyHeader);
     $("#addb-page-length").val(String(settings.pageLength));
   }