DevTools/Timeline/Creating and registering producer/List of detail types
From MozillaWiki
Format
The format of any property inside producerInfo.details
should be as following:
"propertyName": {name: "display name", type: "one of the types", values: {true: "Yes", false: "No"}, items: { "subPropertyName1": {name: "display name", type: "one of the types except nested" values: {something: "something"} }, "subPropertyName2": {name: "display name", type: "one of the types except nested" values: {something: "something"} }, } }
values
and items
are required for only some kind of types.
name
is compulsory and is the displayed name for the property.
Types
- string: The property will be displayed in the details pane with its value shown as is.
- number: Similar to string type but used in case the property represents numbers.
- date: The value of the property will be displayed as a relative time with respect to the starting of the recording. The full localized date along with milliseconds will be displayed as the tooltip.
- enum: For this property, the corresponding value of the
values
property will be displayed instead. - ms, s and px: Choosing any of these property types will add the "ms", "s" and "px" string, correspondingly, after the value.
- id: This will show the value as a link, clicking on which, will open the Inspector developer tool with the DOM node with the same
id
selected. This should be used when the event is associated with a DOM element on the page. - url: This type should be chosen for displaying a url. In this case, only the last level part of the url will be displayed as a link. The tooltip will show the full url, and clicking on the url can have different actions depending upon the extension of the file in the url.
- css: If the url corresponds to a style sheet, it will be opened in the Style Editor Developer tool.
- js: If the url corresponds to a JavaScript file, it will be opened in the Debugger Developer tool.
- Any url not falling in above two categories will be opened as is, in a new tab.
- rect: This type should be used for a property representing a
boundingClientRect
. The coordinates will be displayed as "rect(<left>,<top>,<width>,<height>)". - object: This should be used when the value is an object in itself. Choosing this type will display a "click to View" link on the details pane. Clicking on which, will open, another pane containing the object in a viewable format. Any sub object inside this object will be opened in a new pane on top of it.
- nested: This type should be used if the property is itself a combination of other sub properties.
items
is required here, which will contain the list of all the sub properties falling under this property.