Bug 1207627 - Remove the markup-view preview feature; r=bgrins

--HG--
extra : commitid : 2K5YSkS20me
extra : rebase_source : 0c265be50268d3498fefe1e308d1d5634876a2cd

browser/app/profile/firefox.js

@@ -1367,8 +1367,6 @@ pref("devtools.command-button-rulers.enabled", false);
 pref("devtools.inspector.enabled", true);
 // What was the last active sidebar in the inspector
 pref("devtools.inspector.activeSidebar", "ruleview");
-// Enable the markup preview
-pref("devtools.inspector.markupPreview", false);
 pref("devtools.inspector.remote", false);
 // Collapse pseudo-elements by default in the rule-view
 pref("devtools.inspector.show_pseudo_elements", false);

devtools/client/markupview/markup-view.js

@@ -8,7 +8,6 @@ const {Cc, Cu, Ci} = require("chrome");
 
 // Page size for pageup/pagedown
 const PAGE_SIZE = 10;
-const PREVIEW_AREA = 700;
 const DEFAULT_MAX_CHILDREN = 100;
 const COLLAPSE_ATTRIBUTE_LENGTH = 120;
 const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
@@ -122,7 +121,6 @@ function MarkupView(aInspector, aFrame, aControllerWindow) {
 
   this._makeTooltipPersistent = this._makeTooltipPersistent.bind(this);
 
-  this._initPreview();
   this._initTooltips();
   this._initHighlighter();
 
@@ -1576,92 +1574,6 @@ MarkupView.prototype = {
     return this._destroyer;
   },
 
-  /**
-   * Initialize the preview panel.
-   */
-  _initPreview: function() {
-    this._previewEnabled = Services.prefs.getBoolPref("devtools.inspector.markupPreview");
-    if (!this._previewEnabled) {
-      return;
-    }
-
-    this._previewBar = this.doc.querySelector("#previewbar");
-    this._preview = this.doc.querySelector("#preview");
-    this._viewbox = this.doc.querySelector("#viewbox");
-
-    this._previewBar.classList.remove("disabled");
-
-    this._previewWidth = this._preview.getBoundingClientRect().width;
-
-    this._boundResizePreview = this._resizePreview.bind(this);
-    this._frame.contentWindow.addEventListener("resize",
-      this._boundResizePreview, true);
-    this._frame.contentWindow.addEventListener("overflow",
-      this._boundResizePreview, true);
-    this._frame.contentWindow.addEventListener("underflow",
-      this._boundResizePreview, true);
-
-    this._boundUpdatePreview = this._updatePreview.bind(this);
-    this._frame.contentWindow.addEventListener("scroll",
-      this._boundUpdatePreview, true);
-    this._updatePreview();
-  },
-
-  /**
-   * Move the preview viewbox.
-   */
-  _updatePreview: function() {
-    if (!this._previewEnabled) {
-      return;
-    }
-    let win = this._frame.contentWindow;
-
-    if (win.scrollMaxY == 0) {
-      this._previewBar.classList.add("disabled");
-      return;
-    }
-
-    this._previewBar.classList.remove("disabled");
-
-    let ratio = this._previewWidth / PREVIEW_AREA;
-    let width = ratio * win.innerWidth;
-
-    let height = ratio * (win.scrollMaxY + win.innerHeight);
-    let scrollTo
-    if (height >= win.innerHeight) {
-      scrollTo = -(height - win.innerHeight) * (win.scrollY / win.scrollMaxY);
-      this._previewBar.setAttribute("style", "height:" + height +
-        "px;transform:translateY(" + scrollTo + "px)");
-    } else {
-      this._previewBar.setAttribute("style", "height:100%");
-    }
-
-    let bgSize = ~~width + "px " + ~~height + "px";
-    this._preview.setAttribute("style", "background-size:" + bgSize);
-
-    height = ~~(win.innerHeight * ratio) + "px";
-    let top = ~~(win.scrollY * ratio) + "px";
-    this._viewbox.setAttribute("style", "height:" + height +
-      ";transform: translateY(" + top + ")");
-  },
-
-  /**
-   * Hide the preview while resizing, to avoid slowness.
-   */
-  _resizePreview: function() {
-    if (!this._previewEnabled) {
-      return;
-    }
-    let win = this._frame.contentWindow;
-    this._previewBar.classList.add("hide");
-    clearTimeout(this._resizePreviewTimeout);
-
-    setTimeout(() => {
-      this._updatePreview();
-      this._previewBar.classList.remove("hide");
-    }, 1000);
-  },
-
   /**
    * Takes an element as it's only argument and marks the element
    * as the drop target

devtools/client/markupview/markup-view.xhtml

@@ -97,9 +97,5 @@
  --></span>
 
   </div>
-  <div id="previewbar" class="disabled">
-     <div id="preview"/>
-     <div id="viewbox"/>
-  </div>
 </body>
 </html>

devtools/client/themes/markup-view.css

@@ -52,49 +52,6 @@
   padding-left: 2px;
 }
 
-/* Preview */
-
-#previewbar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 90px;
-  background: black;
-  border-left: 1px solid;
-  border-bottom: 1px solid;
-  overflow: hidden;
-}
-
-#previewbar {
-  background: var(--theme-tab-toolbar-background);
-  border-color: var(--theme-splitter-color);
-}
-
-#preview {
-  position: absolute;
-  top: 0;
-  right: 5px;
-  width: 80px;
-  height: 100%;
-  background-image: -moz-element(#root);
-  background-repeat: no-repeat;
-}
-
-#previewbar.hide,
-#previewbar.disabled {
-  display: none;
-}
-
-#viewbox {
-  position: absolute;
-  top: 0;
-  right: 5px;
-  width: 80px;
-  border: 1px dashed #888;
-  background: rgba(205,205,255,0.2);
-  outline: 1px solid transparent;
-}
-
 /* Events */
 .markupview-events {
   font-size: 8px;