[DevTools] Replace usages of document with custom functions.

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.
@@ skipping 19 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  * @param {!WebInspector.ComputedStyleSidebarPane} computedStylePane
  * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCallback
  */
 WebInspector.StylesSidebarPane = function(computedStylePane, setPseudoClassCallback)
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles"));
 
-    this._elementStateButton = document.createElement("button");
+    this._elementStateButton = createElement("button");
     this._elementStateButton.className = "pane-title-button element-state";
     this._elementStateButton.title = WebInspector.UIString("Toggle Element State");
     this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false);
     this.titleElement.appendChild(this._elementStateButton);
 
-    var addButton = document.createElement("button");
+    var addButton = createElement("button");
     addButton.className = "pane-title-button add";
     addButton.id = "add-style-button-test-id";
     addButton.title = WebInspector.UIString("New Style Rule");
     addButton.addEventListener("click", this._createNewRuleInViaInspectorStyleSheet.bind(this), false);
     this.titleElement.appendChild(addButton);
     addButton.createChild("div", "long-click-glyph fill");
 
     this._addButtonLongClickController = new WebInspector.LongClickController(addButton);
     this._addButtonLongClickController.addEventListener(WebInspector.LongClickController.Events.LongClick, this._onAddButtonLongClick.bind(this));
     this._addButtonLongClickController.enable();
 
     this._computedStylePane = computedStylePane;
     computedStylePane.setHostingPane(this);
     this._setPseudoClassCallback = setPseudoClassCallback;
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
     WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
 
     this._createElementStatePane();
     this.bodyElement.appendChild(this._elementStatePane);
-    this._sectionsContainer = document.createElement("div");
+    this._sectionsContainer = createElement("div");
     this.bodyElement.appendChild(this._sectionsContainer);
 
     this._spectrumHelper = new WebInspector.SpectrumPopupHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.classList.toggle("show-user-styles", WebInspector.settings.showUserAgentStyles.get());
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     document.body.addEventListener("keydown", this._keyDown.bind(this), false);
     document.body.addEventListener("keyup", this._keyUp.bind(this), false);
