Bug 1312481 - Part 2: Make it possible to load React Virtualized in devtools (including XUL-based tools). r=Honza

This commit is contained in:
Lin Clark 2016-11-03 14:56:00 -04:00
Родитель cf2e15df76
Коммит 19f27e2c99
3 изменённых файлов: 35 добавлений и 14 удалений

14
devtools/client/shared/vendor/REACT_VIRTUALIZED_UPGRADING поставляемый Normal file
Просмотреть файл

@ -0,0 +1,14 @@
"react-virtualized" uses UMD style loading to work in many different environments.
It assumes that "react", "react-addons-shallow-compare", and "react-dom" are all included
separately via require statements. The paths to our installations are different.
If upgrading:
- Define the correct paths for React, etc and replace the require statements for the
module.exports case with the correct paths.
- Replace any references to React.addons.shallowCompare with the webpack module id.
- To support use in XUL documents, replace calls to createElement with
createElementNS("http://www.w3.org/1999/xhtml", but make sure that you aren't replacing
any calls to React.createElement.
- Also required for XUL, replace document.head and document.body with
document.firstElementChild

Просмотреть файл

@ -1 +1,9 @@
module.exports = require("devtools/client/shared/vendor/react").addons.shallowCompare;
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
module.exports = require("devtools/client/shared/vendor/react").addons.shallowCompare;

Просмотреть файл

@ -3,7 +3,6 @@ var REACT_DOM_PATH = "devtools/client/shared/vendor/react-dom";
var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-compare";
!function(root, factory) {
debugger
let React = require(REACT_PATH);
let shallowCompare = require(REACT_SHALLOW_COMPARE);
let ReactDOM = require(REACT_DOM_PATH);
@ -549,7 +548,7 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(22), document = __webpack_require__(12).document, is = isObject(document) && isObject(document.createElement);
module.exports = function(it) {
return is ? document.createElement(it) : {};
return is ? document.createElementNS("http://www.w3.org/1999/xhtml", it) : {};
};
}, /* 27 */
/***/
@ -1460,7 +1459,7 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
}));
});
}
}, animation = !1, animationstring = "animation", keyframeprefix = "", animationstartevent = "animationstart", domPrefixes = "Webkit Moz O ms".split(" "), startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "), pfx = "", elm = document.createElement("fakeelement");
}, animation = !1, animationstring = "animation", keyframeprefix = "", animationstartevent = "animationstart", domPrefixes = "Webkit Moz O ms".split(" "), startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "), pfx = "", elm = document.createElementNS("http://www.w3.org/1999/xhtml", "fakeelement");
if (void 0 !== elm.style.animationName && (animation = !0), animation === !1) for (var i = 0; i < domPrefixes.length; i++) if (void 0 !== elm.style[domPrefixes[i] + "AnimationName"]) {
pfx = domPrefixes[i], animationstring = pfx + "Animation", keyframeprefix = "-" + pfx.toLowerCase() + "-",
animationstartevent = startEvents[i], animation = !0;
@ -1470,13 +1469,13 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
}
var createStyles = function() {
if (!stylesCreated) {
var css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + 'visibility: hidden; opacity: 0; } .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.head || document.getElementsByTagName("head")[0], style = document.createElement("style");
var css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + 'visibility: hidden; opacity: 0; } .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = document.firstElementChild || document.getElementsByTagName("head")[0], style = document.createElementNS("http://www.w3.org/1999/xhtml", "style");
style.type = "text/css", style.styleSheet ? style.styleSheet.cssText = css : style.appendChild(document.createTextNode(css)),
head.appendChild(style), stylesCreated = !0;
}
}, addResizeListener = function(element, fn) {
attachEvent ? element.attachEvent("onresize", fn) : (element.__resizeTriggers__ || ("static" == getComputedStyle(element).position && (element.style.position = "relative"),
createStyles(), element.__resizeLast__ = {}, element.__resizeListeners__ = [], (element.__resizeTriggers__ = document.createElement("div")).className = "resize-triggers",
createStyles(), element.__resizeLast__ = {}, element.__resizeListeners__ = [], (element.__resizeTriggers__ = document.createElementNS("http://www.w3.org/1999/xhtml", "div")).className = "resize-triggers",
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',
element.appendChild(element.__resizeTriggers__), resetTriggers(element), element.addEventListener("scroll", scrollListener, !0),
animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
@ -1611,7 +1610,7 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
key: "_getContainerNode",
value: function(props) {
var container = props.container;
return container ? _reactDom2["default"].findDOMNode("function" == typeof container ? container() : container) : document.body;
return container ? _reactDom2["default"].findDOMNode("function" == typeof container ? container() : container) : document.firstElementChild;
}
}, {
key: "_measureCell",
@ -1630,7 +1629,7 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
}, {
key: "_renderAndMount",
value: function() {
this._div || (this._div = document.createElement("div"), this._div.style.display = "inline-block",
this._div || (this._div = document.createElementNS("http://www.w3.org/1999/xhtml", "div"), this._div.style.display = "inline-block",
this._div.style.position = "absolute", this._div.style.visibility = "hidden", this._div.style.zIndex = -1,
this._updateDivDimensions(this.props), this._containerNode = this._getContainerNode(this.props),
this._containerNode.appendChild(this._div));
@ -2318,10 +2317,10 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
var size, canUseDOM = __webpack_require__(113);
module.exports = function(recalc) {
if ((!size || recalc) && canUseDOM) {
var scrollDiv = document.createElement("div");
var scrollDiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
scrollDiv.style.position = "absolute", scrollDiv.style.top = "-9999px", scrollDiv.style.width = "50px",
scrollDiv.style.height = "50px", scrollDiv.style.overflow = "scroll", document.body.appendChild(scrollDiv),
size = scrollDiv.offsetWidth - scrollDiv.clientWidth, document.body.removeChild(scrollDiv);
scrollDiv.style.height = "50px", scrollDiv.style.overflow = "scroll", document.firstElementChild.appendChild(scrollDiv),
size = scrollDiv.offsetWidth - scrollDiv.clientWidth, document.firstElementChild.removeChild(scrollDiv);
}
return size;
};
@ -4327,7 +4326,7 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
function(module, exports) {
"use strict";
function enablePointerEventsIfDisabled() {
disablePointerEventsTimeoutId && (disablePointerEventsTimeoutId = null, document.body.style.pointerEvents = originalBodyPointerEvents,
disablePointerEventsTimeoutId && (disablePointerEventsTimeoutId = null, document.firstElementChild.style.pointerEvents = originalBodyPointerEvents,
originalBodyPointerEvents = null);
}
function enablePointerEventsAfterDelayCallback() {
@ -4339,8 +4338,8 @@ var REACT_SHALLOW_COMPARE = "devtools/client/shared/vendor/react-addons-shallow-
disablePointerEventsTimeoutId && clearTimeout(disablePointerEventsTimeoutId), disablePointerEventsTimeoutId = setTimeout(enablePointerEventsAfterDelayCallback, IS_SCROLLING_TIMEOUT);
}
function onScrollWindow(event) {
null == originalBodyPointerEvents && (originalBodyPointerEvents = document.body.style.pointerEvents,
document.body.style.pointerEvents = "none", enablePointerEventsAfterDelay()), mountedInstances.forEach(function(component) {
null == originalBodyPointerEvents && (originalBodyPointerEvents = document.firstElementChild.style.pointerEvents,
document.firstElementChild.style.pointerEvents = "none", enablePointerEventsAfterDelay()), mountedInstances.forEach(function(component) {
return component._onScrollWindow(event);
});
}