Feature Requests

[adrian]

Hi everyone,

Thought I'd kick off this new dedicated support forum with a feature requests thread. Feel free to post your ideas for consideration.

Cheers,
Adrian

[Pete]

Your timing is excellent - I have a couple of projects where for one reason or another (sometimes it's on purpose) I have customers that are superusers and I'd like a way to exclude specific superusers from seeing Tracy if possible?

[adrian]

Hi @Pete

It was actually a bit fiddlier than I expected so I am going to hold off on committing the changes just yet, but can you please test the attached version for me?

There is a new "Restrict superusers" checkbox in the settings. Check this and it will mean that you need to set up a new role with the "tracy-debugger" permission and add that role to your admin superuser account. All other superusers without this won't have access to Tracy.

Please let me know how it goes.

 

TracyDebugger.zip

[Robin S]

Hi @adrian,

You already kindly added some quick links to the Tracy config at my request, but I still find the config interface quite overwhelming. What do you think about implementing a tabbed interface so it's easier to focus on a subset of the config fields? I've posted a demo module that might be helpful:

Depending on how you think it's best to divide up the config there would probably be more tabs than could fit in one row. Currently I don't think AdminThemeUikit handles this all that well...

...but seeing as Ryan has recently been working on AdminThemeUikit it might be timely to see if improvements can be made. I'm not sure but probably it would be good if the inactive tabs had some definition of their edge, maybe a pale grey background and white border for separation between the tabs. I'll have a play around with that.

Edit: the visual metaphor of tabs is always going to break down a bit when you have more than one row of tabs, but I think the below would be an improvement on the current styling. Editing on tablets and phones is going to become more and more common and the PW admin should cater to these narrower screen widths.

 

 

[szabesz]

6 hours ago, Robin S said:

but I still find the config interface quite overwhelming.

+1

Maybe @tpr's solution in AOS can be implemented? I like his "jump links section" a lot. 

[Pete]

9 hours ago, adrian said:

Hi @Pete

It was actually a bit fiddlier than I expected so I am going to hold off on committing the changes just yet, but can you please test the attached version for me?

There is a new "Restrict superusers" checkbox in the settings. Check this and it will mean that you need to set up a new role with the "tracy-debugger" permission and add that role to your admin superuser account. All other superusers without this won't have access to Tracy.

Please let me know how it goes.

Thanks, that worked perfectly. This could also be a way to open it up to non-superusers? I don't have a use case for that, but maybe there are big projects out there like intranets where you might want to show the debug panel to a tester who checks through the workflow or something but might not have full superuser access to the backend. Probably best left to superusers though maybe and this works for me - thanks!

[adrian]

3 hours ago, Pete said:

Thanks, that worked perfectly.

Great - thanks. One thing to note here is that it is of course possible for one of these superusers to go to Tracy's settings and uncheck that "Restrict superusers" checkbox, or even give themselves the "tracy-debugger" setting. I am guessing you don't really mind that because it's not that they aren't trusted, but rather you just don't want to confuse them with Tracy. Anyway, just something to be aware of in case you hadn't thought about it.

3 hours ago, Pete said:

This could also be a way to open it up to non-superusers?

That "tracy-debugger" permission has been around forever and already allows you to give non-superusers access to Tracy. The only restrictions by default are that they don't have access to these panels: Console, FileEditor, Adminer, Terminal, AdminTools. You can also restrict them further with the "Disabled panels for restricted users" setting.

[adrian]

10 hours ago, Robin S said:

You already kindly added some quick links to the Tracy config at my request, but I still find the config interface quite overwhelming. What do you think about implementing a tabbed interface so it's easier to focus on a subset of the config fields?

 

5 hours ago, szabesz said:

solution in AOS can be implemented? I like his "jump links section" a lot. 

Hi @Robin S and @szabesz - thanks for your input on this. This is going to be an interesting one because I actually don't like AOS's jumplinks for the reason that I can't use CTRL/CMD +F to find the setting I am looking for - I often have to enable/disable several sections before I find the one where the setting I am looking for is hiding. A tabbed interface would have the same issue.

I feel like Tracy's approach to having everything open and displayed with those quick links (that are at the top of the settings) together with CTRL/CMD +F is actually pretty effective. There are also of course the direct settings links at the bottom of each debug bar panel which further helps to get you where you want to go. Of course this might be my bias because I already know the names of the settings so I know what to search for.

With my thoughts out of the way, I have had enough comments over the years about how overwhelming the settings are that obviously I need to listen to you guys and improve things ?

Robin - I have used tabs in module settings with AdminActions - I think it can be a nice interface, but in addition to my noted concerns above and your noted point about the tabs ending up over more than one line, some of the fieldset names (labels) are quite long - I can probably shorten many of these, but it is another issue to consider when using tabs.

Stepping back a little - I wonder if we can solve some of the confusion by eliminating some settings - I have probably overdone things with settings that no-one will ever change. To be honest, I almost never change any settings beyond those in the first couple of fieldsets and the email address for error notifications on live sites. Maybe it would be best to have all the settings that are likely to be used by most people, open and up top and everything else in a collapsed "Advanced settings" fieldset. Maybe we need to do a bit of a survey to figure out what most users find themselves regularly changing and use that as a guide. On a side note, I often make use of https://processwire.com/modules/module-settings-import-export/ for copying settings between sites - maybe promoting that approach would also help?

Any other approaches we should be thinking about?

OT, but I am thinking that maybe this settings improvement feature request deserves to be split into its own thread.

PS - Robin - I completely agree about the need to improve the styling of inactive tabs in th Uikit theme.

 

[Pixrael]

On 1/14/2021 at 3:32 AM, szabesz said:

+1

Maybe @tpr's solution in AOS can be implemented? I like his "jump links section" a lot. 

Hi @adrian,

Is it possible to use this javascript library on your module? https://jets.js.org/

I use it in my apps UI and it works wonderfully. This script filters in realtime all the elements of the page and shows only those related to the search query.

@adrian If you want to do a quick test, you can install Tampermonkey extension in your browser and create a new script while you are on the Tracy Module config page. In that new script add the following lines:

// @require      https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js

then put the following code on the script part:

(function() {
    'use strict';

    $("#ModuleEditForm").prepend('<input type="search" id="jetsSearch">');  // this line is only for testing

    var jets = new Jets({
        searchTag: '#jetsSearch',
        contentTag: '.Inputfields'
    });

})();

Then save the script and reload the Module page, enter the parameter you want to access in the new input that appear on top of the page, ex: snippets, or scream, or suffix.. or any parameter you want to find

PS: I use jquery to add the input field to the admin UI only for testing purposes, this search input element should be added by the module itself to the page rendering

Please let me know if works on your end, here is working ok

 

[adrian]

@Pixrael - that actually seems to work really nicely - thank you. 

You've probably noticed that I have implemented @tpr's excellent Filterbox (https://github.com/rolandtoth/FilterBox) in several of the panels in Tracy and I had been wondering how well it might work for the module settings. I might still take a look at that first (since I am already using it), but Jetbox does seem pretty slick and your Tampermonkey example worked a treat. I wonder if @Robin S and @szabesz would mind testing with it as well to get their thoughts on whether this would be a good approach. At the moment I only tested with the current layout with all fieldsets opened, but I feel like it might be more useful if it also works when the fieldsets are loaded in a collapsed state - this is where things could really be cleaned up.

Anyone else have any thoughts?

[Pixrael]

11 minutes ago, adrian said:

if it also works when the fieldsets are loaded in a collapsed state

It should work because it adds a custom data-jets tag to elements with all the text inside them, regardless of whether it is visible or not

[szabesz]

4 hours ago, adrian said:

To be honest, I almost never change any settings beyond those in the first couple of fieldsets...

This is probably because the module's defaults are mainly your preferences ? which is quite OK, but I do venture further. Sure, I do not change to much either but my "favorite" options are scattered "all over the place".

4 hours ago, adrian said:

I often have to enable/disable several sections before I find the one where the setting I am looking for is hiding.

I was not clear when mentioning AOS, sorry. I like his column layout and the blocks in it – except for that the jump-links themselves are cogwheels which is a bit strange – as opposed to a simple list. Hiding the sections is unnecessary.

Back to Tracy's settings: I like the fact that all the settings are on one long page, I just wish for some well organized jump-links section, and maybe a quick search filter with suggestions built in (something more advanced than the bowser's built-in page content search).

[szabesz]

1 hour ago, adrian said:

@Robin S and @szabesz would mind testing with it as well to get their thoughts

I installed Tampermonkey but its icon does not show up so I cannot use it. I also googled a bit for some info on why it does not show up but could not find any useful guidance.

[adrian]

3 minutes ago, szabesz said:

I installed Tampermonkey but its icon does not show up so I cannot use it. I also googled a bit for some info on why it does not show up but could not find any useful guidance.

Chances are you already have too many browser extensions installed to fit - the last one on the right   will let you access the hidden ones.

 

[Pixrael]

1 minute ago, adrian said:

Chances are you already have too many browser extensions installed to fit - the last one on the right   will let you access the hidden ones.

 

Yes, you should use the pin icon to keep the extension visible

[szabesz]

10 minutes ago, Pixrael said:

you should use the pin icon to keep the extension visible

Thanks, I do not know why I overlooked it. It is a relatively recent feature? I have not installed new extensions for a long time, so I did not bother looking for things like these... And Firefox has been my main browser for development for quite a while as I prefer its dev tools over Chrome's.

[szabesz]

I do not want to pollute this thread with my silly issues with Tampermonkey. Enough to say, I got stuck again.... I will read its docs and watch its tutos when I have time to do so. Certianly looks powerful...

[Pixrael]

31 minutes ago, szabesz said:

I do not want to pollute this thread with my silly issues with Tampermonkey. Enough to say, I got stuck again.... I will read its docs and watch its tutos when I have time to do so. Certianly looks powerful...

@szabesz your Tampermonkey script should looks like this:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://domain.test/pw/module/edit?name=TracyDebugger
// @icon         https://www.google.com/s2/favicons?domain=domain.test
// @require      https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.1/jets.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    $("#ModuleEditForm").prepend('<input type="search" id="jetsSearch">');

    var jets = new Jets({
        searchTag: '#jetsSearch',
        contentTag: '.Inputfields'
    });

})();

