Bug 1397563 - Update Debugger Frontend (9/6/2017). r=jdescottes (ca6ad634) · Commits · Tommy Webb / Tor Browser

devtools/client/debugger/new/debugger.css

+51 −45

Original line number	Diff line number	Diff line
		@@ -420,6 +420,10 @@ body {
		--search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
		--popup-shadow-color: #5c667b;
		}
		* {
		box-sizing: border-box;
		}

		.debugger {
		display: flex;
		flex: 1;
		@@ -877,12 +881,6 @@ html .arrow.expanded svg {
		.managed-tree .tree .node.focused {
		color: white;
		background-color: var(--theme-selection-background);
		padding-bottom: 2px;
		}

		.theme-dark .managed-tree .tree .node.focused {
		background-color: var(--theme-selection-background-hover);
		padding-bottom: 2px;
		}

		html:not([dir="rtl"]) .managed-tree .tree .node > div {
		@@ -907,7 +905,7 @@ html[dir="rtl"] .managed-tree .tree .node > div {
		.close-btn .close {
		width: 14px;
		height: 14px;
		transition: all 0.25s ease-in-out;
		transition: all 0.15s ease-in-out;
		border: 1px solid transparent;
		border-radius: 2px;
		padding: 0;
		@@ -1267,15 +1265,16 @@ html[dir="rtl"] .managed-tree .tree .node > div {

		.toggle-search .text {
		margin-left: 1em;
		cursor: default;
		}

		.toggle-search .active {
		color: var(--theme-selection-background);
		cursor: default;
		}
		.sources-panel {
		flex: 1;
		background-color: var(--theme-sidebar-background);
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		@@ -1287,7 +1286,8 @@ html[dir="rtl"] .managed-tree .tree .node > div {
		}

		.sources-header {
		height: 30px;
		height: 29px;
		background-color: var(--theme-toolbar-background);
		border-bottom: 1px solid var(--theme-splitter-color);
		padding-top: 0px;
		padding-bottom: 0px;
		@@ -2236,7 +2236,7 @@ html[dir="rtl"] .arrow svg,
		width: calc(100% - 1.5px);
		top: 30px;
		left: 0px;
		--editor-footer-height: 27px;
		--editor-footer-height: 24px;
		}

		html[dir="rtl"] .editor-mount {
		@@ -2440,24 +2440,8 @@ html[dir="rtl"] .editor-mount {

		.cm-highlight-full::before {
		border: 1px solid var(--theme-comment-alt);
		}

		.cm-highlight-start::before {
		border-left-width: 1px;
		border-left-style: solid;
		border-left-color: var(--theme-comment-alt);
		margin: 0 0 -1px -1px;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
		}

		.cm-highlight-end::before {
		border-right-width: 1px;
		border-right-style: solid;
		border-right-color: var(--theme-comment-alt);
		margin: 0 -1px -1px 0;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
		border-radius: 2px;
		margin: 0 -1px -1px -1px;
		}
		.breakpoints-toggle {
		margin: 2px 3px;
		@@ -2566,7 +2550,7 @@ html .breakpoints-list .breakpoint.paused {
		width: 100%;
		margin: 0px;
		border: 1px;
		background-color: var(--theme-body-background);
		background-color: var(--theme-sidebar-background);
		font-size: 12px;
		padding: 0px 20px;
		color: var(--theme-body-color);
		@@ -2587,7 +2571,7 @@ html .breakpoints-list .breakpoint.paused {
		.expressions-list {
		/* TODO: add normalize */
		margin: 0;
		padding: 0.5em 0;
		padding: 0;
		}
		.expression-input-container {
		padding: 0.5em;
		@@ -2851,18 +2835,29 @@ html .breakpoints-list .breakpoint.paused {
		.event-listeners .listener:hover .close {
		display: block;
		}

		:root {
		--accordion-header-background: var(--theme-toolbar-background);
		}

		:root.theme-dark {
		--accordion-header-background: #141416;
		}

		.accordion {
		background-color: var(--theme-body-background);
		background-color: var(--theme-sidebar-background);
		width: 100%;
		}

		.accordion ._header {
		background-color: var(--theme-toolbar-background);
		background-color: var(--accordion-header-background);
		border-bottom: 1px solid var(--theme-splitter-color);
		display: flex;
		font-size: 12px;
		padding: 5px;
		padding: 4px;
		transition: all 0.25s ease;
		width: 100%;
		height: 24px;
		align-items: center;

		-webkit-user-select: none;
		@@ -2872,10 +2867,6 @@ html .breakpoints-list .breakpoint.paused {
		user-select: none;
		}

		.accordion ._header {
		display: flex;
		}

		.accordion ._header:hover {
		background-color: var(--theme-toolbar-background-hover);
		}
		@@ -2921,15 +2912,15 @@ html .breakpoints-list .breakpoint.paused {
		border: none;
		}
		.command-bar {
		flex: 0 0 30px;
		flex: 0 0 29px;
		border-bottom: 1px solid var(--theme-splitter-color);
		display: flex;
		height: 30px;
		height: 29px;
		overflow: hidden;
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: var(--theme-body-background);
		background-color: var(--theme-toolbar-background);
		}

		.command-bar.vertical {
		@@ -3083,14 +3074,17 @@ html .command-bar > button:disabled {
		text-align: center;
		font-size: 1.25em;
		color: var(--theme-comment-alt);
		background-color: var(--theme-tab-toolbar-background);
		background-color: var(--theme-toolbar-background);
		font-weight: lighter;
		z-index: 100;
		}

		.theme-dark .welcomebox {
		background-color: var(--theme-body-background);
		}

		.alignlabel {
		display: inline-block;
		text-align: left;
		}

		.welcomebox .toggle-button-end {
		@@ -3101,13 +3095,25 @@ html .command-bar > button:disabled {
		offset-inline-start: auto;
		}

		.shortcutKeys {
		text-align: right;
		float: left;
		font-family: Courier;
		}

		.shortcutFunction {
		text-align: left;
		float: left;
		margin-left: 25px;
		}

		html .welcomebox .toggle-button-end.collapsed {
		bottom: 1px;
		}
		.source-header {
		border-bottom: 1px solid var(--theme-splitter-color);
		width: 100%;
		height: 30px;
		height: 29px;
		display: flex;
		align-items: flex-end;
		}
		@@ -3147,7 +3153,7 @@ html .welcomebox .toggle-button-end.collapsed {
		display: inline-flex;
		align-items: flex-end;
		position: relative;
		transition: all 0.25s ease;
		transition: all 0.15s ease;
		min-width: 40px;
		overflow: hidden;
		padding: 5px;

devtools/client/debugger/new/debugger.js

+881 −784

File changed.

Preview size limit exceeded, changes collapsed.

devtools/client/debugger/new/parser-worker.js

+100 −69

Original line number	Diff line number	Diff line
		@@ -4126,45 +4126,7 @@ module.exports = baseCreate;


		/***/ }),
		/* 404 */
		/***/ (function(module, exports, __webpack_require__) {

		var isArrayLike = __webpack_require__(220),
		isObjectLike = __webpack_require__(14);

		/**
		* This method is like `_.isArrayLike` except that it also checks if `value`
		* is an object.
		*
		* @static
		* @memberOf _
		* @since 4.0.0
		* @category Lang
		* @param {*} value The value to check.
		* @returns {boolean} Returns `true` if `value` is an array-like object,
		* else `false`.
		* @example
		*
		* _.isArrayLikeObject([1, 2, 3]);
		* // => true
		*
		* _.isArrayLikeObject(document.body.children);
		* // => true
		*
		* _.isArrayLikeObject('abc');
		* // => false
		*
		* _.isArrayLikeObject(_.noop);
		* // => false
		*/
		function isArrayLikeObject(value) {
		return isObjectLike(value) && isArrayLike(value);
		}

		module.exports = isArrayLikeObject;


		/***/ }),
		/* 404 */,
		/* 405 */,
		/* 406 */
		/***/ (function(module, exports, __webpack_require__) {
		@@ -28517,6 +28479,9 @@ module.exports = basePropertyDeep;
		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		exports.getNextStep = getNextStep;

		var _debuggerHtml = __webpack_require__(843);
		@@ -28525,45 +28490,40 @@ var _types = __webpack_require__(844);

		var _closest = __webpack_require__(1055);

		var _contains = __webpack_require__(1127);

		var _helpers = __webpack_require__(1052);

		function getNextStep(source, stepType, pausedPosition) {
		var closestPath = (0, _closest.getClosestPath)(source, pausedPosition);
		if (!closestPath) {
		return { nextStepType: stepType };
		}
		if ((0, _helpers.isAwaitExpression)(closestPath, pausedPosition)) {
		var nextHiddenBreakpointLocation = getLocationAfterAwaitExpression(closestPath, pausedPosition);
		return { nextStepType: "resume", nextHiddenBreakpointLocation };
		function getNextStep(source, pausedPosition) {
		var awaitExpression = getAwaitExpression(source, pausedPosition);
		if (!awaitExpression) {
		return null;
		}
		return { nextStepType: stepType };
		var awaitStatement = awaitExpression.getStatementParent();
		return getLocationAfterAwaitExpression(awaitStatement, pausedPosition);
		}

		function getLocationAfterAwaitExpression(path, position) {
		var children = getFunctionBodyChildren(path);
		if (!children) {
		return;
		}
		for (var i = 0; i !== children.length; i++) {
		var child = children[i];
		if ((0, _contains.containsPosition)(child.loc, position)) {
		var nextChild = children[++i];
		var nextLocation = nextChild.loc.start;
		nextLocation.sourceId = position.sourceId;
		return nextLocation;
		function getAwaitExpression(source, pausedPosition) {
		var closestPath = (0, _closest.getClosestPath)(source, pausedPosition);

		if (!closestPath) {
		return null;
		}

		if ((0, _helpers.isAwaitExpression)(closestPath)) {
		return closestPath;
		}

		return closestPath.find(p => p.isAwaitExpression());
		}

		function getFunctionBodyChildren(path) {
		var blockScope = path.scope.block;
		if (!blockScope) {
		return;
		function getLocationAfterAwaitExpression(statement, position) {
		var nextStatement = statement.getSibling(statement.key + 1);
		if (nextStatement.node) {
		return _extends({}, nextStatement.node.loc.start, {
		sourceId: position.sourceId
		});
		}
		var children = blockScope.body.body;
		return children;

		return null;
		}

		/***/ }),
		@@ -28937,6 +28897,8 @@ var _getSymbols = __webpack_require__(1050);

		var _getSymbols2 = _interopRequireDefault(_getSymbols);

		var _ast = __webpack_require__(1051);

		var _getOutOfScopeLocations = __webpack_require__(1072);

		var _getOutOfScopeLocations2 = _interopRequireDefault(_getOutOfScopeLocations);
		@@ -28959,6 +28921,7 @@ self.onmessage = workerHandler({
		getOutOfScopeLocations: _getOutOfScopeLocations2.default,
		getSymbols: _getSymbols2.default,
		clearSymbols: _getSymbols.clearSymbols,
		clearASTs: _ast.clearASTs,
		getVariablesInScope: _scopes.getVariablesInScope,
		getNextStep: _steps.getNextStep,
		getEmptyLines: _getEmptyLines2.default
		@@ -29745,6 +29708,7 @@ Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.getAst = getAst;
		exports.clearASTs = clearASTs;
		exports.traverseAst = traverseAst;

		var _parseScriptTags = __webpack_require__(1023);
		@@ -29822,6 +29786,10 @@ function getAst(source) {
		return ast;
		}

		function clearASTs() {
		ASTs = new Map();
		}

		function traverseAst(source, visitor) {
		var ast = getAst(source);
		if ((0, _isEmpty2.default)(ast)) {
		@@ -32842,6 +32810,7 @@ function containsPosition(a, b) {

		return startsBefore && endsAfter;
		}

		function containsLocation(a, b) {
		return containsPosition(a, b.start) && containsPosition(a, b.end);
		}
		@@ -32858,7 +32827,7 @@ function nodeContainsPosition(node, position) {
		var baseDifference = __webpack_require__(1131),
		baseFlatten = __webpack_require__(707),
		baseRest = __webpack_require__(411),
		isArrayLikeObject = __webpack_require__(404);
		isArrayLikeObject = __webpack_require__(1155);

		/**
		* Creates an array of `array` values not included in the other given arrays
		@@ -32964,6 +32933,68 @@ function baseDifference(array, values, iteratee, comparator) {
		module.exports = baseDifference;


		/***/ }),
		/* 1132 */,
		/* 1133 */,
		/* 1134 */,
		/* 1135 */,
		/* 1136 */,
		/* 1137 */,
		/* 1138 */,
		/* 1139 */,
		/* 1140 */,
		/* 1141 */,
		/* 1142 */,
		/* 1143 */,
		/* 1144 */,
		/* 1145 */,
		/* 1146 */,
		/* 1147 */,
		/* 1148 */,
		/* 1149 */,
		/* 1150 */,
		/* 1151 */,
		/* 1152 */,
		/* 1153 */,
		/* 1154 */,
		/* 1155 */
		/***/ (function(module, exports, __webpack_require__) {

		var isArrayLike = __webpack_require__(220),
		isObjectLike = __webpack_require__(14);

		/**
		* This method is like `_.isArrayLike` except that it also checks if `value`
		* is an object.
		*
		* @static
		* @memberOf _
		* @since 4.0.0
		* @category Lang
		* @param {*} value The value to check.
		* @returns {boolean} Returns `true` if `value` is an array-like object,
		* else `false`.
		* @example
		*
		* _.isArrayLikeObject([1, 2, 3]);
		* // => true
		*
		* _.isArrayLikeObject(document.body.children);
		* // => true
		*
		* _.isArrayLikeObject('abc');
		* // => false
		*
		* _.isArrayLikeObject(_.noop);
		* // => false
		*/
		function isArrayLikeObject(value) {
		return isObjectLike(value) && isArrayLike(value);
		}

		module.exports = isArrayLikeObject;


		/***/ })
		/******/ ]);
		});
		No newline at end of file

devtools/client/debugger/new/search-worker.js

+12 −11

Original line number	Diff line number	Diff line
		@@ -317,7 +317,7 @@ function ignoreWhiteSpace(str) {


		function wholeMatch(query, wholeWord) {
		if (query == "" \|\| !wholeWord) {
		if (query === "" \|\| !wholeWord) {
		return query;
		}

		@@ -350,7 +350,7 @@ function buildQuery(originalQuery, modifiers, _ref) {
		wholeWord = modifiers.wholeWord;


		if (originalQuery == "") {
		if (originalQuery === "") {
		return new RegExp(originalQuery);
		}

		@@ -443,8 +443,6 @@ var _buildQuery2 = _interopRequireDefault(_buildQuery);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var MAX_LENGTH = 100000;

		function getMatches(query, text, modifiers) {
		if (!query \|\| !text \|\| !modifiers) {
		return [];
		@@ -457,13 +455,9 @@ function getMatches(query, text, modifiers) {
		for (var i = 0; i < lines.length; i++) {
		var singleMatch = void 0;
		var line = lines[i];
		if (line.length <= MAX_LENGTH) {
		while ((singleMatch = regexQuery.exec(line)) !== null) {
		matchedLocations.push({ line: i, ch: singleMatch.index });
		}
		} else {
		return [];
		}
		}
		return matchedLocations;
		}
		@@ -873,13 +867,20 @@ function getSourceLineCount(source) {
		function getMode(source) {
		var contentType = source.contentType,
		text = source.text,
		isWasm = source.isWasm;
		isWasm = source.isWasm,
		url = source.url;


		if (!text \|\| isWasm) {
		return { name: "text" };
		}

		// if the url ends with .marko we set the name to Javascript so
		// syntax highlighting works for marko too
		if (url && url.match(/\.marko$/i)) {
		return { name: "javascript" };
		}

		// Use HTML mode for files in which the first non whitespace
		// character is `<` regardless of extension.
		var isHTMLLike = text.match(/^\s*</);

devtools/client/debugger/new/test/mochitest/browser.ini

+1 −0

Original line number	Diff line number	Diff line
		@@ -48,6 +48,7 @@ support-files =
		[browser_dbg-breaking.js]
		[browser_dbg-breaking-from-console.js]
		[browser_dbg-breakpoints.js]
		[browser_dbg-breakpoints-toggle.js]
		[browser_dbg-breakpoints-reloading.js]
		skip-if = true # Bug 1383576
		[browser_dbg-breakpoints-cond.js]