webdiff icon indicating copy to clipboard operation
webdiff copied to clipboard

Optimise two column diff interface as per screen size. It should resize based on browser width.

Open msimar opened this issue 8 years ago • 4 comments

msimar avatar May 19 '17 08:05 msimar

Right now the table entries that show code can show up to 101 characters. That's what limits the width of the webdiff application in the browser window. We could easily change this to say 501 characters and it would resize to as wide as any browser window would likely every be. However, if we do this we can up with code that is so visually separated between the two file displays that you don't get a useful diff tool. This is much like when you look at websites like the Bash Reference Manual where the text spans the width of the browser no matter how wide, which becomes very difficult to read. I think it's better that we leave the width the way it is.

daytonb avatar Jul 08 '18 00:07 daytonb

I like the way that Reviewable handles this:

image

You can drag the little arrow in the top right to adjust the width of the diff. If you click "auto", it goes to the max width for the current browser window.

If we wanted to get extra-fancy, we could try to detect line length settings based on a setup.cfg or eslint.json file in the project that you're diffing.

danvk avatar Jul 09 '18 15:07 danvk

@danvk, is that something you are interested in working on? It sounds a bit beyond my javascript skill level.

daytonb avatar Jul 09 '18 16:07 daytonb

As feedback: I'm currently using a TamperMonkey script to insert a style tag

<style>
    td.code {width: 1024ch}
</style>

It works perfectly well and enables the full range of convenient browser features, notably adjusting the exact formatting of what is displayed by:

  • Resizing the window
  • Zooming in and out

I.e. desktop browsers already come with capabilities that make "the page is too wide" pretty much a non-issue, or at least an issue that has to be addressed anyway on many websites, notably including wikipedia:

image

kbauer avatar Feb 12 '23 11:02 kbauer