Bug 1519443 - Change jsdoc comments in highlighter file class declarations to match others the Firefox codebase r=gl
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Thu, 17 Jan 2019 17:31:06 +0000
changeset 514293 0f7827253b525066d50ad05a3cfe7d18f4df0124
parent 514292 c63fdb43c80ceed8e580b5760a2e632844c30f5e
child 514294 6f9d7c3c98fa22919f7b5d45554ad2224a2cdc81
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1519443
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/inspector/test/head.js
devtools/server/actors/highlighters/accessible.js
devtools/server/actors/highlighters/box-model.js
devtools/server/actors/highlighters/css-grid.js
devtools/server/actors/highlighters/flexbox.js
devtools/server/actors/highlighters/shapes.js
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -860,17 +860,17 @@ async function getDisplayedNodeTextConte
  * @param {String} selector
  *        The selector in the rule-view to look for the property in
  * @param {String} property
  *        The name of the property
  * @param {Boolean} show
  *        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}`);
   const highlighters = view.highlighters;
   const container = getRuleViewProperty(view, selector, property).valueSpan;
   const shapesToggle = container.querySelector(".ruleview-shapeswatch");
 
   const metaKey = options.transformMode;
--- a/devtools/server/actors/highlighters/accessible.js
+++ b/devtools/server/actors/highlighters/accessible.js
@@ -22,31 +22,30 @@ loader.lazyRequireGetter(this, "Infobar"
  *
  * Usage example:
  *
  * let h = new AccessibleHighlighter(env);
  * h.show(node, { x, y, w, h, [duration] });
  * 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">
  *   <div class="accessible-root">
  *     <svg class="accessible-elements" hidden="true">
  *       <path class="accessible-bounds" points="..." />
  *     </svg>
  *     <div class="accessible-infobar-container">
--- a/devtools/server/actors/highlighters/box-model.js
+++ b/devtools/server/actors/highlighters/box-model.js
@@ -42,33 +42,31 @@ const PSEUDO_CLASSES = [":hover", ":acti
  *
  * Usage example:
  *
  * let h = new BoxModelHighlighter(env);
  * h.show(node, options);
  * 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">
  *   <div class="box-model-root">
  *     <svg class="box-model-elements" hidden="true">
  *       <g class="box-model-regions">
  *         <path class="box-model-margin" points="..." />
  *         <path class="box-model-border" points="..." />
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -129,46 +129,49 @@ const gCachedGridPattern = new Map();
  * display:[inline-]grid elements.
  *
  * Usage example:
  * let h = new CssGridHighlighter(env);
  * h.show(node, options);
  * 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">
  *   <canvas id="css-grid-canvas" class="css-grid-canvas">
  *   <svg class="css-grid-elements" hidden="true">
  *     <g class="css-grid-regions">
  *       <path class="css-grid-areas" points="..." />
  *       <path class="css-grid-cells" points="..." />
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -54,26 +54,22 @@ const gCachedFlexboxPattern = new Map();
 
 const FLEXBOX = "flexbox";
 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">
  *   <div id="flexbox-root" class="flexbox-root">
  *     <canvas id="flexbox-canvas"
  *             class="flexbox-canvas"
  *             width="4096"
  *             height="4096"
--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -61,16 +61,22 @@ const _dragging = Symbol("shapes/draggin
  * the west edge of the shape (from the northwest corner to the southwest corner).
  *
  * Because of rotation, the "north" and "west" edges might not actually be at the
  * top and left of the transformed shape. Imagine that the compass directions are
  * also rotated along with the shape.
  *
  * 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) {
     super(highlighterEnv);
     EventEmitter.decorate(this);
 
     this.ID_CLASS_PREFIX = "shapes-";