TiddlyTools in-wiki Browser is super-useful

#59

Comment #2 on the zoom="<n>" new Slider

I dunno how to successfully describe the good and the not so good on the new Zoom Slider without getting in an explanatory pickle.
I’ll try. But please ask if it is unclear.

Two points to start …

  1. Customizable zoom is great!
  1. All my comments are coming from the “fat-finger situation” of a modest screened Chromebook with no pen or keyboard.

My needs on zooming?
Based on tests so far, for my environment …

  1. For NORMAL use I’m finding that ".5" ".75" & "1" work to cover most all use cases

A button to toggle between those three might work better for me than a range slider?

  1. For SPECIAL use, for instance as an adjunctive to Visual Art analysis already possible at the UK National Gallery

Here a range slider could add to that site’s existing zoom feature. But in a fat-finger environment it would probably need to be long & look like this … ??

Screenshot 2025-12-29 13.08.32
Screenshot 2025-12-29 13.08.321233×121 10.5 KB

What am I saying?

  • For (my) normal use I need no more than 3 zoom levels and a slider in a “smaller screen fat-finger situation” seems over ui’d.
    I’d prefer a toggle. Dunno!

  • For my special interests in visual art a big slider could be useful.

I hope this is clear enough to convey enough UI sense!
TT

#60

I’ve just added handling for setting a zoom="min,max,step" variable to control the $range slider.

The default range is unchanged (i.e., zoom="0.5,5,0.25"), and the “,max,step” portion of the variable’s value can be omitted (e.g., zoom="1" is the same as zoom="1,5,0.25"). For your “NORMAL” usage, specify zoom="0.5,1"

The $range slider has class=tt-browser-zoom, so you can change its size (which defaults to width:5em) using custom CSS. For example:

<style>.my-art-browser .tt-browser-zoom { width:100% !important; }</style>
<$let zoom="1,10,1">
@@.my-art-browser {{TiddlyTools/Panels/Browser}}

and if, for some use-case, you want to a constant zoom value (e.g., zoom="2") you can, of course, hide the $range slider using:

<style>.my-special-browser .tt-browser-zoom { display:none; }</style>
<$let zoom="2">
@@.my-special-browser {{TiddlyTools/Panels/Browser}}

enjoy,
-e

#61

Great! The small range 0.5,1 I confirm is now “fat-finger compatible.”

And thanks for the explanation of the ranges and the example!

TT

#62

Hi @EricShulman

Love the ability to be able to choose zoom settings for the browser window. Sometimes it would be super useful to be able to set the zoom in a numeric box rather than by slider. I find 1.5X to be be perfect for one of the sites I am viewing.

Also my browser does not have the settings or help buttons. Can you say why?

Cheers, Rob

1 Like
#63

Settings and Help are optional extra add-ons:

For Settings, install TiddlyTools/Panels/Settings
For Help, install TiddlyTools/Panels/Help and TiddlyTools/Panels/Browser/Help

-e

#64

Comment: Now we are Cooking By Gas !!

The miniBrowser is a solution to many issues.

I’ll give one example … Searching the internet from the TW Sidebar …

Screenshot 2025-12-30 15.48.43
Screenshot 2025-12-30 15.48.43615×1069 84.2 KB

The tool has …

  • Easy Bookmarking
  • Bookmark Filters
  • Bookmark Folder Assignment to individual miniBrowsers — allowing independent hierarchies of Bookmarks
  • Ability to Auto-Open external Tabs/Windows for non-iframe-ables
  • Record of each miniBrowser’s last site
  • Configurable Zoom ranges in each miniBrowser

I can’t thank @EricShulman enough!
TT

1 Like
Can you keep the content of a closed tab alive?
#65

The most recent TiddlyTools Browser update (earlier today) no longer uses indexes in $:/config/TiddlyTools/Browser to store the current name and URL for each browser. Instead, it uses separate “qualified” temp tiddlers ($:/temp/TiddlyTools/Browser-1234543...). This was done to make the browser’s “state” information separate from the “config” settings, as well as making the code cleaner and more consistent.

Note that, while these temp tiddlers persist during the current session, they are not usually saved in the file. If you want these temp tiddlers to be saved, you can define a tiddler tagged with $:/tags/Global, containing a macro named publishFilter():

\define publishFilter() [prefix[$:/temp/TiddlyTools/Browser]]

-e

#66

I think I do. They are kinda “where I am settings” worth persisting.

Thanks for the info.

TT

#67

I’ve found a “limitation” when using a named minibrowser with an <a href=...> link.

Suppose you have a tiddler containing:

<$let name="somename">{{TiddlyTools/Panels/Browser}}</$let>

Then, in some other tiddler content, you write:

<a href="https://example.com" target="somename">click me</a>

with the intention of having that “click me” link shown in the aforementioned “somename” minibrowser.

