--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -76,17 +76,16 @@ class ShapesHighlighter extends AutoRefr
 
     this.referenceBox = "border";
     this.useStrokeBox = false;
     this.geometryBox = "";
     this.hoveredPoint = null;
     this.fillRule = "";
     this.numInsetPoints = 0;
     this.transformMode = false;
-    this.viewport = {};
 
     this.markup = new CanvasFrameAnonymousContentHelper(this.highlighterEnv,
       this._buildMarkup.bind(this));
     this.onPageHide = this.onPageHide.bind(this);
 
     let { pageListenerTarget } = this.highlighterEnv;
     DOM_EVENTS.forEach(event => pageListenerTarget.addEventListener(event, this));
     pageListenerTarget.addEventListener("pagehide", this.onPageHide);
@@ -429,36 +428,16 @@ class ShapesHighlighter extends AutoRefr
     // remove existing cursor definitions in the style
     style = style.replace(/cursor:.*?;/g, "");
     style = style.replace(/pointer-events:.*?;/g, "");
     let pointerEvents = cursorType === "auto" ? "none" : "auto";
     container.setAttribute("style",
       `${style}pointer-events:${pointerEvents};cursor:${cursorType};`);
   }
 
-  /**
-   * Set the absolute pixel offsets which define the current viewport in relation to
-   * the full page size.
-   *
-   * If a padding value is given, inset the viewport by this value. This is used to define
-   * a virtual viewport which ensures some element remains visible even when at the edges
-   * of the actual viewport.
-   *
-   * @param {Number} padding
-   *        Optional. Amount by which to inset the viewport in all directions.
-   */
-  setViewport(padding = 0) {
-    const { pageXOffset, pageYOffset, innerWidth, innerHeight } = this.win;
-    const left = pageXOffset + padding;
-    const right = innerWidth + pageXOffset - padding;
-    const top = pageYOffset + padding;
-    const bottom = innerHeight + pageYOffset - padding;
-    this.viewport = { left, right, top, bottom, padding };
-  }
-
   handleEvent(event, id) {
     // No event handling if the highlighter is hidden
     if (this.areShapesHidden()) {
       return;
     }
 
     let { target, type, pageX, pageY } = event;
 
@@ -497,40 +476,31 @@ class ShapesHighlighter extends AutoRefr
           this._handleCircleClick(pageX, pageY);
         } else if (this.shapeType === "ellipse") {
           this._handleEllipseClick(pageX, pageY);
         } else if (this.shapeType === "inset") {
           this._handleInsetClick(pageX, pageY);
         }
         event.stopPropagation();
         event.preventDefault();
-
-        // Calculate constraints for a virtual viewport which ensures that a dragged
-        // marker remains visible even at the edges of the actual viewport.
-        this.setViewport(BASE_MARKER_SIZE);
         break;
       case "mouseup":
         if (this[_dragging]) {
           this[_dragging] = null;
           this._handleMarkerHover(this.hoveredPoint);
         }
         break;
       case "mousemove":
         if (!this[_dragging]) {
           this._handleMouseMoveNotDragging(pageX, pageY);
           return;
         }
         event.stopPropagation();
         event.preventDefault();
 
-        // Set constraints for mouse position to ensure dragged marker stays in viewport.
-        const { left, right, top, bottom } = this.viewport;
-        pageX = Math.min(Math.max(left, pageX), right);
-        pageY = Math.min(Math.max(top, pageY), bottom);
-
         let { point } = this[_dragging];
         if (this.transformMode) {
           this._handleTransformMove(pageX, pageY);
         } else if (this.shapeType === "polygon") {
           this._handlePolygonMove(pageX, pageY);
         } else if (this.shapeType === "circle") {
           this._handleCircleMove(point, pageX, pageY);
         } else if (this.shapeType === "ellipse") {