Restore `faster-pr-diff-options` feature on PRs #2597

I use the "No Whitespace" button all the time (wish it was just ALWAYS enabled by default) and really miss it now.

Sadly there's not really space for it now. GitHub has too many widgets.

<img width="1028" alt="" src="https://user-images.githubusercontent.com/1402241/62343178-ec00eb00-b513-11e9-9f55-30cb56fc2712.png">

And when you scroll, there's even less space since the PR title is added:

We could change the label on the button from "No whitespace" to something like "-w" or an icon

On Tue, Dec 17, 2019, 15:57 Federico Brigante notifications@github.com wrote:

Sadly there's not really space for it:

https://user-images.githubusercontent.com/1402241/62343178-ec00eb00-b513-11e9-9f55-30cb56fc2712.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/sindresorhus/refined-github/issues/2597?email_source=notifications&email_token=AAI2U3OQNZCF6KA2B7DB4M3QZE4MPA5CNFSM4JW4L46KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHD5V7I#issuecomment-566745853, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAI2U3PR453AIXLG6KN6UILQZE4MPANCNFSM4JW4L46A .

Still not enough space if all of GitHub’s widgets are visible and the title is there too

At what screen width does it break?

All of them. Look at the last screenshot I posted. Add the “Commit suggestions” widget and voila: no space left.

As a compromise, it could hide the 'files viewed' indicator maybe? Or we could reduce the amount of space the title has. Or we would increase the width the content has on the header. I'm happy to mock up visualisations of these if you're interested.

it could hide the 'files viewed' indicator maybe?

We shouldn't hide a useful feature (the feature's utility is debatable, but...)

Or we could reduce the amount of space the title has.

I don't wanna play that game. We tried it for the past 2 years and we've been just moving the problem and never resolving it.

Or we would increase the width the content has on the header.

This could work, but the compromises are:

• only works when the window fits it
• it might not look great since the header would be slightly longer than the content width

In the end, I think these are the safest to implement and they still bring down the total number of clicks to one (+ hover)

• dropping its "apply and reload" button (saves one click)
• opening the dropdown on hover (saves one more click)

+1 for dropping apply and reload, especially as only two settings live on that menu. Not sure about the latter, is the hover behaviour implemented anywhere else?

is the hover behaviour implemented anywhere else?

It used to be implemented on the reactions popup, but it stopped working and we never readded it.

Can you at least re-add the shortcut? :slightly_smiling_face:

PR welcome for that. Most of the feature code can be dropped: https://github.com/sindresorhus/refined-github/blob/master/source/features/faster-pr-diff-options.tsx

Something as short as:

function init(): void {
    const searchParameters = new URLSearchParams(location.search);
    const isHidingWhitespace = searchParameters.get('w') === '1';

    if (isHidingWhitespace) {
        searchParameters.delete('w');
    } else {
        searchParameters.set('w', '1');
    }

    document.body.append(
        <a
            classNames="sr-only"
            aria-label={`Show ${type} diffs`}
            href={`?${String(parameters)}`}
        />
    );
}

Maybe something changed as I see plenty of space for those icons with my resolution (1920x1200)

Also when scrolled down (though in this mode the icons may need to be shorter)

Even on smaller resolutions there is enough space because GH removes some of the filters conveniently leaving room for the no-whitespace icon. (width: 640)

@jensf

1. Visit https://github.com/sindresorhus/refined-github/pull/4052/files
2. Resize to 800px
3. Scroll down

<img width="784" alt="Screen Shot" src="https://user-images.githubusercontent.com/1402241/110520777-89e76f00-80d4-11eb-93e0-d34ed09a951d.png">

There's no space for a 250px widget and this isn't even considering GitHub’s own "Commit suggestions" widget that appears sometimes.

<img width="785" alt="Screen Shot" src="https://user-images.githubusercontent.com/1402241/110520940-bb603a80-80d4-11eb-893f-b36e11af7eff.png">

We still could, however, replace the current gear icon with 2 icon toggles:

• unified diff toggle
• visible whitespace toggle

The icons will make absolutely no sense on their own but this would only take an extra 30px on the lower line. They'll probably only make sense with tooltips.

@fregante I see now. That last situation the gui is super tight.

I would be ok with ok with 2 toggle icons though it's not ideal due to vagueness of the their use. Perhaps a hover hint may be enough to clear up their purpose.

Some other ideas:

• Move Commit suggestions imo this is the problem. The PR name is almost removed with only 1.5 words showing, and the filters are all jammed together. Perhaps we can add an extra line to space things out a bit? or move the Comment Suggestions or files viewed beneath the Review Changes.

• shrink the Commit suggestions I'm struggling how this might be shrunk and still be useful, but if it wasn't so big it would likely solve our issue.

• Add when enough space Add the nice icons only when there's enough space. Say width > 1000 for the collapsed header and maybe always for the non collapsed header. I'm always reviewing on a large screen so this would be perfect for me.

Could you open new issue to clean up the file review header? There's indeed room for improvement to make more room, but it'd be a separate feature. Once that's implemented, we could come up with an alternative solution here, but [🧍‍♂️|👫] [no whitespace] is still pretty wide

I added another suggestion in my first issue to restore the feature almost as it was, with the exception that:

• the icons appear in a slightly different place
• the icons only appear on larger screens

This should avoid the wrapping issue on small resolutions.