Skip to content

Conversation

@swordfish444
Copy link

Summary (target: development)

Adds a browser-only UI Customization panel to the Android Debug Database web UI (layout/
text/paging), plus a small server fix so index.html?… (and other static assets) load
correctly when query parameters are present.

Why

When inspecting wide tables and/or large JSON blobs, the current UI often forces heavy
horizontal scrolling and doesn’t let you tune density/page size. This PR improves
readability and navigation without changing any database/server behavior.

What changed

  • Adds a Customize UI button next to Run Query that opens an in-page customization
    view (?view=customize) with a “Back to Data” link (supports browser back/forward via
    history.pushState when available).
  • New debug-db-base/src/main/assets/ui-customization.js (self-contained) + updates to
    debug-db-base/src/main/assets/index.html and debug-db-base/src/main/assets/custom.css
    to support:
    • Table width: fixed / full width / fluid (max width)
    • Row density: compact / normal / comfortable
    • Sticky table header while scrolling
    • Wrap long text + optional max column width
    • JSON display mode for valid JSON object/array cells: raw / wrapped / pretty-printed
    • Rows per page (10/25/50/100), wired into DataTables
  • Persists settings in browser localStorage only (per-browser), with “Reset to defaults”;
    defaults match existing behavior.
  • Updates debug-db-base/src/main/assets/app.js to:
    • Initialize customization (no-op if the script isn’t present)
    • Apply saved page length at DataTable creation
    • Notify customization module when a DataTable is created (for JSON formatting + redraw
      handling)
  • Fixes debug-db-base/src/main/java/com/amitshekhar/server/RequestHandler.java to strip
    query params for static asset lookup + MIME detection (API routes still receive the full
    route with query params). This enables /?view=customize and generally makes index.html?…
    safe.

Demo

Note: the button icon doesn't load because index.html is opened as a file in the Loom video.

Loom video: https://www.loom.com/share/0f28072dac494055a4bae16470c88358

How to test

  1. Run any app with debug-db enabled and open the Debug DB URL in a browser.
  2. Click Customize UI → toggle settings → click Apply.
  3. Refresh the page to confirm settings persist; use Reset to defaults to clear.
  4. Verify existing behavior still works: DB/table list, Run Query, CRUD, Download DB.

@swordfish444
Copy link
Author

@amitshekhariitbhu Can you please review? Simple changes that add HUGE value to this project. Would love to get this merged ASAP.

Thank you in advance 🙇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants