Moved all getComputedStyle calls to _ElementUtilities._getComputedStyle

Also added a jscs rule to warn us if we try to call getComputedStyle
directly in the future.

.jscsrc

@@ -1,8 +1,10 @@
{
    "additionalRules": [
        "tasks/utilities/disallow-direct-pointer-events.js"
        "tasks/utilities/disallow-direct-pointer-events.js",
        "tasks/utilities/disallow-direct-get-computed-style.js"
    ],
    "disallowDirectPointerEvents": true,
    "disallowDirectGetComputedStyle": true,
    "requireCurlyBraces": [
        "if",
        "else",

package.json

@@ -34,7 +34,7 @@
    "grunt-contrib-less": "~0.11.4",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-contrib-uglify": "^0.5.1",
    "grunt-jscs": "^0.6.2",
    "grunt-jscs": "^1.8.0",
    "grunt-replace": "~0.7.8",
    "grunt-saucelabs": "git+https://github.com/xirzec/grunt-saucelabs.git#debug",
    "grunt-shell": "~0.7.0",

src/js/WinJS/Animations.js

@@ -5,10 +5,11 @@ define([
    './Core/_Base',
    './Core/_BaseUtils',
    './Core/_WriteProfilerMark',
    './Utilities/_ElementUtilities',
    './Animations/_Constants',
    './Animations/_TransitionAnimation',
    './Promise'
], function animationsInit(exports, _Global, _Base, _BaseUtils, _WriteProfilerMark, _Constants, _TransitionAnimation, Promise) {
], function animationsInit(exports, _Global, _Base, _BaseUtils, _WriteProfilerMark, _ElementUtilities, _Constants, _TransitionAnimation, Promise) {
    "use strict";

    var transformNames = _BaseUtils._browserStyleEquivalents["transform"];
@@ -72,7 +73,7 @@ define([
    function keyframeCallback(keyframe) {
        var keyframeRtl = keyframe + "-rtl";
        return function (i, elem) {
            return _Global.getComputedStyle(elem).direction === "ltr" ? keyframe : keyframeRtl;
            return _ElementUtilities._getComputedStyle(elem).direction === "ltr" ? keyframe : keyframeRtl;
        };
    }

@@ -93,7 +94,7 @@ define([
                top: elemArray[i].offsetTop,
                left: elemArray[i].offsetLeft
            };
            var matrix = _Global.getComputedStyle(elemArray[i], null)[transformNames.scriptName].split(",");
            var matrix = _ElementUtilities._getComputedStyle(elemArray[i], null)[transformNames.scriptName].split(",");
            if (matrix.length === 6) {
                offset.left += parseFloat(matrix[4]);
                offset.top += parseFloat(matrix[5]);
@@ -195,7 +196,7 @@ define([
        elemArray = makeArray(elemArray);
        origins = makeArray(origins);
        for (var i = 0, len = elemArray.length; i < len; i++) {
            var rtl = _Global.getComputedStyle(elemArray[i]).direction === "rtl";
            var rtl = _ElementUtilities._getComputedStyle(elemArray[i]).direction === "rtl";
            elemArray[i].style[_BaseUtils._browserStyleEquivalents["transform-origin"].scriptName] = origins[Math.min(origins.length - 1, i)][rtl ? "rtl" : "ltr"];
        }
        function onComplete() {
@@ -217,7 +218,7 @@ define([
        return function (i, elem) {
            var offset = offsetArray.getOffset(i);
            var left = offset.left;
            if (offset.rtlflip && _Global.getComputedStyle(elem).direction === "rtl") {
            if (offset.rtlflip && _ElementUtilities._getComputedStyle(elem).direction === "rtl") {
                left = left.toString();
                if (left.charAt(0) === "-") {
                    left = left.substring(1);
@@ -724,8 +725,8 @@ define([
        element.style[transformNames.scriptName] = translate + "(" + -start + "px)";

        // Resolve styles
        _Global.getComputedStyle(elementClipper).opacity;
        _Global.getComputedStyle(element).opacity;
        _ElementUtilities._getComputedStyle(elementClipper).opacity;
        _ElementUtilities._getComputedStyle(element).opacity;

        // Merge the transitions, but don't animate yet
        var clipperTransition = _BaseUtils._merge(transition, { to: translate + "(" + end + "px)" });
@@ -2715,7 +2716,7 @@ define([
            // and the actionArea that would appear were we to start these animations at separate times
            if (menuPositionedAbove) {
                actionArea.style[transformNames.scriptName] = "translateY(" + deltaHeight + "px)";
                _Global.getComputedStyle(actionArea).opacity;
                _ElementUtilities._getComputedStyle(actionArea).opacity;
                var transition = _BaseUtils._merge(transitionToUse, { to: "translateY(0px)" });
                actionAreaAnimations.push({ element: actionArea, transition: transition });
            } else {
@@ -2739,8 +2740,8 @@ define([
            overflowArea.style[transformNames.scriptName] = "translateY(" + (menuPositionedAbove ? overflowAreaHeight : -overflowAreaHeight) + "px)";

            // Resolve styles on the overflowArea and overflowAreaClipper to prepare them for animation
            _Global.getComputedStyle(overflowAreaClipper).opacity;
            _Global.getComputedStyle(overflowArea).opacity;
            _ElementUtilities._getComputedStyle(overflowAreaClipper).opacity;
            _ElementUtilities._getComputedStyle(overflowArea).opacity;

            var animationPromises = [];
            for (var i = 0, len = actionAreaAnimations.length; i < len; i++) {
@@ -2770,7 +2771,7 @@ define([
            var transitionToUse = getResizeDefaultTransitions().defaultResizeShrinkTransition;
            if (menuPositionedAbove) {
                actionArea.style[transformNames.scriptName] = "translateY(0px)";
                _Global.getComputedStyle(actionArea).opacity;
                _ElementUtilities._getComputedStyle(actionArea).opacity;
                var transition = _BaseUtils._merge(transitionToUse, { to: "translateY(" + -deltaHeight + "px)" });
                actionAreaAnimations.push({ element: actionArea, transition: transition });
            } else {
@@ -2787,8 +2788,8 @@ define([
            overflowArea.style[transformNames.scriptName] = "translateY(0px)";

            // Resolve styles on the overflowArea and overflowAreaClipper to prepare them for animation
            _Global.getComputedStyle(overflowAreaClipper).opacity;
            _Global.getComputedStyle(overflowArea).opacity;
            _ElementUtilities._getComputedStyle(overflowAreaClipper).opacity;
            _ElementUtilities._getComputedStyle(overflowArea).opacity;

            // Now that everything's set up, we can kick off all the animations in unision
            var animationPromises = [];

src/js/WinJS/Animations/_TransitionAnimation.js

@@ -38,7 +38,7 @@ define([
    }

    function resolveStyles(elem) {
        _Global.getComputedStyle(elem, null).opacity;
        _ElementUtilities._getComputedStyle(elem, null).opacity;
    }

    function copyWithEvaluation(iElem, elem) {

src/js/WinJS/Controls/AutoSuggestBox.js

@@ -417,7 +417,7 @@ define([

                    // Align left vs right edge
                    var alignRight;
                    if (_Global.getComputedStyle(this._flyoutElement).direction === "rtl") {
                    if (_ElementUtilities._getComputedStyle(this._flyoutElement).direction === "rtl") {
                        // RTL: Align to the right edge if there is enough space to the left of the control's
                        // right edge, or if there is not enough space to fit the flyout aligned to either edge.
                        alignRight = ((inputRect.right - flyoutRect.width) >= 0) || ((inputRect.left + flyoutRect.width) > documentClientWidth);

src/js/WinJS/Controls/CommandingSurface/_CommandingSurface.ts

@@ -315,7 +315,7 @@ export class _CommandingSurface {

        // Exit the Init state.
        _ElementUtilities._inDom(this._dom.root).then(() => {
            this._rtl = _Global.getComputedStyle(this._dom.root).direction === 'rtl';
            this._rtl = _ElementUtilities._getComputedStyle(this._dom.root).direction === 'rtl';
            if (!options.openCloseMachine) {
                // We should only call exitInit on the machine when we own the machine.
                this._machine.exitInit();
@@ -656,7 +656,7 @@ export class _CommandingSurface {
            } else {
                // e.g. the overflow button
                focusable = element.style.display !== "none" &&
                getComputedStyle(element).visibility !== "hidden" &&
                _ElementUtilities._getComputedStyle(element).visibility !== "hidden" &&
                element.tabIndex >= 0;
            }
        }

src/js/WinJS/Controls/FlipView.js

@@ -81,7 +81,7 @@ define([
                    }
                    })) {
                        that._cachedStyleDir = that._flipviewDiv.style.direction;
                        that._rtl = _Global.getComputedStyle(that._flipviewDiv, null).direction === "rtl";
                        that._rtl = _ElementUtilities._getComputedStyle(that._flipviewDiv, null).direction === "rtl";
                        that._setupOrientation();
                    }
                }
@@ -1145,7 +1145,7 @@ define([
                    if (this._isHorizontal) {
                        this._panningDivContainer.style["overflowX"] = (this._environmentSupportsTouch ? "scroll" : "hidden");
                        this._panningDivContainer.style["overflowY"] = "hidden";
                        var rtl = _Global.getComputedStyle(this._flipviewDiv, null).direction === "rtl";
                        var rtl = _ElementUtilities._getComputedStyle(this._flipviewDiv, null).direction === "rtl";
                        this._rtl = rtl;
                        if (rtl) {
                            this._prevButton.className = navButtonClass + " " + navButtonRightClass;

src/js/WinJS/Controls/FlipView/_PageManager.js

@@ -60,7 +60,7 @@ define([
                        }
                        if (dirChanged) {
                            that._cachedStyleDir = element.style.direction;
                            that._pageManager._rtl = _Global.getComputedStyle(that._pageManager._flipperDiv, null).direction === "rtl";
                            that._pageManager._rtl = _ElementUtilities._getComputedStyle(that._pageManager._flipperDiv, null).direction === "rtl";
                            that._pageManager.resized();
                        }
                    }
@@ -75,7 +75,7 @@ define([
                this._panningDivContainer = panningDivContainer;
                this._buttonVisibilityHandler = buttonVisibilityHandler;
                this._currentPage = null;
                this._rtl = _Global.getComputedStyle(this._flipperDiv, null).direction === "rtl";
                this._rtl = _ElementUtilities._getComputedStyle(this._flipperDiv, null).direction === "rtl";
                this._itemsManager = itemsManager;
                this._itemSpacing = itemSpacing;
                this._tabIndex = _ElementUtilities.getTabIndex(flipperDiv);

src/js/WinJS/Controls/Flyout.js

@@ -45,7 +45,7 @@ define([
            var Key = _ElementUtilities.Key;

            function getDimension(element, property) {
                return _ElementUtilities.convertToPixels(element, _Global.getComputedStyle(element, null)[property]);
                return _ElementUtilities.convertToPixels(element, _ElementUtilities._getComputedStyle(element, null)[property]);
            }

            function measureElement(element) {
@@ -375,7 +375,7 @@ define([
                    }
                },
                _handleKeyDownInCascade: function _CascadeManager_handleKeyDownInCascade(event) {
                    var rtl = _Global.getComputedStyle(event.target).direction === "rtl",
                    var rtl = _ElementUtilities._getComputedStyle(event.target).direction === "rtl",
                        leftKey = rtl ? Key.rightArrow : Key.leftArrow,
                        target = event.target;

@@ -1105,7 +1105,7 @@ define([

                    // Set up the new position, and prep the offset for showPopup.
                    var flyoutMeasurements = measureElement(this._element);
                    var isRtl = _Global.getComputedStyle(this._element).direction === "rtl";
                    var isRtl = _ElementUtilities._getComputedStyle(this._element).direction === "rtl";
                    this._currentPosition = this._positionRequest.getTopLeft(flyoutMeasurements, isRtl);

                    // Adjust position

src/js/WinJS/Controls/Flyout/_Overlay.js

@@ -528,14 +528,14 @@ define([
                    this._element.style.opacity = 0;
                    this._element.style.visibility = "visible";
                    // touch opacity so that IE fades from the 0 we just set to 1
                    _Global.getComputedStyle(this._element, null).opacity;
                    _ElementUtilities._getComputedStyle(this._element, null).opacity;
                    return Animations.fadeIn(this._element);
                },

                _baseAnimateOut: function _Overlay_baseAnimateOut() {
                    this._element.style.opacity = 1;
                    // touch opacity so that IE fades from the 1 we just set to 0
                    _Global.getComputedStyle(this._element, null).opacity;
                    _ElementUtilities._getComputedStyle(this._element, null).opacity;
                    return Animations.fadeOut(this._element);
                },

@@ -764,7 +764,7 @@ define([
                    for (var count = 0, len = hideCommands.length; count < len; count++) {
                        // Need to fix our position
                        var rectangle = hideCommands[count].getBoundingClientRect(),
                            style = _Global.getComputedStyle(hideCommands[count]);
                            style = _ElementUtilities._getComputedStyle(hideCommands[count]);

                        // Use the bounding box, adjusting for margins
                        hideCommands[count].style.top = (rectangle.top - parseFloat(style.marginTop)) + "px";

src/js/WinJS/Controls/Hub.js

@@ -949,7 +949,7 @@ define([
                        this._writeProfilerMark("measure,StartTM");
                        this._measured = true;

                        this._rtl = _Global.getComputedStyle(this._element, null).direction === "rtl";
                        this._rtl = _ElementUtilities._getComputedStyle(this._element, null).direction === "rtl";

                        if (this.orientation === _UI.Orientation.vertical) {
                            this._names = verticalNames;
@@ -966,14 +966,14 @@ define([
                        this._scrollPosition = _ElementUtilities.getScrollPosition(this._viewportElement)[this._names.scrollPos];
                        this._scrollLength = this._viewportElement[this._names.scrollSize];

                        var surfaceElementComputedStyle = _Global.getComputedStyle(this._surfaceElement);
                        var surfaceElementComputedStyle = _ElementUtilities._getComputedStyle(this._surfaceElement);
                        this._startSpacer = parseFloat(surfaceElementComputedStyle[this._names.marginStart]) + parseFloat(surfaceElementComputedStyle[this._names.borderStart]) + parseFloat(surfaceElementComputedStyle[this._names.paddingStart]);
                        this._endSpacer = parseFloat(surfaceElementComputedStyle[this._names.marginEnd]) + parseFloat(surfaceElementComputedStyle[this._names.borderEnd]) + parseFloat(surfaceElementComputedStyle[this._names.paddingEnd]);

                        this._sectionSizes = [];
                        for (var i = 0; i < this.sections.length; i++) {
                            var section = this.sections.getAt(i);
                            var computedSectionStyle = _Global.getComputedStyle(section.element);
                            var computedSectionStyle = _ElementUtilities._getComputedStyle(section.element);
                            this._sectionSizes[i] = {
                                offset: section.element[this._names.offsetPos],
                                // Reminder: offsetWidth doesn't include margins and also rounds.

src/js/WinJS/Controls/ItemContainer.js

@@ -542,7 +542,7 @@ define([

                _rtl: function ItemContainer_rtl() {
                    if (typeof this._cachedRTL !== "boolean") {
                        this._cachedRTL = _Global.getComputedStyle(this.element, null).direction === "rtl";
                        this._cachedRTL = _ElementUtilities._getComputedStyle(this.element, null).direction === "rtl";
                    }
                    return this._cachedRTL;
                },
@@ -552,7 +552,7 @@ define([
                },

                _forceLayout: function ItemContainer_forceLayout() {
                    this._cachedRTL = _Global.getComputedStyle(this.element, null).direction === "rtl";
                    this._cachedRTL = _ElementUtilities._getComputedStyle(this.element, null).direction === "rtl";
                    this._setDirectionClass();
                },

src/js/WinJS/Controls/ListView.js

@@ -3190,7 +3190,7 @@ define([

                _rtl: function ListView_rtl() {
                    if (typeof this._cachedRTL !== "boolean") {
                        this._cachedRTL = _Global.getComputedStyle(this._element, null).direction === "rtl";
                        this._cachedRTL = _ElementUtilities._getComputedStyle(this._element, null).direction === "rtl";
                    }
                    return this._cachedRTL;
                },

src/js/WinJS/Controls/ListView/_BrowseMode.js

@@ -725,7 +725,7 @@ define([
                    }
                    catch (err) { }

                    var computedStyle = _Global.getComputedStyle(element, null),
                    var computedStyle = _ElementUtilities._getComputedStyle(element, null),
                        paddingLeft = parseInt(computedStyle["paddingLeft"]),
                        paddingTop = parseInt(computedStyle["paddingTop"]),
                        borderLeft = parseInt(computedStyle["borderLeftWidth"]),

src/js/WinJS/Controls/ListView/_Layouts.js

@@ -107,7 +107,7 @@ define([
    }

    function getDimension(element, property) {
        return _ElementUtilities.convertToPixels(element, _Global.getComputedStyle(element, null)[property]);
        return _ElementUtilities.convertToPixels(element, _ElementUtilities._getComputedStyle(element, null)[property]);
    }

    // Returns the sum of the margin, border, and padding for the side of the