DevTools/Timeline/Creating and registering producer/List of detail types

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.