[DevTools] Replace usages of document with custom functions.

Source/devtools/front_end/elements/MetricsSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 174 matching lines @@
                 element.style.backgroundColor = "";
         }
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      */
     _updateMetrics: function(style)
     {
         // Updating with computed style.
-        var metricsElement = document.createElement("div");
+        var metricsElement = createElement("div");
         metricsElement.className = "metrics";
         var self = this;
 
         /**
          * @param {!WebInspector.CSSStyleDeclaration} style
          * @param {string} name
          * @param {string} side
          * @param {string} suffix
          * @this {WebInspector.MetricsSidebarPane}
          */
         function createBoxPartElement(style, name, side, suffix)
         {
             var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
             var value = style.getPropertyValue(propertyName);
             if (value === "" || (name !== "position" && value === "0px"))
                 value = "\u2012";
             else if (name === "position" && value === "auto")
                 value = "\u2012";
             value = value.replace(/px$/, "");
             value = Number.toFixedIfFloating(value);
 
-            var element = document.createElement("div");
+            var element = createElement("div");
             element.className = side;
             element.textContent = value;
             element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName, style), false);
             return element;
         }
 
         function getContentAreaWidthPx(style)
         {
             var width = style.getPropertyValue("width").replace(/px$/, "");
             if (!isNaN(width) && style.getPropertyValue("box-sizing") === "border-box") {
@@ skipping 59 matching lines @@
         for (var i = 0; i < boxes.length; ++i) {
             var name = boxes[i];
 
             if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
                 continue;
             if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
                 continue;
             if (name === "position" && noPositionType[style.getPropertyValue("position")])
                 continue;
 
-            var boxElement = document.createElement("div");
+            var boxElement = createElement("div");
             boxElement.className = name;
             boxElement._backgroundColor = boxColors[i].toString(WebInspector.Color.Format.RGBA);
             boxElement._name = name;
             boxElement.style.backgroundColor = boxElement._backgroundColor;
             boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
             this._boxElements.push(boxElement);
 
             if (name === "content") {
-                var widthElement = document.createElement("span");
+                var widthElement = createElement("span");
                 widthElement.textContent = getContentAreaWidthPx(style);
                 widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width", style), false);
 
-                var heightElement = document.createElement("span");
+                var heightElement = createElement("span");
                 heightElement.textContent = getContentAreaHeightPx(style);
                 heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height", style), false);
 
                 boxElement.appendChild(widthElement);
                 boxElement.createTextChild(" \u00D7 ");
                 boxElement.appendChild(heightElement);
             } else {
                 var suffix = (name === "border" ? "-width" : "");
 
-                var labelElement = document.createElement("div");
+                var labelElement = createElement("div");
                 labelElement.className = "label";
                 labelElement.textContent = boxLabels[i];
                 boxElement.appendChild(labelElement);
 
                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
-                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createElement("br"));
                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
 
                 if (previousBox)
                     boxElement.appendChild(previousBox);
 
                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
-                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createElement("br"));
                 boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
             }
 
             previousBox = boxElement;
         }
 
         metricsElement.appendChild(previousBox);
         metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, "all"), false);
         this.bodyElement.removeChildren();
         this.bodyElement.appendChild(metricsElement);
@@ skipping 145 matching lines @@
     },
 
     editingCommitted: function(element, userInput, previousContent, context)
     {
         this.editingEnded(element, context);
         this._applyUserInput(element, userInput, previousContent, context, true);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }