Reduce the amount of "vertical travel" when loading pages

[dequeued0]

Every time I load a subreddit listing or the modqueue, there's a slow progression of every single element (especially buttons) on the page downwards as elements load. This always adds about 4 or 5 seconds to the time between when I want to start acting on stuff and when I can actually act (clicking before everything is loaded just means I'll click on the wrong thing and maybe even be taken away to a different page).

It would be great if this effect could be reduced.

It seems like the main culprits are:

• the "Add removal reason" button
• the "show recent actions" button
• the "Automod action" line
• the "ask for a second opinion in modmail" (which I have never used)
• the "context-popup" and "source" buttons causing other buttons to flow into the next line

It seems like a lot of that is avoidable. Some ideas:

• Add an option to show the AutoModerator action as a hover over "removed by AutoModerator" instead.
• Move "show recent actions" into an "recent" button like the "source" button.
• Change "context-popup" to just "(popup)". It's right next to the context button anyway.
• Allow "ask for a second opinion in modmail" to be disabled or turned off or at least give it a class so I can get rid of it via CSS.
• Fancier ideas: optionally shorten or eliminate some buttons so more can fit on the line. For example: I would change "permalink" to "perma", "source" to "src", "full comments" to "full", and maybe shorten a few rare ones to a single letter like "A" for "give award", "N" for "nsfw", etc.

[dequeued0]

I've been experimenting a bit with CSS tweaks to get an idea of what this would be like although this approach is obviously limited.

/* toolbox */
.moderator .action-reason a {
    display: none;
}
span.tb-bracket-button.tb-add-removal-reason {
    display: none !important;
}
span.tb-bracket-button.tb-show-action-table {
    position: relative;
    float: right;
    margin-right: 5px;
    margin-top: -17px;
}
table.tb-action-table {
    margin: 0px !important;
}
/* give award */
.moderator li.give-gold-button {
    font-size: 0px;
}
.moderator li.give-gold-button:after {
    position: relative;
    font-size: 14px !important;
    content: 'a';
    color: rgb(130, 130, 130);
    font-weight: bold;
}
.moderator li.give-gold-button:hover {
    font-size: 14px !important;
}
.moderator li.give-gold-button:hover:after {
    content: '';
}
/* nsfw */
.moderator form.toggle.marknsfw-button {
    font-size: 0px;
}
.moderator form.toggle.marknsfw-button:after {
    position: relative;
    font-size: 14px !important;
    content: 'n';
    color: rgb(130, 130, 130);
    font-weight: bold;
}
.moderator form.toggle.marknsfw-button:hover {
    font-size: 14px !important;
}
.moderator form.toggle.marknsfw-button:hover:after {
    content: '';
}
/* crosspost */
.moderator li.crosspost-button {
    font-size: 0px;
}
.moderator li.crosspost-button:after {
    position: relative;
    font-size: 14px !important;
    content: 'xp';
    color: rgb(130, 130, 130);
    font-weight: bold;
}
.moderator li.crosspost-button:hover {
    font-size: 14px !important;
}
.moderator li.crosspost-button:hover:after {
    content: '';
}

[eritbh]

• Add an option to show the AutoModerator action as a hover over "removed by AutoModerator" instead. ...
• Allow "ask for a second opinion in modmail" to be disabled or turned off

There is already one setting to control both of these: Queue Tools: showAutomodActionReason

• Move "show recent actions" into an "recent" button like the "source" button.

The source button on posts and comments is a RES thing that only exists on old Reddit. It's impossible for us to add buttons to the action bar on new Reddit, because there's no frontend API container there; the only area we can attach buttons to the interface for post contexts is at the bottom of the post or next to the author's name. Features available in new Reddit are placed similarly in old Reddit for consistency. So this isn't something we can really do anything about.

• Change "context-popup" to just "(popup)". It's right next to the context button anyway. ...
• Fancier ideas

I'm not entirely opposed to giving people the option of shortening things, but I can't say I've ever had the wrapping issue myself, so I'm not super convinced this would be broadly helpful. Either my window is thin enough that buttons in queue will wrap even without toolbox's additions, or it's wide enough that it doesn't wrap even with them. Any chance you could make a recording of the behavior that's causing issues?

To be honest, I'd much rather focus on directly optimizing startup and bringing the 4s delay down. These suggestions could work too, but they strike me as a pretty indirect way of tackling this issue.

[dequeued0]

There is already one setting to control both of these: Queue Tools: showAutomodActionReason

I definitely don't want to remove the action reason, I just want to reduce how much vertical space it consumes and also reduce the amount of "buttons jumping downwards" as elements load.

I'm not entirely opposed to giving people the option of shortening things, but I can't say I've ever had the wrapping issue myself [...]

I suspect this is more of an issue for smaller screens with lower resolution (e.g., 2304 x 1440), but it definitely is an issue and it's only really an issue with Toolbox enabled. If I disable Toolbox (yikes, that would be worse, of course), Reddit fits everything in quite well even on small screens. I imagine this is also an issue for people using tablets.

I'll try to make a recording this weekend and share some screenshots as well.

[eritbh]

Had a conversation with dequeued on Discord, I'll summarize some of our thoughts here.

• I think optimizing the layout of UI elements to minimize disruption/reflow is definitely worthwile. The screen recordings they sent to me (kept private) helped illustrate that there's a pretty sizable delay between toolbox loading and toolbox adding UI elements to the screen, especially on queue pages.

• In queues, [ removed by AutoModerator (remove not spam) ] is redundant when the "show action reason" option is enabled. Space could be saved by just putting the action reason on the same line rather than adding it to its own line. This feature doesn't exist on new reddit, so there would be no issue with making a direct change to the interface like this. (Not sure how exactly this would interact with the second opinion button.)

• Stuff like the recent actions button could use position: absolute to place it at the bottom right of the post's existing content box, without having it on its own line. Going further, maybe it would make sense to group all post actions together in a dropdown menu sort of like we proposed for the user action buttons in #91. This would be a significant change to the interface, but I somehow doubt anyone's particularly attached to the current placement of these buttons.

• Shortening the text of non-Toolbox buttons isn't our place; maybe a feature request for RES devs. I don't have a strong opinion about shortening "context-popup" to something else.

There are other performance issues we can address that could also help alleviate this issue. I'll make another issue for addressing some of those, but the interface changes suggested here would work well alongside faster startup times and should be considered as well. For stuff like the recent actions button, the delays are caused by needing to make a web request on every page load, and the delay that causes can't be eliminated with caching or code optimization when we need the latest data every time. Smarter element positioning can pick up the slack.

[dequeued0]

Good summary! Thanks. The only thing I'm a bit iffy about is:

Going further, maybe it would make sense to group all post actions together in a dropdown menu sort of like we proposed for the user action buttons in #91

My experience is that adding steps to any relatively common operations makes moderation tasks a lot more cumbersome so I would not be thrilled about adding a pulldown to get to "show recent actions"). It reminds me of what happened to the search boxes for user profiles which is now much less accessible (unless you make Toolbox profiles the default). I talked about that more here:

https://www.reddit.com/r/toolbox/comments/d4coaf/please_add_the_search_boxes_back_to_standard_user/

(Not sure how exactly this would interact with the second opinion button.)

I doubt many people would miss the second opinion button. Most large subreddits use Slack or Discord channels for second opinions (in the absence of an existing modmail thread) and needing a second opinion that would require a modmail is less common on smaller subreddits.

[creesch]

One thing small thing regarding the action reason stuff.

In queues, [ removed by AutoModerator (remove not spam) ] is redundant when the "show action reason" option is enabled. Space could be saved by just putting the action reason on the same line rather than adding it to its own line

Yes and no, you run into trouble with expanding the recent actions which is a default in queues so while it would help with other listings it wouldn't necessarily help there. There is also the simple fact that we are mimicking jsAPI and are trying to keep events equivalent as much as possible so the placement is effectively mirrored here.

Having said that, for any other listing than queues it might be worthwhile to have a look at it as there the table is collapsed by default.

[creesch]

Having thought about it a bit more, there might be an easier solution to this. The issue mostly is that the travel occurs with a delay due to the requests we have to do for modlog data. What we can easily do is place an empty placeholder element where the button will eventually be drawn for modsubs.

This does however introduce extra whitespace under each post which will not necessarily be filled if there is no modlog data. It also only is really effective in regular views as in queues the mod actions are expanded by default.

Also, correct me if I am wrong @dequeued0 but I get the feeling you are working with relatively small windows considering that the context-popup button also causes overflows to the next line. Is that correct? In that case the much more practical solution would be to have an option to hide the queue sidebar to create more space.

[dequeued0]

@creesch The overflows are mostly due to context-popup and source (from RES) being added. I added some personal CSS to address this by shortening infrequently-used native buttons to a single character and that's basically "solved" it for me (new version of that CSS below), but I think it would be a nice tweak for Toolbox to shorten context-popup to just (popup) or something shorter like peek or glance.

The change I'm enjoying the most, though, is getting rid of the wasted vertical space by getting rid of the second opinion button and the removal reasons button as well as repositioning the show recent actions button to the right. Because my CSS change is somewhat rudimentary, the show recent actions button sometimes overlaps another button, but it is still much better than before because of the vertical space savings and that could easily be addressed by shortening it further to just logs or something.

I think the solution of using a filler button would be worse because while it solves "travel", you lose the space savings and it's also going to be a waste of space even worse than now when there are no recent actions.

/* toolbox tweaks */

.moderator .action-reason a {
    display: none;
}

span.tb-bracket-button.tb-add-removal-reason {
    display: none !important;
}

span.tb-bracket-button.tb-show-action-table {
    position: relative;
    float: right;
    margin-right: 5px;
    margin-top: -17px;
}

table.tb-action-table {
    margin: 0px !important;
}

/* shorten infrequently-used buttons */

.moderator li.share {
    font-size: 0px;
}
.moderator li.share::first-letter {
    font-size: x-small;
}

.moderator li.give-gold-button {
    font-size: 0px;
}
.moderator li.give-gold-button::first-letter {
    font-size: x-small;
}

.moderator form.toggle.marknsfw-button {
    font-size: 0px;
    display: block;
}
.moderator form.toggle.marknsfw-button::first-letter {
    font-size: x-small;
}

.moderator li.crosspost-button {
    font-size: 0px;
}
.moderator li.crosspost-button::first-letter {
    font-size: x-small;
}