Explore Print Statement positioning

[jasonLaster]

Our print statement panel gives the impression that the console log is evaluated after the line it is added to

const canShowCount = lastFetchedFocusRange === null && !lastFetchDidOverflow;
console.log(`canShowCount? ${canShowCount} focus window? ${lastFetchedFocusRange === null}`);

In reality, the print statement is added to the first breakable position on the line, but that is not clear from the UI.

Chrome handles this by showing the panel on top of the line which helps in the case of variable declarations such as _reactDOM below.

console.log('...'); // I wouldn't expect to be able to log _reactDOM here
var _reactDOM = _interopRequireDefault(require("react-dom"));

It would be nice to explore how Replay signals to the user where the print statement will be evaluated. There are a couple of cases that would be good to cover

1. when the line is a simple expression
2. when the line has a declaration
3. when the line has multiple breakable positions e.g. call expressions

We have a couple of tools at our disposal to make this clearer

1. we can position the panel below/above the line and absolutely on the line
2. we can add a marker on the line
3. we can highlight portions of the line
4. we can use animations and transitions
5. we can edit the text on the line

Some other goals that we should keep in mind

1. we should try to unify print statements and breakpoints i.e. points
2. we should try and make it as easy to preview a point on hover, add a point, and dismiss it
3. we should try to keep the code as readable as possible

spun out of https://linear.app/replay/issue/BAC-1673/logpoint-variable-not-evaluating-correctly