Commit 53d0657e authored by Sebastian Hengst's avatar Sebastian Hengst
Browse files

Backed out changeset 0b7dd5c229be (bug 1385398) for failing xpcshell test... 

Backed out changeset 0b7dd5c229be (bug 1385398) for failing xpcshell test devtools/server/tests/unit/test_shapes_highlighter_helpers.js. r=backout
parent 6aa0aa41

devtools/server/actors/highlighters.css

+1 −5
Original line number Diff line number Diff line
@@ -611,11 +611,7 @@ 
}



:-moz-native-anonymous .shapes-markers {

  fill: #fff;

}



:-moz-native-anonymous .shapes-markers-outline {

  fill: var(--highlighter-guide-color);

  fill: var(--highlighter-marker-color);

}



:-moz-native-anonymous .shapes-marker-hover {

devtools/server/actors/highlighters/shapes.js

+18 −21
Original line number Diff line number Diff line
@@ -17,7 +17,7 @@ const { 
} = require("devtools/server/actors/utils/shapes-geometry-utils");

const EventEmitter = require("devtools/shared/old-event-emitter");



const BASE_MARKER_SIZE = 5;

const BASE_MARKER_SIZE = 10;

// the width of the area around highlighter lines that can be clicked, in px

const LINE_CLICK_WIDTH = 5;

const DOM_EVENTS = ["mousedown", "mousemove", "mouseup", "dblclick"];
@@ -116,16 +116,6 @@ class ShapesHighlighter extends AutoRefreshHighlighter { 
    });



    // Append a path to display the markers for the shape.

    createSVGNode(this.win, {

      nodeType: "path",

      parent: mainSvg,

      attributes: {

        "id": "markers-outline",

        "class": "markers-outline",

      },

      prefix: this.ID_CLASS_PREFIX

    });



    createSVGNode(this.win, {

      nodeType: "path",

      parent: mainSvg,
@@ -203,11 +193,24 @@ class ShapesHighlighter extends AutoRefreshHighlighter { 
        } else if (this.shapeType === "inset") {

          this._handleInsetClick(pageX, pageY);

        }

        // Currently, changes to shape-outside do not become visible unless a reflow

        // is forced (bug 1359834). This is a hack to force a reflow so changes made

        // using the highlighter can be seen: we change the width of the element

        // slightly on mousedown on a point, and restore the original width on mouseup.

        if (this.property === "shape-outside" && this[_dragging]) {

          let { width } = this.zoomAdjustedDimensions;

          let origWidth = getDefinedShapeProperties(this.currentNode, "width");

          this.currentNode.style.setProperty("width", `${width + 1}px`);

          this[_dragging].origWidth = origWidth;

        }

        event.stopPropagation();

        event.preventDefault();

        break;

      case "mouseup":

        if (this[_dragging]) {

          if (this.property === "shape-outside") {

            this.currentNode.style.setProperty("width", this[_dragging].origWidth);

          }

          this[_dragging] = null;

        }

        break;
@@ -672,7 +675,7 @@ class ShapesHighlighter extends AutoRefreshHighlighter { 
    let { width, height } = this.zoomAdjustedDimensions;

    let zoom = getCurrentZoom(this.win);

    let path = points.map(([x, y]) => {

      return getCirclePath(BASE_MARKER_SIZE, x, y, width, height, zoom);

      return getCirclePath(x, y, width, height, zoom);

    }).join(" ");



    let markerHover = this.getElement("marker-hover");
@@ -1271,7 +1274,6 @@ class ShapesHighlighter extends AutoRefreshHighlighter { 
    this.getElement("polygon").setAttribute("hidden", true);

    this.getElement("rect").setAttribute("hidden", true);

    this.getElement("markers").setAttribute("d", "");

    this.getElement("markers-outline").setAttribute("d", "");

  }



  /**
@@ -1400,14 +1402,10 @@ class ShapesHighlighter extends AutoRefreshHighlighter { 
   */

  _drawMarkers(coords, width, height, zoom) {

    let markers = coords.map(([x, y]) => {

      return getCirclePath(BASE_MARKER_SIZE, x, y, width, height, zoom);

    }).join(" ");

    let outline = coords.map(([x, y]) => {

      return getCirclePath(BASE_MARKER_SIZE + 2, x, y, width, height, zoom);

      return getCirclePath(x, y, width, height, zoom);

    }).join(" ");



    this.getElement("markers").setAttribute("d", markers);

    this.getElement("markers-outline").setAttribute("d", outline);

  }



  /**
@@ -1533,7 +1531,6 @@ exports.shapeModeToCssPropertyName = shapeModeToCssPropertyName; 


/**

 * Get the SVG path definition for a circle with given attributes.

 * @param {Number} size the radius of the circle in pixels

 * @param {Number} cx the x coordinate of the centre of the circle

 * @param {Number} cy the y coordinate of the centre of the circle

 * @param {Number} width the width of the element the circle is being drawn for
@@ -1541,14 +1538,14 @@ exports.shapeModeToCssPropertyName = shapeModeToCssPropertyName; 
 * @param {Number} zoom the zoom level of the window the circle is drawn in

 * @returns {String} the definition of the circle in SVG path description format.

 */

const getCirclePath = (size, cx, cy, width, height, zoom) => {

const getCirclePath = (cx, cy, width, height, zoom) => {

  // We use a viewBox of 100x100 for shape-container so it's easy to position things

  // based on their percentage, but this makes it more difficult to create circles.

  // Therefor, 100px is the base size of shape-container. In order to make the markers'

  // size scale properly, we must adjust the radius based on zoom and the width/height of

  // the element being highlighted, then calculate a radius for both x/y axes based

  // on the aspect ratio of the element.

  let radius = size * (100 / Math.max(width, height)) / zoom;

  let radius = BASE_MARKER_SIZE * (100 / Math.max(width, height)) / zoom;

  let ratio = width / height;

  let rx = (ratio > 1) ? radius : radius / ratio;

  let ry = (ratio > 1) ? radius * ratio : radius;