Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Adam Comella committed Jul 22, 2015
1 parent 0d4f090 commit fdada16
Show file tree
Hide file tree
Showing 35 changed files with 148 additions and 98 deletions.
4 changes: 3 additions & 1 deletion .jscsrc
View file
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -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",
Expand Down
27 changes: 14 additions & 13 deletions src/js/WinJS/Animations.js
View file
Expand Up @@ -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"];
Expand Down Expand Up @@ -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;
};
}

Expand All @@ -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]);
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
Expand Down Expand Up @@ -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)" });
Expand Down Expand Up @@ -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 {
Expand All @@ -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++) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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 = [];
Expand Down
2 changes: 1 addition & 1 deletion src/js/WinJS/Animations/_TransitionAnimation.js
View file
Expand Up @@ -38,7 +38,7 @@ define([
}

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

function copyWithEvaluation(iElem, elem) {
Expand Down
2 changes: 1 addition & 1 deletion src/js/WinJS/Controls/AutoSuggestBox.js
View file
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/js/WinJS/Controls/CommandingSurface/_CommandingSurface.ts
View file
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/js/WinJS/Controls/FlipView.js
View file
Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/js/WinJS/Controls/FlipView/_PageManager.js
View file
Expand Up @@ -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();
}
}
Expand All @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions src/js/WinJS/Controls/Flyout.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/js/WinJS/Controls/Flyout/_Overlay.js
View file
Expand Up @@ -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);
},

Expand Down Expand Up @@ -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";
Expand Down
6 changes: 3 additions & 3 deletions src/js/WinJS/Controls/Hub.js
View file
Expand Up @@ -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;
Expand All @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/js/WinJS/Controls/ItemContainer.js
View file
Expand Up @@ -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;
},
Expand All @@ -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();
},

Expand Down
2 changes: 1 addition & 1 deletion src/js/WinJS/Controls/ListView.js
View file
Expand Up @@ -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;
},
Expand Down
2 changes: 1 addition & 1 deletion src/js/WinJS/Controls/ListView/_BrowseMode.js
View file
Expand Up @@ -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"]),
Expand Down
2 changes: 1 addition & 1 deletion src/js/WinJS/Controls/ListView/_Layouts.js
View file
Expand Up @@ -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
Expand Down

0 comments on commit fdada16

Please sign in to comment.