Marker details should display proper information by default

[upsuper]

Currently, in MarkerTooltipContents.js, only specific markers are supported, it means when people trying to add some new markers with some payload, they would need to also add corresponding code to perf.html to make them actually useful. It is unfortunate, since people need to do more work before they can see anything meaningful.

Also it can happen that people may want to log some information temporarily for local debugging / profiling inside the profile, and adding a marker with payload seems to be a simple and straightforward way to do so... until they realize that they also need to run their own perf.html instance.

So, I think it would be useful to have marker details display in a reasonable way by default for unsupported markers, so that people can use perf-html directly when they try to add marker payload.

┆Issue is synchronized with this Jira Task

[julienw]

Hey ! From the "markers table" view, you can right-click on a marker to show the context menu. In the menu you'll find an item "copy marker JSON" that will copy the raw data to your clipboard.

We want to have this menu in the "marker chart" view too, but it was somewhat more involved to do so we defered this work for now -- but still in our backlog.

Please tell us if this works for you!

[upsuper]

It... doesn't really help. The position on profile viewer is the only point to have it attached with profile, otherwise MOZ_LOG is much easier...

[julienw]

But would the same context menu in the marker chart work ?

[julienw]

Note: this is https://github.com/devtools-html/perf.html/issues/546

[upsuper]

Maybe. It would still be more convenient if the stuff can be shown in tooltip directly rather than needing to paste to somewhere first.

[gregtatum]

@upsuper Do you have a specific data structure recommendation, on how we we would know how to format an unknown marker?

[upsuper]

For my case, I just do

      case 'Style': {
        return (
          <div className="tooltipDetails">
            {_markerDetail('Display', 'Display', data.Display)}
            {_markerDetail('Font', 'Font', data.Font)}
            {_markerDetail('Color', 'Color', data.Color)}
            {_markerDetail('List', 'List', data.List)}
            {_markerDetail('Text', 'Text', data.Text)}
            {_markerDetail('Visibility', 'Visibility', data.Visibility)}
            {_markerDetail('UserInterface', 'UserInterface', data.UserInterface)}
            {_markerDetail('TableBorder', 'TableBorder', data.TableBorder)}
            {_markerDetail('SVG', 'SVG', data.SVG)}
            {_markerDetail('Variables', 'Variables', data.Variables)}
            {_markerDetail('Background', 'Background', data.Background)}
            {_markerDetail('Position', 'Position', data.Position)}
            {_markerDetail('TextReset', 'TextReset', data.TextReset)}
            {_markerDetail('Content', 'Content', data.Content)}
            {_markerDetail('UIReset', 'UIReset', data.UIReset)}
            {_markerDetail('Table', 'Table', data.Table)}
            {_markerDetail('Margin', 'Margin', data.Margin)}
            {_markerDetail('Padding', 'Padding', data.Padding)}
            {_markerDetail('Border', 'Border', data.Border)}
            {_markerDetail('Outline', 'Outline', data.Outline)}
            {_markerDetail('XUL', 'XUL', data.XUL)}
            {_markerDetail('SVGReset', 'SVGReset', data.SVGReset)}
            {_markerDetail('Column', 'Column', data.Column)}
            {_markerDetail('Effects', 'Effects', data.Effects)}
          </div>
        );
      }

which seems to be a whole bunch of simple boilerplate that is possible to generate automatically.

[julienw]

Generally we like to display the information in a nice way for the user, that's why we have custom code. But this is also again a matter of who the user is.

I believe we could at least add a function to do this, that you could easily use while you test. Or maybe we could do it by default for markers we don't know.

[julienw]

I believe this is implemented by the new Markers API.