Application layout

[paulirish]

I have found it challenging to use this with larger files, and wanted to see the mappings live across all 3 panes, as I move.

Here's a prototype that does a fullscreen layout with 3 independently scrollable panes, that synchronize on click.

demo: http://paulirish.github.io/source-map-visualization/#babel

The UX probably isn't perfect yet. Any feedback? (cc @jvilk @lydell)

[lydell]

It's a nice feature. :+1: (Possibly a bit indiscoverable, though. Oh well.)

I get this error in Firefox 46:

TypeError: e.scrollIntoViewIfNeeded is not a function

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

[jvilk]

@paulirish This is definitely a large improvement. I had the same issue, but never had the time to investigate a fix.

The only possible further improvement I can think of is a whole 'nother feature: making clicked source map entries linkable. Then, it would be dead simple to link to problematic source map sections in bug reports, especially when it is unclear how to reduce a problem to a minimal test case.

The code changes look clean, too, but I admit I am not the most familiar with this code base.

[paulirish]

I get this error in Firefox 46:

@lydell I fixed the error. Bonus: firefox gets a nice smooth scrolling transition. :)

[paulirish]

Did some more work on the app...

• Colors adjusted
• headers for what is what
• swapped original and compiled positions.
• permalinks

---

also to get back to you @jvilk ..

The only possible further improvement I can think of is a whole 'nother feature: making clicked source map entries linkable.

I gave this an early shot. You have to inspect to get the ID of a span.. but then you can put it into the URL like this: http://paulirish.github.io/source-map-visualization/#raven#span_8694 And it'll navigate there.

Lastly, I tried line numbers real quick but it gets a little complicated due to how multiple source files are managed. :/

[jvilk]

I tried line numbers real quick but it gets a little complicated due to how multiple source files are managed. :/

@paulirish Oh, right! I guess in the best solution, this application would have to have a notion of separate input files first, which isn't entirely a bad idea for a future feature.

I gave this an early shot. You have to inspect to get the ID of a span

So we're halfway there! To expose this to users, we could either change the URL bar on rollover or add a share button somewhere that pops up a box with a URL to copy+paste for the currently selected statement.

You removed click to synchronize, though? I found that to be an improvement over synchronize on rollover. In the #raven example, it's difficult to navigate your cursor out of the minified code without changing the focus to a different statement. While it synchronizes all of the views, sometimes you want to see the context surrounding a particular statement in the original code, which requires moving the mouse over to scroll the relevant pane.

[paulirish]

or add a share button

Yeah I think a "copy link" button is right, so we dont change the URL alll the time. But you can choose to get a link easily. Cool.

You removed click to synchronize, though?

Yeah. Felt like click was too slow. But agree this model fails wth raven. :/

Perhaps using contenteditable + readonly so the text can be navigated with the text caret would provide best of both worlds. Click or textcursor movement triggers the scroll reveal. Mouseover just highlights.

seems cool. won't get a chance to do this soon. but when the time is right i'll remember this thread. :)

[paulirish]

picking this back up in #26