Improve user timing coloring

[denar90]

Linking to https://github.com/GoogleChrome/lighthouse/issues/1910

[denar90]

Are there some ways to make changes to canvas which is drawing all timelines, so we will be able to colorize user timing?

[paulirish]

https://github.com/ChromeDevTools/devtools-frontend/blob/4bb90e1913a4da551d8068ec4bc8874531670817/front_end/timeline/TimelineFlameChart.js#L528-L547

  if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) ||
          event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
        return this._consoleColorGenerator.colorForID(event.name);

basically if we can redefine the Timeline.TimelineFlameChartDataProvider instance's this._consoleColorGenerator.colorForID method then we can make it color however we want (based on the event.name).

the only hard part here is finding the path to the TimelineFlameChartDataProvider instance. or its possible we can redefine PerfUI.FlameChart.ColorGenerator before the dataprovider instance is ever instantiated.

devtools hax. :)

[denar90]

nice, thanks for pointing out on that stuff, now it will be much easier to make it happened)

let's do some hacking :)) 💪