Document PerformanceMark/PerformanceMeasure.detail (#21823)

* Document PerformanceMark/PerformanceMeasure.detail

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: Joe Medley <[email protected]>

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: Joe Medley <[email protected]>

Author: 3 people

files/en-us/web/api/performancemark/detail/index.md

@@ -0,0 +1,39 @@
+---
+title: PerformanceMark.detail
+slug: Web/API/PerformanceMark/detail
+page-type: web-api-instance-property
+tags:
+  - API
+  - Property
+  - Reference
+  - Web Performance
+browser-compat: api.PerformanceMark.detail
+---
+
+{{APIRef}}
+
+The read-only **`detail`** property returns arbitrary metadata that was included in the mark upon construction (either when using {{domxref("Performance.mark","performance.mark()")}} or the {{domxref("PerformanceMark.PerformanceMark","PerformanceMark()")}} constructor).
+
+## Value
+
+Returns the value it is set to (from `markOptions` of {{domxref("Performance.mark","performance.mark()")}} or the {{domxref("PerformanceMark.PerformanceMark","PerformanceMark()")}} constructor).
+
+## Examples
+
+The following example demonstrates the `detail` property.
+
+```js
+performance.mark("dog", { detail: "labrador" });
+
+const dogEntries = performance.getEntriesByName("dog");
+
+dogEntries[0].detail; // labrador
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/performancemark/index.md

@@ -28,17 +28,22 @@ Entries of this type are typically created by calling {{domxref("Performance.mar
 
 ## Instance properties
 
-This interface has no properties but it extends the following {{domxref("PerformanceEntry")}} properties by qualifying/constraining the properties as follows:
+This interface extends the following {{domxref("PerformanceEntry")}} properties by qualifying/constraining the properties as follows:
 
-- {{domxref("PerformanceEntry.entryType")}}
+- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}}
   - : Returns "`mark`".
-- {{domxref("PerformanceEntry.name")}}
+- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}}
   - : Returns the name given to the mark when it was created via a call to {{domxref("Performance.mark()","performance.mark()")}}.
-- {{domxref("PerformanceEntry.startTime")}}
+- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}}
   - : Returns the {{domxref("DOMHighResTimeStamp")}} when {{domxref("Performance.mark()","performance.mark()")}} was called.
-- {{domxref("PerformanceEntry.duration")}}
+- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}}
   - : Returns "`0`". (A mark has no _duration_.)
 
+This interface also supports the following properties:
+
+- {{domxref("PerformanceMark.detail")}} {{ReadOnlyInline}}
+  - : Returns arbitrary metadata that has been included in the mark upon construction.
+
 ## Instance methods
 
 This interface has no methods.

files/en-us/web/api/performancemeasure/detail/index.md

@@ -0,0 +1,39 @@
+---
+title: PerformanceMeasure.detail
+slug: Web/API/PerformanceMeasure/detail
+page-type: web-api-instance-property
+tags:
+  - API
+  - Property
+  - Reference
+  - Web Performance
+browser-compat: api.PerformanceMeasure.detail
+---
+
+{{APIRef}}
+
+The read-only **`detail`** property returns arbitrary metadata that was included in the mark upon construction (when using {{domxref("Performance.measure","performance.measure()")}}.
+
+## Value
+
+Returns the value it was set to (from `markOptions` of {{domxref("Performance.measure","performance.measure()")}}).
+
+## Examples
+
+The following example demostrates the `detail` property.
+
+```js
+performance.measure("dog", { detail: "labrador", start: 0, end: 12345 });
+
+const dogEntries = performance.getEntriesByName("dog");
+
+dogEntries[0].detail; // labrador
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/performancemeasure/index.md

@@ -23,9 +23,8 @@ browser-compat: api.PerformanceMeasure
 
 This interface defines:
 
-- `PerformanceMeasure.detail`
+- {{domxref("PerformanceMeasure.detail")}}
   - : Contains arbitrary metadata about the measure.
-    This may be passed in as a property of the {{domxref("Performance.measure()","performance.measure()")}} argument `MeasureOptions`.
 
 In addition, it extends the following {{domxref("PerformanceEntry")}} properties by qualifying/constraining the properties as follows: