Search for TW classes and where they are used in the UI

#1

Would it make sense to provide a search for each class and where it appears in tiddlywiki with options excluding its definition in themes, stylesheets and pallets?

  • That is help the user to identify where it is in use?
  • Another method I have played with is the ability to toggle a css content to display the class on screen so you can look for it.
Palette Manager Teaser :)
#2

A filter search for finding element classes would be fantastic. I suppose that would make for a good new discussion topic.

One of the things I’m always hunting down is the default classes for TW.

Usually I have to resort to ctrl + f :sweat_smile:

#3
  • And for this work you need the content displayed first.
#4

I moved this discussion into an new thread, since it’s only indirectly related with palette colour values

I do have a plugin, which is called click-effect, which does exactly what the name says.

But there is a second mode: Element Pulse
which highlights a area, that belongs together if it is clicked with the mouse.

It should be possible to extend the function, to show the element eg: DIV and classes, if they are assigned. … BUT clicking an element is only half of the truth. …

Eg: an image button like B in TW are 2 elements. The HTML BUTTON
and an SVG child.

If the user clicks the SVG they only get that info, but it’s the BUTTON that has the classes assigned, that make most of the styling.

So the only way to really see, what’s going on is the browser-dev tools and Right-Click → Inspect

3 Likes
How Can I Overwrite the Basic Theme: Vanilla?
#5

The way I use to identify elements, if I know the class, is with the help of a little stylesheet.

Try the following code in a tiddler tagged: $:/tags/Stylesheet

.tc-tab-buttons {
  outline: 1px solid red;
}

.tc-tiddlylink {
  outline: 1px solid blue;
}

It shows all tab-button containers in red and all tiddler links in blue.

image
image522×517 16.9 KB

The advantage of outline is, that it doesn’t change the browser layout. border would change that. So the layout would look slightly different, when the border is removed again, which makes work harder.

2 Likes
#6

So from your prior work @pmario we could simply build a stylesheet containing all known classes and the ability to toggle each to be displayed with an outline.

  • This is the approach I was also suggesting to highlight the elements from the pallet.
  • Ideally we could parse all tiddler type css and tag stylesheet to present a list of such classes to optionally toggle their outline.
#7

Another way to implement this is to pass the appropriate CSS or stylesheet tiddlers into an “inner wiki” that one can use to observe where the various classes are applied. A custom view of empty.html basically providing a visual map of the UI css elements.

#8

That’s not possible. The elements in the palette are colour definitions used with a macro inside a class definition in the base.tid file which is part of the vanilla theme.

.tc-something {
  background: <<colour "alert-background">>;
  color: <<colour "foreground">>;
}

So the only way to find, where and how something is used, is to make a “full text search” in all .tid files

  1. First you need to have a look at the palette, to get the colour name eg: alert-background

  2. Then you need to search in base.tid for the colour name.

  3. The colour can be used several times in several class definitions.

  4. If you know the class eg: tc-tab-buttons, you need to do a second full-text search in all .tid and .js files to find
    4.1 the .tid templates, where the class is used
    4.2 the .js files show you if a class is dynamically assigned by the core code. eg: tc-tiddlylink-resolved, which shows, that a tiddler exists. tc-tiddlylink-missing shows it’s missing.

That’s the basic steps you have to follow, to find out, where a colour is used. …

OR

change the colour in the palette editor and see, what happens. … That’s much easier, once it’s merged.

#9

I do see value in providing tools to automate this kind of search process for any css elements. Tiddlywiki is self documenting however when it comes to css quite intimidating because of how many paths you have to follow.

  • It is quite easy to build in automation to tiddlywiki, as a plugin to make it easier interrogating it.
  • We could say what we need is to take the explicit knowledge of how tiddlywikis various elements come together and provide this knowledge in a tool that helps one investigate this. We can do a lot without even reverting to inspect, but this too can be part of the guidance.
  • It seems to me rather than every man and his dog, woman and her cat having to deconstruct, learn and hack their way to this information, we need only do it once and embed this in a tool. Even if its cumbersome it will still be easier than “in a vacuum”.
  • But then we may still come up with a nice interactive interface once the explicit knowledge is open for all to see.
#10

One tool is called documentation and everyone can take action to improve it.

The second set of tools are the browser dev tools. Even if you have a look at all the TW stylesheet definitions, only the browser knows, which rule is really used. The rule that’s used is the one with the highest specificity.

base.tid is part of the TW core. … But it’s possible that users add their own stylesheets and overwrite the core styles. … That shouldn’t happen but most newbie users don’t care about, what should be done. They use the first thing that works.

The 3rd and non existent tool may be a special search that follows the steps I showed in the other post. … But in the end, it’s the browser dev-tools, that will tell you what’s going on.

Correct practices for applying changes to TiddlyWiki Styles
#11
  • If this the case so be it. But I would suggest this being the case means we have not provided sufficient documentation or the tools to mange tiddlywikis CSS especially for newer users.
  • If the documentation says “The way to identify the definitive CSS in use after customisations is to use the inspect” and provides a little guidance on this all the better.
    • For example Both Chrome and Firefox allow you to point and r-click any part of the screen and inspect. Each browser has the ability to copy selectors or resulting styles. A little guidance on this would make life much easier.
    • Then what does one do with the result of an investigation inspect or otherwise to find where it is set and how to specify targeted css?
#12

Huh, I’ve always had to go around border using box-shadow, but outline seems like a useful alternative. Thanks for the demo!

Edit: Is there a way to move this comment to the ‘tips & tricks’ area? I think it could be quite useful!