Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-29 07:42:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1503975 - Update Debugger Frontend v99. r=dwalsh

Browse Source
This commit is contained in:
Jason Laster 2018-11-01 15:07:31 -04:00
parent 82c93eb971
commit eb510156bb
16 changed files with 2453 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
devtools/client/debugger/new/dist/debugger.css vendored
View File

@ -1799,6 +1799,7 @@ html .toggle-button.end.vertical svg {
}
.source-outline-tabs {
font-size: 12px;
width: 100%;
background: var(--theme-body-background);
border-top: 1px solid var(--theme-splitter-color);
@ -1813,9 +1814,9 @@ html .toggle-button.end.vertical svg {
.source-outline-tabs .tab {
background-color: var(--theme-toolbar-background);
border-bottom: 1px solid transparent;
border-color: var(--theme-splitter-color);
color: var(--theme-body-color);
border-top: 2px solid transparent;
border-bottom: 1px solid var(--theme-splitter-color);
color: var(--theme-toolbar-color);
cursor: default;
display: inline-flex;
flex: 1;
@ -1823,23 +1824,31 @@ html .toggle-button.end.vertical svg {
margin-bottom: 0px;
margin-top: -1px;
overflow: hidden;
padding: 8px 8px 7px 8px;
padding: 5px 8px 7px 8px;
position: relative;
transition: all 0.25s ease;
}
.source-outline-tabs .tab:first-child {
border-inline-end: 1px solid var(--theme-splitter-color);
.source-outline-tabs .tab:not(.active):hover {
background-color: var(--theme-toolbar-hover);
border-top: 2px solid rgba(0, 0, 0, 0.2);
}
.source-outline-tabs .tab:hover {
background-color: var(--theme-toolbar-background-alt);
border-color: var(--theme-splitter-color);
.theme-dark .source-outline-tabs .tab:hover {
border-top: 2px solid var(--tab-line-hover-color);
}
.source-outline-tabs .tab.active {
background-color: var(--theme-body-background);
border-bottom-color: transparent;
border-top: 2px solid var(--tab-line-selected-color);
color: var(--theme-toolbar-selected-color);
}
.theme-dark .source-outline-tabs .tab.active {
color: var(--theme-toolbar-selected-color);
}
.theme-dark .source-outline-tabs .tab.active:hover {
border-top: 2px solid var(--tab-line-selected-color);
}
.source-outline-tabs .tab.active path,
@ -4251,9 +4260,8 @@ html .welcomebox .toggle-button-end.collapsed {
}
.source-tab {
border: 1px solid transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
display: inline-flex;
align-items: center;
position: relative;
@ -4262,26 +4270,29 @@ html .welcomebox .toggle-button-end.collapsed {
max-width: 100%;
overflow: hidden;
padding: 5px;
margin-inline-start: 3px;
margin-top: 3px;
cursor: default;
height: 27px;
height: 30px;
font-size: 12px;
}
.source-tab:first-child {
margin-inline-start: 0;
}
.source-tab:hover {
background-color: var(--theme-toolbar-background-alt);
border-color: var(--theme-splitter-color);
.source-tab:not(.active):hover {
background: linear-gradient(var(--theme-toolbar-hover) 28px, transparent 1px);
}
.source-tab.active {
color: var(--theme-body-color);
background-color: var(--theme-body-background);
border-color: var(--theme-splitter-color);
color: var(--theme-toolbar-selected-color);
border-bottom-color: transparent;
border-left: 1px solid var(--theme-splitter-color);
border-right: 1px solid var(--theme-splitter-color);
background-color: var(--theme-body-background);
}
.theme-dark .source-tab.active {
color: var(--theme-toolbar-selected-color);
}
.source-tab.active path,
@ -4342,7 +4353,7 @@ html[dir="rtl"] img.moreTabs {
overflow: hidden;
padding: 0 4px;
align-self: center;
margin-bottom: 2px;
margin-bottom: 1px;
}
.source-tab .filename span {
@ -4362,6 +4373,30 @@ html[dir="rtl"] img.moreTabs {
.source-tab:hover .close-btn {
visibility: visible;
}
.source-tab-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: transparent;
transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
opacity: 0;
transform: scaleX(0);
}
.source-tab:not(.active):hover .source-tab-line {
background: var(--tab-line-hover-color);
opacity: 1;
transform: scaleX(1);
}
.source-tab.active .source-tab-line {
background: var(--tab-line-selected-color);
opacity: 1;
transform: scaleX(1);
}
/* 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/>. */

2850
devtools/client/debugger/new/dist/vendors.js vendored
View File

File diff suppressed because one or more lines are too long

3
devtools/client/debugger/new/src/client/firefox/create.js
View File

@ -20,8 +20,7 @@ export function createFrame(frame: FramePacket): ?Frame {
let title;
if (frame.type == "call") {
const c = frame.callee;
title =
c.name || c.userDisplayName || c.displayName || L10N.getStr("anonymous");
title = c.name || c.userDisplayName || c.displayName;
} else {
title = `(${frame.type})`;
}

1
devtools/client/debugger/new/src/components/Editor/Tab.js
View File

@ -192,6 +192,7 @@ class Tab extends PureComponent<Props> {
onContextMenu={e => this.onTabContextMenu(e, sourceId)}
title={getFileURL(source)}
>
<span className="source-tab-line" />
<SourceIcon
source={source}
shouldHide={icon => ["file", "javascript"].includes(icon)}

1
devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.js
View File

@ -247,6 +247,7 @@ class Expressions extends Component<Props, State> {
<div className="expression-container__close-btn">
<CloseButton
handleClick={e => this.deleteExpression(e, expression)}
tooltip={L10N.getStr("expressions.remove.tooltip")}
/>
</div>
</div>

2
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Frame.js
View File

@ -20,7 +20,7 @@ type FrameTitleProps = {
};
function FrameTitle({ frame, options = {} }: FrameTitleProps) {
const displayName = formatDisplayName(frame, { ...options, maxLength: null });
const displayName = formatDisplayName(frame, options);
return <div className="title">{displayName}</div>;
}

2
devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js
View File

@ -123,7 +123,7 @@ export default class Group extends Component<Props, State> {
renderDescription() {
const frame = this.props.group[0];
const displayName = formatDisplayName(frame, { maxLength: null });
const displayName = formatDisplayName(frame);
return (
<li
key={frame.id}

3
devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.js
View File

@ -108,6 +108,7 @@ class XHRBreakpoints extends Component<Props, State> {
renderXHRInput(onSubmit) {
const { focused, inputValue } = this.state;
const { showInput } = this.props;
const placeholder = L10N.getStr("xhrBreakpoints.placeholder");
return (
@ -123,7 +124,7 @@ class XHRBreakpoints extends Component<Props, State> {
onChange={this.handleChange}
onBlur={this.hideInput}
onFocus={this.onFocus}
autoFocus={true}
autoFocus={showInput}
value={inputValue}
/>
<input type="submit" style={{ display: "none" }} />

6
devtools/client/debugger/new/src/components/SecondaryPanes/index.js
View File

@ -263,8 +263,10 @@ class SecondaryPanes extends Component<Props, State> {
onXHRAdded={this.onXHRAdded}
/>
),
opened: true,
onToggle: () => {}
opened: prefs.xhrBreakpointsVisible,
onToggle: opened => {
prefs.xhrBreakpointsVisible = opened;
}
};
}

9
devtools/client/debugger/new/src/components/shared/PreviewFunction.js
View File

@ -8,7 +8,7 @@ import React, { Component } from "react";
import { times, zip, flatten } from "lodash";
import { simplifyDisplayName } from "../../utils/pause/frames";
import { formatDisplayName } from "../../utils/pause/frames";
import "./PreviewFunction.css";
@ -21,14 +21,9 @@ type FunctionType = {
type Props = { func: FunctionType };
function getFunctionName(func: FunctionType) {
const name = func.userDisplayName || func.displayName || func.name;
return simplifyDisplayName(name);
}
export default class PreviewFunction extends Component<Props> {
renderFunctionName(func: FunctionType) {
const name = getFunctionName(func);
const name = formatDisplayName(func);
return <span className="function-name">{name}</span>;
}

28
devtools/client/debugger/new/src/utils/pause/frames/displayName.js
View File

@ -7,7 +7,6 @@
// eslint-disable-next-line max-len
import type { LocalFrame } from "../../../components/SecondaryPanes/Frames/types";
import { getFilename } from "../../source";
import { endTruncateStr } from "../../../utils/utils";
// Decodes an anonymous naming scheme that
// spider monkey implements based on "Naming Anonymous JavaScript Functions"
@ -17,9 +16,9 @@ const arrayProperty = /\[(.*?)\]$/;
const functionProperty = /([\w\d]+)[\/\.<]*?$/;
const annonymousProperty = /([\w\d]+)\(\^\)$/;
export function simplifyDisplayName(displayName: string) {
export function simplifyDisplayName(displayName: string | void): string | void {
// if the display name has a space it has already been mapped
if (/\s/.exec(displayName)) {
if (!displayName || /\s/.exec(displayName)) {
return displayName;
}
@ -74,27 +73,28 @@ function mapDisplayNames(frame, library) {
);
}
function getFrameDisplayName(frame: LocalFrame): string {
const { displayName, originalDisplayName, userDisplayName, name } = frame;
return originalDisplayName || userDisplayName || displayName || name;
}
type formatDisplayNameParams = {
shouldMapDisplayName: boolean,
maxLength: number
shouldMapDisplayName: boolean
};
export function formatDisplayName(
frame: LocalFrame,
{ shouldMapDisplayName = true, maxLength = 25 }: formatDisplayNameParams = {}
) {
let { displayName, originalDisplayName, library } = frame;
displayName = originalDisplayName || displayName;
{ shouldMapDisplayName = true }: formatDisplayNameParams = {}
): string {
const { library } = frame;
let displayName = getFrameDisplayName(frame);
if (library && shouldMapDisplayName) {
displayName = mapDisplayNames(frame, library);
}
displayName = simplifyDisplayName(displayName);
return Number.isInteger(maxLength)
? endTruncateStr(displayName, maxLength)
: displayName;
return simplifyDisplayName(displayName) || L10N.getStr("anonymousFunction");
}
export function formatCopyName(frame: LocalFrame) {
export function formatCopyName(frame: LocalFrame): string {
const displayName = formatDisplayName(frame);
const fileName = getFilename(frame.source);
const frameLocation = frame.location.line;

2
devtools/client/debugger/new/src/utils/pause/scopes/getScope.js
View File

@ -40,7 +40,7 @@ function getScopeTitle(type, scope: RenderableScope) {
if (type === "function" && scope.function) {
return scope.function.displayName
? simplifyDisplayName(scope.function.displayName)
: L10N.getStr("anonymous");
: L10N.getStr("anonymousFunction");
}
return L10N.getStr("scopes.block");
}

2
devtools/client/debugger/new/src/utils/prefs.js
View File

@ -25,6 +25,7 @@ if (isDevelopment()) {
pref("devtools.debugger.component-visible", true);
pref("devtools.debugger.workers-visible", true);
pref("devtools.debugger.expressions-visible", true);
pref("devtools.debugger.xhr-breakpoints-visible", true);
pref("devtools.debugger.breakpoints-visible", true);
pref("devtools.debugger.start-panel-collapsed", false);
pref("devtools.debugger.end-panel-collapsed", false);
@ -74,6 +75,7 @@ export const prefs = new PrefsHelper("devtools", {
workersVisible: ["Bool", "debugger.workers-visible"],
breakpointsVisible: ["Bool", "debugger.breakpoints-visible"],
expressionsVisible: ["Bool", "debugger.expressions-visible"],
xhrBreakpointsVisible: ["Bool", "debugger.xhr-breakpoints-visible"],
startPanelCollapsed: ["Bool", "debugger.start-panel-collapsed"],
endPanelCollapsed: ["Bool", "debugger.end-panel-collapsed"],
frameworkGroupingOn: ["Bool", "debugger.ui.framework-grouping-on"],

2
devtools/client/debugger/new/src/utils/source-maps.js
View File

@ -44,7 +44,7 @@ export async function getMappedLocation(
const source = getSource(state, location.sourceId);
if (!source) {
throw new Error("Unknown source for location");
return location;
}
if (isOriginalId(location.sourceId)) {

8
devtools/client/locales/en-US/debugger.properties
View File

@ -513,6 +513,7 @@ expressions.errorMsg=Invalid expression…
expressions.label=Add watch expression
expressions.accesskey=e
expressions.key=CmdOrCtrl+Shift+E
expressions.remove.tooltip=Remove watch expression
# LOCALIZATION NOTE (xhrBreakpoints.header): The pause on any XHR breakpoints headings
xhrBreakpoints.header=XHR Breakpoints
@ -919,9 +920,10 @@ whyPaused.other=Debugger paused
# keyboard shortcuts that use the control key
ctrl=Ctrl
# LOCALIZATION NOTE (anonymous): The text that is displayed when the
# display name is null.
anonymous=(anonymous)
# LOCALIZATION NOTE (anonymousFunction): this string is used to display
# JavaScript functions that have no given name - they are said to be
# anonymous.
anonymousFunction=<anonymous>
# LOCALIZATION NOTE (shortcuts.toggleBreakpoint): text describing
# keyboard shortcut action for toggling breakpoint

1
devtools/client/preferences/debugger.js
View File

@ -32,6 +32,7 @@ pref("devtools.debugger.component-visible", true);
pref("devtools.debugger.workers-visible", true);
pref("devtools.debugger.breakpoints-visible", true);
pref("devtools.debugger.expressions-visible", true);
pref("devtools.debugger.xhr-breakpoints-visible", true);
pref("devtools.debugger.start-panel-collapsed", false);
pref("devtools.debugger.end-panel-collapsed", false);
pref("devtools.debugger.tabs", "[]");