Bug 1519443 - Change jsdoc comments in highlighter file class declarations to match others the Firefox codebase r=gl

Differential Revision: https://phabricator.services.mozilla.com/D16327

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/test/head.js

@@ -865,7 +865,7 @@ async function getDisplayedNodeTextContent(selector, inspector) {
  *        If true, the shapes highlighter is being shown. If false, it is being hidden
  * @param {Options} options
  *        Config option for the shapes highlighter. Contains:
- *        - {Boolean} transformMode: wether to show the highlighter in transforms mode
+ *        - {Boolean} transformMode: whether to show the highlighter in transforms mode
  */
 async function toggleShapesHighlighter(view, selector, property, show, options = {}) {
   info(`Toggle shapes highlighter ${show ? "on" : "off"} for ${property} on ${selector}`);

devtools/server/actors/highlighters/accessible.js

@@ -27,21 +27,20 @@ loader.lazyRequireGetter(this, "Infobar", "devtools/server/actors/highlighters/u
  * h.hide();
  * h.destroy();
  *
- * Available options:
- *         - {Number} x
- *           x coordinate of the top left corner of the accessible object
- *         - {Number} y
- *           y coordinate of the top left corner of the accessible object
- *         - {Number} w
- *           width of the the accessible object
- *         - {Number} h
- *           height of the the accessible object
- *         - {Number} duration
- *           Duration of time that the highlighter should be shown.
- *         - {String|null} name
- *           name of the the accessible object
- *         - {String} role
- *           role of the the accessible object
+ * @param {Number} options.x
+ *        X coordinate of the top left corner of the accessible object
+ * @param {Number} options.y
+ *        Y coordinate of the top left corner of the accessible object
+ * @param {Number} options.w
+ *        Width of the the accessible object
+ * @param {Number} options.h
+ *        Height of the the accessible object
+ * @param {Number} options.duration
+ *        Duration of time that the highlighter should be shown.
+ * @param {String|null} options.name
+ *        Name of the the accessible object
+ * @param {String} options.role
+ *        Role of the the accessible object
  *
  * Structure:
  * <div class="highlighter-container" aria-hidden="true">

devtools/server/actors/highlighters/box-model.js

@@ -47,23 +47,21 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-within"];
  * h.hide();
  * h.destroy();
  *
- * Available options:
- * - region {String}
- *   "content", "padding", "border" or "margin"
- *   This specifies the region that the guides should outline.
- *   Defaults to "content"
- * - hideGuides {Boolean}
- *   Defaults to false
- * - hideInfoBar {Boolean}
- *   Defaults to false
- * - showOnly {String}
- *   "content", "padding", "border" or "margin"
- *   If set, only this region will be highlighted. Use with onlyRegionArea to
- *   only highlight the area of the region.
- * - onlyRegionArea {Boolean}
- *   This can be set to true to make each region's box only highlight the area
- *   of the corresponding region rather than the area of nested regions too.
- *   This is useful when used with showOnly.
+ * @param {String} options.region
+ *        Specifies the region that the guides should outline:
+ *          "content" (default), "padding", "border" or "margin".
+ * @param {Boolean} options.hideGuides
+ *        Defaults to false
+ * @param {Boolean} options.hideInfoBar
+ *        Defaults to false
+ * @param {String} options.showOnly
+ *        If set, only this region will be highlighted. Use with onlyRegionArea
+ *        to only highlight the area of the region:
+ *        "content", "padding", "border" or "margin"
+ * @param {Boolean} options.onlyRegionArea
+ *        This can be set to true to make each region's box only highlight the
+ *        area of the corresponding region rather than the area of nested
+ *        regions too. This is useful when used with showOnly.
  *
  * Structure:
  * <div class="highlighter-container">

devtools/server/actors/highlighters/css-grid.js

@@ -134,36 +134,39 @@ const gCachedGridPattern = new Map();
  * h.hide();
  * h.destroy();
  *
- * Available Options:
- * - color(colorValue)
- *     @param  {String} colorValue
- *     The color that should be used to draw the highlighter for this grid.
- * - showAllGridAreas(isShown)
- *     @param  {Boolean} isShown
- *     Shows all the grid area highlights for the current grid if isShown is true.
- * - showGridArea(areaName)
- *     @param  {String} areaName
- *     Shows the grid area highlight for the given area name.
- * - showGridAreasOverlay(isShown)
- *     @param  {Boolean} isShown
- *     Displays an overlay of all the grid areas for the current grid container if
- *     isShown is true.
- * - showGridCell({ gridFragmentIndex: Number, rowNumber: Number, columnNumber: Number })
- *     @param  {Object} { gridFragmentIndex: Number, rowNumber: Number,
- *                        columnNumber: Number }
- *     An object containing the grid fragment index, row and column numbers to the
- *     corresponding grid cell to highlight for the current grid.
- * - showGridLineNames({ gridFragmentIndex: Number, lineNumber: Number,
- *                       type: String })
- *     @param  {Object} { gridFragmentIndex: Number, lineNumber: Number }
- *     An object containing the grid fragment index and line number to the
- *     corresponding grid line to highlight for the current grid.
- * - showGridLineNumbers(isShown)
- *     @param  {Boolean} isShown
- *     Displays the grid line numbers on the grid lines if isShown is true.
- * - showInfiniteLines(isShown)
- *     @param  {Boolean} isShown
- *     Displays an infinite line to represent the grid lines if isShown is true.
+ * @param {String} options.color
+ *        The color that should be used to draw the highlighter for this grid.
+ * @param {Boolean} options.showAllGridAreas
+ *        Shows all the grid area highlights for the current grid if isShown is
+ *        true.
+ * @param {String} options.showGridArea
+ *        Shows the grid area highlight for the given area name.
+ * @param {Boolean} options.showGridAreasOverlay
+ *        Displays an overlay of all the grid areas for the current grid
+ *        container if isShown is true.
+ * @param {Object} options.showGridCell
+ *        An object containing the grid fragment index, row and column numbers
+ *        to the corresponding grid cell to highlight for the current grid.
+ * @param {Number} options.showGridCell.gridFragmentIndex
+ *        Index of the grid fragment to render the grid cell highlight.
+ * @param {Number} options.showGridCell.rowNumber
+ *        Row number of the grid cell to highlight.
+ * @param {Number} options.showGridCell.columnNumber
+ *        Column number of the grid cell to highlight.
+ * @param {Object} options.showGridLineNames
+ *        An object containing the grid fragment index and line number to the
+ *        corresponding grid line to highlight for the current grid.
+ * @param {Number} options.showGridLineNames.gridFragmentIndex
+ *        Index of the grid fragment to render the grid line highlight.
+ * @param {Number} options.showGridLineNames.lineNumber
+ *        Line number of the grid line to highlight.
+ * @param {String} options.showGridLineNames.type
+ *        The dimension type of the grid line.
+ * @param {Boolean} options.showGridLineNumbers
+ *        Displays the grid line numbers on the grid lines if isShown is true.
+ * @param {Boolean} options.showInfiniteLines
+ *        Displays an infinite line to represent the grid lines if isShown is
+ *        true.
  *
  * Structure:
  * <div class="highlighter-container">

devtools/server/actors/highlighters/flexbox.js

@@ -59,16 +59,12 @@ const JUSTIFY_CONTENT = "justify-content";
  * The FlexboxHighlighter is the class that overlays a visual canvas on top of
  * display: [inline-]flex elements.
  *
- * Available Options:
- * - color(colorValue)
- *     @param  {String} colorValue
- *     The color that should be used to draw the highlighter for this flexbox.
- * - showAlignment(isShown)
- *     @param  {Boolean} isShown
- *     Shows the alignment in the flexbox highlighter.
- * - noCountainerOutline(isShown)
- *     @param  {Boolean} noContainerOutline
- *     Prevent drawing an outline around the flex container.
+ * @param {String} options.color
+ *        The color that should be used to draw the highlighter for this flexbox.
+ * @param {Boolean} options.showAlignment
+ *        Shows the alignment in the flexbox highlighter.
+ * @param {Boolean} options.noCountainerOutline
+ *        Prevent drawing an outline around the flex container.
  *
  * Structure:
  * <div class="highlighter-container">

devtools/server/actors/highlighters/shapes.js

@@ -66,6 +66,12 @@ const _dragging = Symbol("shapes/dragging");
  *
  * A refresher for coordinates and change of basis that may be helpful:
  * https://www.math.ubc.ca/~behrend/math221/Coords.pdf
+ *
+ * @param {String} options.hoverPoint
+ *        The point to highlight.
+ * @param {Boolean} options.transformMode
+ *        Whether to show the highlighter in transforms mode.
+ * @param {} options.mode
  */
 class ShapesHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {