Permalink
Browse files

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...
rigdern committed Jul 20, 2015
1 parent 0d4f090 commit fdada16d361cbc88a9704e237c5f2bc8bb243b31
Showing with 148 additions and 98 deletions.
  1. +3 −1 .jscsrc
  2. +1 −1 package.json
  3. +14 −13 src/js/WinJS/Animations.js
  4. +1 −1 src/js/WinJS/Animations/_TransitionAnimation.js
  5. +1 −1 src/js/WinJS/Controls/AutoSuggestBox.js
  6. +2 −2 src/js/WinJS/Controls/CommandingSurface/_CommandingSurface.ts
  7. +2 −2 src/js/WinJS/Controls/FlipView.js
  8. +2 −2 src/js/WinJS/Controls/FlipView/_PageManager.js
  9. +3 −3 src/js/WinJS/Controls/Flyout.js
  10. +3 −3 src/js/WinJS/Controls/Flyout/_Overlay.js
  11. +3 −3 src/js/WinJS/Controls/Hub.js
  12. +2 −2 src/js/WinJS/Controls/ItemContainer.js
  13. +1 −1 src/js/WinJS/Controls/ListView.js
  14. +1 −1 src/js/WinJS/Controls/ListView/_BrowseMode.js
  15. +1 −1 src/js/WinJS/Controls/ListView/_Layouts.js
  16. +5 −5 src/js/WinJS/Controls/MediaPlayer.js
  17. +1 −1 src/js/WinJS/Controls/Menu/_Command.js
  18. +9 −9 src/js/WinJS/Controls/NavBar/_Container.js
  19. +5 −5 src/js/WinJS/Controls/Pivot/_Pivot.ts
  20. +10 −10 src/js/WinJS/Controls/Rating.js
  21. +5 −5 src/js/WinJS/Controls/SemanticZoom.js
  22. +1 −1 src/js/WinJS/Controls/SplitView/Command.js
  23. +2 −2 src/js/WinJS/Controls/SplitView/_SplitView.ts
  24. +1 −1 src/js/WinJS/Controls/ToggleSwitch.js
  25. +1 −1 src/js/WinJS/Controls/ToolBar/_ToolBar.ts
  26. +3 −3 src/js/WinJS/Controls/Tooltip.js
  27. +1 −1 src/js/WinJS/Controls/ViewBox.js
  28. +5 −5 src/js/WinJS/Controls/_LegacyAppBar/_Layouts.js
  29. +1 −0 src/js/WinJS/Utilities/_ElementUtilities.d.ts
  30. +9 −7 src/js/WinJS/Utilities/_ElementUtilities.js
  31. +1 −1 src/js/WinJS/Utilities/_KeyboardBehavior.js
  32. +1 −1 src/js/WinJS/Utilities/_TabContainer.js
  33. +1 −1 src/js/WinJS/XYFocus.ts
  34. +3 −2 src/js/WinJS/_Accents.ts
  35. +43 −0 tasks/utilities/disallow-direct-get-computed-style.js
View
@@ -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",
View
@@ -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",
View
@@ -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 = [];
@@ -38,7 +38,7 @@ define([
}
function resolveStyles(elem) {
_Global.getComputedStyle(elem, null).opacity;
_ElementUtilities._getComputedStyle(elem, null).opacity;
}
function copyWithEvaluation(iElem, elem) {
@@ -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);
@@ -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;
}
}
@@ -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;
@@ -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);
@@ -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
@@ -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";
@@ -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.
@@ -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();
},
@@ -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;
},
@@ -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"]),
@@ -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
Oops, something went wrong.

0 comments on commit fdada16

Please sign in to comment.