the @match parameter is the URL where the script will run each time your browser visit it.. then you will see a small form input before the Module Information Fieldset

[Robin S]

@adrian, how about this:

 

By default all the config fields are displayed so you can use Ctrl+F, but when you click a quick link it hides all the config sections apart from the active one. This removes the clutter around the section the user wants to focus in on.

Here is the CSS and JS if you want to play with it:

#tracy-quick-links .InputfieldContent ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden; }
  #tracy-quick-links .InputfieldContent ul li {
    float: left;
    padding: 0 5px 5px 0; }
    #tracy-quick-links .InputfieldContent ul li a {
      background: #e3e9ef;
      color: #333;
      display: block;
      padding: 1px 10px;
      border-radius: 3px; }
      #tracy-quick-links .InputfieldContent ul li a:hover {
        text-decoration: none;
        background: #d9e1ea; }
      #tracy-quick-links .InputfieldContent ul li a.active {
        background: #e83561;
        color: #fff; }

$(document).ready(function() {
	var $quick_links = $('#tracy-quick-links');
	var $config_fields = $quick_links.nextUntil('#wrap_uninstall');
	$quick_links.on('click', 'a', function(event) {
		event.preventDefault();
		if($(this).hasClass('active')) {
			$(this).removeClass('active');
			$config_fields.show();
		} else {
			$quick_links.find('a').removeClass('active');
			$(this).addClass('active');
			$config_fields.hide();
			$($(this).attr('href')).show();
		}
	});
});

 