@@ skipping 18 matching lines @@
     SelectorEditingStarted: "SelectorEditingStarted",
     SelectorEditingEnded: "SelectorEditingEnded"
 };
 
 /**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
 {
-    var exclamationElement = document.createElement("div");
+    var exclamationElement = createElement("div");
     exclamationElement.className = "exclamation-mark" + (WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property) ? "" : " warning-icon-small");
     exclamationElement.title = WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet()[property.name.toLowerCase()] ? WebInspector.UIString("Invalid property value.") : WebInspector.UIString("Unknown property name.");
     return exclamationElement;
 }
 
 /**
  * @param {!WebInspector.Color} color
  */
 WebInspector.StylesSidebarPane._colorFormat = function(color)
 {
@@ skipping 689 matching lines @@
      * @param {!Object.<string, boolean>} usedProperties
      * @param {?Element} anchorElement
      */
     _rebuildSectionsForStyleRules: function(styleRules, usedProperties, anchorElement)
     {
         // Make a property section for each style rule.
         var sections = [];
         for (var i = 0; i < styleRules.length; ++i) {
             var styleRule = styleRules[i];
             if (styleRule.isStyleSeparator) {
-                var separatorElement = document.createElement("div");
+                var separatorElement = createElement("div");
                 if (styleRule.isPlaceholder) {
                     separatorElement.className = "styles-sidebar-placeholder";
                     this._sectionsContainer.insertBefore(separatorElement, anchorElement);
                     continue;
                 }
                 separatorElement.className = "sidebar-separator";
                 if (styleRule.node) {
                     var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(styleRule.node);
                     separatorElement.createTextChild(WebInspector.UIString("Inherited from") + " ");
                     separatorElement.appendChild(link);
@@ skipping 121 matching lines @@
 
         var buttonToggled = !this._elementStateButton.classList.contains("toggled");
         if (buttonToggled)
             this.expand();
         this._elementStateButton.classList.toggle("toggled", buttonToggled);
         this._elementStatePane.classList.toggle("expanded", buttonToggled);
     },
 
     _createElementStatePane: function()
     {
-        this._elementStatePane = document.createElement("div");
+        this._elementStatePane = createElement("div");
         this._elementStatePane.className = "styles-element-state-pane source-code";
-        var table = document.createElement("table");
+        var table = createElement("table");
 
         var inputs = [];
         this._elementStatePane.inputs = inputs;
 
         /**
          * @param {!Event} event
          * @this {WebInspector.StylesSidebarPane}
          */
         function clickListener(event)
         {
             var node = this._validateNode();
             if (!node)
                 return;
             this._setPseudoClassCallback(node, event.target.state, event.target.checked);
         }
 
         /**
          * @param {string} state
          * @return {!Element}
          * @this {WebInspector.StylesSidebarPane}
          */
         function createCheckbox(state)
         {
-            var td = document.createElement("td");
-            var label = document.createElement("label");
-            var input = document.createElement("input");
+            var td = createElement("td");
+            var label = createElement("label");
+            var input = createElement("input");
             input.type = "checkbox";
             input.state = state;
             input.addEventListener("click", clickListener.bind(this), false);
             inputs.push(input);
             label.appendChild(input);
             label.createTextChild(":" + state);
             td.appendChild(label);
             return td;
         }
 
@@ skipping 16 matching lines @@
         return this._filterRegex;
     },
 
     /**
      * @param {boolean} isComputedStyleFilter
      * @return {!Element}
      * @param {function(?RegExp)} filterCallback
      */
     _createPropertyFilterElement: function(isComputedStyleFilter, filterCallback)
     {
-        var input = document.createElement("input");
+        var input = createElement("input");
         input.type = "text";
         input.placeholder = isComputedStyleFilter ? WebInspector.UIString("Filter") : WebInspector.UIString("Find in Styles");
         var boundSearchHandler = searchHandler.bind(this);
 
         /**
          * @this {WebInspector.StylesSidebarPane}
          */
         function searchHandler()
         {
             var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
@@ skipping 170 matching lines @@
     this.styleRule = styleRule;
     this.rule = this.styleRule.rule;
     this.editable = editable;
     this.isInherited = isInherited;
 
     var extraClasses = (this.rule && (this.rule.isUser || this.rule.isUserAgent) ? " user-rule" : "");
     this.element.className = "styles-section matched-styles monospace" + extraClasses;
     // We don't really use properties' disclosure.
     this.propertiesElement.classList.remove("properties-tree");
 
-    var selectorContainer = document.createElement("div");
-    this._selectorElement = document.createElement("span");
+    var selectorContainer = createElement("div");
+    this._selectorElement = createElement("span");
     this._selectorElement.textContent = styleRule.selectorText;
     selectorContainer.appendChild(this._selectorElement);
 
-    var openBrace = document.createElement("span");
+    var openBrace = createElement("span");
     openBrace.textContent = " {";
     selectorContainer.appendChild(openBrace);
     selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
 
-    var closeBrace = document.createElement("div");
+    var closeBrace = createElement("div");
     closeBrace.textContent = "}";
     this.element.appendChild(closeBrace);
 
     if (this.editable && this.rule) {
         var newRuleButton = closeBrace.createChild("div", "sidebar-pane-button-new-rule");
         newRuleButton.title = WebInspector.UIString("Insert Style Rule");
         newRuleButton.addEventListener("click", this._onNewRuleClick.bind(this), false);
     }
 
     this._selectorElement.addEventListener("click", this._handleSelectorClick.bind(this), false);
     this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
     this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this), false);
 
     if (this.rule) {
         // Prevent editing the user agent and user rules.
         if (this.rule.isUserAgent || this.rule.isUser)
             this.editable = false;
         else {
             // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
             if (this.rule.styleSheetId)
                 this.navigable = !!this.rule.resourceURL();
         }
         this.titleElement.classList.add("styles-selector");
     }
 
     this._usedProperties = styleRule.usedProperties;
 
-    this._selectorRefElement = document.createElement("div");
+    this._selectorRefElement = createElement("div");
     this._selectorRefElement.className = "subtitle";
     this._mediaListElement = this.titleElement.createChild("div", "media-list");
     this._updateMediaList();
     this._updateRuleOrigin();
     selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild);
     this.titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (isInherited)
         this.element.classList.add("styles-show-inherited"); // This one is related to inherited rules, not computed style.
@@ skipping 290 matching lines @@
             return;
 
         var matchingSelectors = rule.matchingSelectors;
         // .selector is rendered as non-affecting selector by default.
         if (this.noAffect || matchingSelectors)
             this._selectorElement.className = "selector";
         if (!matchingSelectors)
             return;
 
         var selectors = rule.selectors;
-        var fragment = document.createDocumentFragment();
+        var fragment = createDocumentFragment();
         var currentMatch = 0;
         for (var i = 0; i < selectors.length ; ++i) {
             if (i)
                 fragment.createTextChild(", ");
             var isSelectorMatching = matchingSelectors[currentMatch] === i;
             if (isSelectorMatching)
                 ++currentMatch;
             var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
-            var selectorElement = document.createElement("span");
+            var selectorElement = createElement("span");
             selectorElement.className = "simple-selector" + matchingSelectorClass;
             if (rule.styleSheetId)
                 selectorElement._selectorIndex = i;
             selectorElement.textContent = selectors[i].value;
 
             fragment.appendChild(selectorElement);
         }
 
         this._selectorElement.removeChildren();
         this._selectorElement.appendChild(fragment);
@@ skipping 45 matching lines @@
     },
 
     /**
      * @param {?WebInspector.CSSRule} rule
      * @param {!WebInspector.TextRange=} ruleLocation
      * @return {!Node}
      */
     _createRuleOriginNode: function(rule, ruleLocation)
     {
         if (!rule)
-            return document.createTextNode("");
+            return createTextNode("");
 
         if (!ruleLocation) {
             var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
             ruleLocation = rule.selectors[firstMatchingIndex].range;
         }
 
         if (ruleLocation && rule.styleSheetId)
             return this._linkifyRuleLocation(rule.styleSheetId, ruleLocation);
 
         if (rule.isUserAgent)
-            return document.createTextNode(WebInspector.UIString("user agent stylesheet"));
+            return createTextNode(WebInspector.UIString("user agent stylesheet"));
         if (rule.isUser)
-            return document.createTextNode(WebInspector.UIString("user stylesheet"));
+            return createTextNode(WebInspector.UIString("user stylesheet"));
         if (rule.isViaInspector)
-            return document.createTextNode(WebInspector.UIString("via inspector"));
-        return document.createTextNode("");
+            return createTextNode(WebInspector.UIString("via inspector"));
+        return createTextNode("");
     },
 
     /**
      * @param {string} styleSheetId
      * @param {!WebInspector.TextRange} ruleLocation
      * @return {!Node}
      */
     _linkifyRuleLocation: function(styleSheetId, ruleLocation)
     {
         /**
@@ skipping 326 matching lines @@
 
             for (var j = 0; j < section.uniqueProperties.length; ++j) {
                 var property = section.uniqueProperties[j];
                 if (property.disabled)
                     continue;
                 if (section.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name))
                     continue;
 
                 var treeElement = this._propertyTreeElements[property.name.toLowerCase()];
                 if (treeElement) {
-                    var fragment = document.createDocumentFragment();
+                    var fragment = createDocumentFragment();
                     var selector = fragment.createChild("span");
                     selector.style.color = "gray";
                     selector.textContent = section.styleRule.selectorText;
                     fragment.createTextChild(" - " + property.value + " ");
                     var subtitle = fragment.createChild("span");
                     subtitle.style.float = "right";
                     subtitle.appendChild(section._createRuleOriginNode(section.rule));
                     var childElement = new TreeElement(fragment, null, false);
                     treeElement.appendChild(childElement);
                     if (property.inactive || section.isPropertyOverloaded(property.name))
@@ skipping 284 matching lines @@
     {
         this.updateTitle();
     },
 
     updateTitle: function()
     {
         var value = this.value;
 
         this.updateState();
 
-        var nameElement = document.createElement("span");
+        var nameElement = createElement("span");
         nameElement.className = "webkit-css-property";
         nameElement.textContent = this.name;
         nameElement.title = this.property.propertyText;
         this.nameElement = nameElement;
 
-        this._expandElement = document.createElement("span");
+        this._expandElement = createElement("span");
         this._expandElement.className = "expand-element";
 
-        var valueElement = document.createElement("span");
+        var valueElement = createElement("span");
         valueElement.className = "value";
         this.valueElement = valueElement;
 
         /**
          * @param {!RegExp} regex
          * @param {function(string):!Node} processor
          * @param {?function(string):!Node} nextProcessor
          * @param {string} valueText
          * @return {!DocumentFragment}
          */
         function processValue(regex, processor, nextProcessor, valueText)
         {
-            var container = document.createDocumentFragment();
+            var container = createDocumentFragment();
 
             var items = valueText.replace(regex, "\0$1\0").split("\0");
             for (var i = 0; i < items.length; ++i) {
                 if ((i % 2) === 0) {
                     if (nextProcessor)
                         container.appendChild(nextProcessor(items[i]));
                     else
                         container.createTextChild(items[i]);
                 } else {
                     var processedNode = processor(items[i]);
                     if (processedNode)
                         container.appendChild(processedNode);
                 }
             }
 
             return container;
         }
 
         /**
          * @param {string} url
          * @return {!Node}
          * @this {WebInspector.StylePropertyTreeElementBase}
          */
         function linkifyURL(url)
         {
             var hrefUrl = url;
             var match = hrefUrl.match(/['"]?([^'"]+)/);
             if (match)
                 hrefUrl = match[1];
-            var container = document.createDocumentFragment();
+            var container = createDocumentFragment();
             container.createTextChild("url(");
             if (this._styleRule.rule && this._styleRule.rule.resourceURL())
                 hrefUrl = WebInspector.ParsedURL.completeURL(this._styleRule.rule.resourceURL(), hrefUrl);
             else if (this.node())
                 hrefUrl = this.node().resolveURL(hrefUrl);
             var hasResource = hrefUrl && !!WebInspector.resourceForURL(hrefUrl);
             // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
             container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl || url, url, undefined, !hasResource));
             container.createTextChild(")");
             return container;
@@ skipping 45 matching lines @@
      * @param {!Element} valueElement
      * @param {string} text
      * @return {!Node}
      */
     _processColor: function(nameElement, valueElement, text)
     {
         var color = WebInspector.Color.parse(text);
 
         // We can be called with valid non-color values of |text| (like 'none' from border style)
         if (!color)
-            return document.createTextNode(text);
+            return createTextNode(text);
 
         var format = WebInspector.StylesSidebarPane._colorFormat(color);
         var spectrumHelper = this.editablePane() && this.editablePane()._spectrumHelper;
         var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null;
 
         var isEditable = !!(this._styleRule && this._styleRule.editable !== false); // |editable| is true by default.
         var colorSwatch = new WebInspector.ColorSwatch(!isEditable);
         colorSwatch.setColorString(text);
         colorSwatch.element.addEventListener("click", swatchClick.bind(this), false);
 
@@ skipping 64 matching lines @@
                 spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, boundSpectrumHidden);
 
                 scrollerElement = colorSwatch.element.enclosingNodeOrSelfWithClass("style-panes-wrapper");
                 if (scrollerElement)
                     scrollerElement.addEventListener("scroll", repositionSpectrum, false);
                 else
                     console.error("Unable to handle color picker scrolling");
             }
         }
 
-        var colorValueElement = document.createElement("span");
+        var colorValueElement = createElement("span");
         if (format === WebInspector.Color.Format.Original)
             colorValueElement.textContent = text;
         else
             colorValueElement.textContent = color.toString(format);
 
         /**
          * @param {string} curFormat
          */
         function nextFormat(curFormat)
         {
@@ skipping 43 matching lines @@
 
         function changeColorDisplay()
         {
             do {
                 format = nextFormat(format);
                 var currentValue = color.toString(format);
             } while (currentValue === colorValueElement.textContent);
             colorValueElement.textContent = currentValue;
         }
 
-        var container = document.createElement("nobr");
+        var container = createElement("nobr");
         container.appendChild(colorSwatch.element);
         container.appendChild(colorValueElement);
         return container;
     },
 
     updateState: function()
     {
         if (!this.listItemElement)
             return;
 
@@ skipping 244 matching lines @@
             delete this._parentPane._mouseDownTreeElementIsName;
             delete this._parentPane._mouseDownTreeElementIsValue;
         }
     },
 
     updateTitle: function()
     {
         WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this);
 
         if (this.parsedOk && this.section() && this.parent.root) {
-            var enabledCheckboxElement = document.createElement("input");
+            var enabledCheckboxElement = createElement("input");
             enabledCheckboxElement.className = "enabled-button";
             enabledCheckboxElement.type = "checkbox";
             enabledCheckboxElement.checked = !this.disabled;
             enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
             this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
         }
     },
 
     _mouseClick: function(event)
     {
@@ skipping 732 matching lines @@
         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
             for (var i = 0; i < results.length; ++i)
                 results[i] = results[i].toUpperCase();
         }
         var selectedIndex = this._cssCompletions.mostUsedOf(results);
         completionsReadyCallback(results, selectedIndex);
     },
 
     __proto__: WebInspector.TextPrompt.prototype
 }