The problem is that this only works if the “somename” minibrowser is already showing a rendered iframe. If it is showing “click to start” or “enter a url or select a bookmark”, then there is no actual iframe for the targeted link, and it will open in a separate tab instead.

-e

#68

Eric, I just had a quick look in passing, and visited TiddlyTools for TW v5.3.8 — Small Tools for Big Ideas!™ just as a test I went to tiddlywiki.com and my knee jerk reactions was to apply one of my JavaScript bookmarklets, only to discover, as one may expect, they only apply to the parent wiki.

Dont go out of your way to resolve this but I just though I would ask if there is any opportunity to permit such bookmarklets to target the iframe window?

  • I was able to place the bookmarklet in a tiddler and drop it into the iframe and run it.
#69

Update: I’ve added handling so a minibrowser IFRAME can be initially rendered by setting enable=yes and any non-blank default URL):

<$let name=somename enable=yes url=" ">
{{TiddlyTools/Panels/Browser}}

This allows you to successfully use <a href=...> syntax to target a specific named minibrowser:

<a href="https://example.com" target=somename>click me</a>

-e

#70

Eric, I added a bookmark inside the mini-browser and provided a bookmarklet in stead of a url, ie a javascript payload and as may be expected it failed. I wonder if there is a way to accommodate these?

#71

You can try this experiment:

In TiddlyTools/Panels/Browser setURL(), this line:

<$let url={{{ [<url>!regexp[^(http|\./|\.\./|file:)]addprefix[https://]] ~[<url>] }}}>

detects URLs that start with “http”, “./”, “../” or “file:”. If none of those patterns are found, then it assumes that there is a missing protocol prefix, and automatically adds "https:// to the URL.

I assume that your bookmarklets syntax starts with “javascript:”. Try changing the above line to:

<$let url={{{ [<url>!regexp[^(http|\./|\.\./|file:|javascript:)]addprefix[https://]] ~[<url>] }}}>

this should allow the IFRAME src param to be set to your bookmarklet code.

Let me know what happens…

-e

1 Like
#72

This is just a comment.

Thanks for that info!

Actually my issue has gone away with your latest additions …

Now I can precisely set the start url and it always displays as I want!

I’ll comment more later.

Best
TT

#73

@EricShulman, following up on your great innovations I have one issue and some comments.
I’ll post first about the issue to get it out of the way.

One use of the miniBrowser for me is to iframe local TiddkyWikis so I can edit them.
In tests I’m finding saving is failing.

That leads to my question …

Q10: Is failing TW saving in miniBrowsers a sandbox issue?
Would "allow-downloads" solve it?

Wondering,
TT

#74

A comment on layout of menus in the miniBrowser …

The miniBrowser is replete with excellent CSS.

For my use I need a very regular monospace layout on menus.

Easily achieved with …

/* DROPDOWN STYLING */
 button.tt-browser-mark {font-family:monospace;}

Result …

Screenshot 2026-01-05 15.35.51
Screenshot 2026-01-05 15.35.51748×775 92.9 KB

TT

#75

Comment on a TRICK to Sort Menus as needed …

Issue: In long lists of bookmarks I need a few at the top.
Solution: Easy. Just prefix them with extra spaces.

Result: Screenshot 2026-01-07 18.49.01

Reuters comes first because the Bookmark started with a space …
Screenshot 2026-01-07 18.59.20

Useful info!
TT

UPDATE : No longer relevant because now all folders can be arranged through D&D.

#76

Adding allow-downloads does fix that issue. However, instead of using allow-downloads, I just removed the sandbox="..." attribute entirely. This effectively permits almost all regular web page actions, including

  • allow-downloads for TiddlyWiki download saver handling
  • allow-popups for tm-open-external-window or <a href="..." target="_blank">...</a>
  • allow-modals for window.confirm(...) messages
  • allow-scripts for javascript execution

enjoy,
-e

#77

Comment on #fun search.

Because the miniBrowser has such great flex on finding I can globally search for and isolate the hashtag #fun.

Result:

Screenshot 2026-01-07 19.47.51
Screenshot 2026-01-07 19.47.51827×300 36.1 KB

TT
meanwhile a Random Dog.

#78

Comment on Browser Link takeover …

Thanks to the miniBrowser I can make a TW a better browser.

This is what I did after installing TiddlyTools Browser

  1. Make a TW JUST for browsing
  2. Create sidebar tabs that persist (see this)
  3. Create a TiddlyTools Browser (ever open) in the Sidebar with iframe name=minibrowser
  4. Modify core TW parsers to direct links to target=minibrowser

Result: Browse the net inside a TW and direct all links to the minibrowser.

Technical Notes:

Screenshot 2026-01-07 21.12.49
Screenshot 2026-01-07 21.12.49909×429 63.8 KB

TT

1 Like