[Robin S]

From an article @szabesz linked to earlier...

Quote

Symfony’s debug bar is an amazing tool. It shows you what happened during the journey from request to response, notifies you of warnings & deprecations and comes with a built-in profiler that you can easily hook into to benchmark parts of your own code.

No idea how difficult it would be to show a cool timeline like that, and probably something that would be better done in the Tracy core. But it looks nifty!

[netcarver]

There is a module that does something a bit like this already.

[adrian]

6 hours ago, Robin S said:

how about this:

Hi @Robin S - thanks for your work on that - I really like that actually. I wonder if that's enough on its own, or whether we should combine with the @Pixrael's option for integrating the search/filter box as well?

What does everyone think?

6 hours ago, Robin S said:

No idea how difficult it would be to show a cool timeline like that, and probably something that would be better done in the Tracy core. But it looks nifty!

What do you think about the Perfmon Debug Toolbar that @netcarver mentioned. I just installed it again to take a look. Note that you'll need to fix the order of the arguments in the implode() on line 187 to get things working, but otherwise it seems like everything is still OK. Does it do what you are looking for, or is there other / different info you'd like to see? Even with this, I'd still be willing to add something similar to Tracy.

There is also of course Ryan's ProDevTools Profiler.

 

[Robin S]

2 hours ago, adrian said:

I wonder if that's enough on its own, or whether we should combine with the @Pixrael's option for integrating the search/filter box as well?

It wouldn't be a bad thing to have a filter box too, although I don't think I'm familiar enough with the input labels to use that much myself.

2 hours ago, adrian said:

Does it do what you are looking for, or is there other / different info you'd like to see?

The Perfmon module looks good - I hadn't seen it before. Honestly these features aren't something I need on a typical project - I just thought the timeline looked cool. If I needed to focus in on performance I would try Perfmon, and I have Profiler Pro but haven't actually explored its features yet.

I do have another idea/request though...

What do you think about adding a Shortcuts panel?

This would be for custom internal or external links that a user finds they are needing to visit regularly during development. For instance, I often need to visit the LoginRegisterPro config screen during development. And you could add links to various external API documentation pages that you want to jump to quickly. Sure, you could use your browser bookmarks but mine are already an out-of-control mess, and by having the links in a Tracy panel it would keep them nicely connected to a project.

I'm imagining an interface that lets you enter a label and URL for each shortcut - a textarea would do, or you could get fancy with some kind of repeater-like interface. It would be good if absolute internal links were converted to relative links (i.e. strip out the site root from the URL) so the links keep working if the root URL changes.

[bernhard]

On 1/14/2021 at 9:32 AM, szabesz said:

Maybe @tpr's solution in AOS can be implemented? I like his "jump links section" a lot. 

Just want to say that I don't like it at all.

Regarding overwhelming settings: I'm usually not changing anything ? But @Robin S's solution looks great!

[adrian]

7 hours ago, Robin S said:

What do you think about adding a Shortcuts panel?

We sort of have this already - take a look at the Custom Links section of the settings for the Processwire Info panel. You can add links to any page on the site, including items under Admin > Setup. Of course this doesn't allow for external links. For external links, I could add an additional settings field for storing these, or we could go with a separate Shortcuts Panel. Semantically it would be strange having external links under the PW Info panel, but maybe that's OK? Any thoughts?

Also, just to let you know, that these links are actually stored as relative paths, rather than page IDs so that you can copy/paste Tracy's settings via my ModuleSettingsImportExport module and have them work on another site.

Also, the appropriate icon is also automatically used.

Note I have teppo's Changlelog, MikeRocketts's Jumplinks and ryan's Upgrades linked to, in addition to the default links which are added when Tracy is installed.