Skip to content

Commit 4bd2228

Browse files
AnshulMalikdarkwing
AnshulMalik
authored and
darkwing
committed
Show some progress when pretty printing (firefox-devtools#6977)
1 parent a7ff5b8 commit 4bd2228

File tree

9 files changed

+74
-27
lines changed

9 files changed

+74
-27
lines changed

‎assets/images/Svg.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ const svg = {
7070
showSources: require("./showSources.svg"),
7171
showOutline: require("./showOutline.svg"),
7272
nuxtjs: require("./nuxtjs.svg"),
73-
rxjs: require("./rxjs.svg")
73+
rxjs: require("./rxjs.svg"),
74+
loader: require('./loader.svg')
7475
};
7576

7677
type SvgType = {

‎assets/images/loader.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎packages/devtools-reps/src/reps/string.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,12 @@ function getLinkifiedElements(text, cropLimit, openLink) {
224224
if (currentIndex !== text.length) {
225225
let nonUrlText = text.slice(currentIndex, text.length);
226226
if (currentIndex < endCropIndex) {
227-
nonUrlText = getCroppedString(nonUrlText, currentIndex, startCropIndex, endCropIndex);
227+
nonUrlText = getCroppedString(
228+
nonUrlText,
229+
currentIndex,
230+
startCropIndex,
231+
endCropIndex
232+
);
228233
}
229234
items.push(nonUrlText);
230235
}

‎src/actions/sources/prettyPrint.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
} from "../../selectors";
2525

2626
import type { Action, ThunkArgs } from "../types";
27+
import { selectSource } from "./select";
2728
import type { JsSource } from "../../types";
2829

2930
export function createPrettySource(sourceId: string) {
@@ -44,6 +45,7 @@ export function createPrettySource(sourceId: string) {
4445
};
4546

4647
dispatch(({ type: "ADD_SOURCE", source: prettySource }: Action));
48+
dispatch(selectSource(prettySource.id));
4749

4850
const { code, mappings } = await prettyPrint({ source, url });
4951
await sourceMaps.applySourceMap(source.id, url, code, mappings);

‎src/components/Editor/Footer.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@
5757
fill: var(--theme-selection-color);
5858
}
5959

60+
.source-footer > .commands > div.loader {
61+
vertical-align: top;
62+
width: 20px;
63+
margin: 0 4px;
64+
}
65+
6066
.source-footer > .commands > .action > img.prettyPrint {
6167
mask: url(/images/prettyPrint.svg) no-repeat;
6268
height: 16px;

‎src/components/Editor/Footer.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import React, { PureComponent } from "react";
77
import { connect } from "react-redux";
88
import classnames from "classnames";
9-
9+
import Svg from "../shared/Svg";
1010
import actions from "../../actions";
1111
import {
1212
getSelectedSource,
@@ -19,7 +19,8 @@ import {
1919
isPretty,
2020
isLoaded,
2121
getFilename,
22-
isOriginal
22+
isOriginal,
23+
isLoading
2324
} from "../../utils/source";
2425
import { getGeneratedSource } from "../../reducers/sources";
2526
import { shouldShowFooter, shouldShowPrettyPrint } from "../../utils/editor";
@@ -33,7 +34,6 @@ import "./Footer.css";
3334
type Props = {
3435
selectedSource: Source,
3536
mappedSource: Source,
36-
editor: any,
3737
endPanelCollapsed: boolean,
3838
horizontal: boolean,
3939
togglePrettyPrint: string => void,
@@ -46,13 +46,21 @@ type Props = {
4646
class SourceFooter extends PureComponent<Props> {
4747
prettyPrintButton() {
4848
const { selectedSource, togglePrettyPrint } = this.props;
49-
const sourceLoaded = selectedSource && isLoaded(selectedSource);
49+
50+
if (isLoading(selectedSource) && selectedSource.isPrettyPrinted) {
51+
return (
52+
<div className="loader">
53+
<Svg name="loader" />
54+
</div>
55+
);
56+
}
5057

5158
if (!shouldShowPrettyPrint(selectedSource)) {
5259
return;
5360
}
5461

5562
const tooltip = L10N.getStr("sourceTabs.prettyPrint");
63+
const sourceLoaded = selectedSource && isLoaded(selectedSource);
5664

5765
const type = "prettyPrint";
5866
return (

‎src/components/Editor/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -577,7 +577,7 @@ class Editor extends PureComponent<Props, State> {
577577
<EmptyLines editor={editor} />
578578
<Breakpoints editor={editor} />
579579
<Preview editor={editor} editorRef={this.$editorWrapper} />;
580-
<Footer editor={editor} horizontal={horizontal} />
580+
<Footer horizontal={horizontal} />
581581
<HighlightLines editor={editor} />
582582
<EditorMenu editor={editor} />
583583
<GutterMenu editor={editor} />

‎src/components/Editor/tests/Editor.spec.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,14 @@ function createMockEditor() {
3838
setText: jest.fn(),
3939
on: jest.fn(),
4040
off: jest.fn(),
41-
createDocument: () => ({
42-
getLine: line => ""
43-
}),
41+
createDocument: () => {
42+
let val;
43+
return {
44+
getLine: line => "",
45+
getValue: () => val,
46+
setValue: newVal => (val = newVal)
47+
};
48+
},
4449
replaceDocument: jest.fn(),
4550
setMode: jest.fn()
4651
};
@@ -86,7 +91,9 @@ describe("Editor", () => {
8691
selectedSource: { loadedState: "loading" }
8792
});
8893

89-
expect(mockEditor.setText.mock.calls).toEqual([["Loading…"]]);
94+
expect(mockEditor.replaceDocument.mock.calls[0][0].getValue()).toBe(
95+
"Loading…"
96+
);
9097
expect(mockEditor.codeMirror.scrollTo.mock.calls).toEqual([]);
9198
});
9299
});
@@ -169,10 +176,11 @@ describe("Editor", () => {
169176
selectedLocation: { sourceId: "bar", line: 1, column: 1 }
170177
});
171178

172-
expect(mockEditor.setText.mock.calls).toEqual([
173-
["the text"],
174-
["Loading…"]
175-
]);
179+
expect(mockEditor.replaceDocument.mock.calls[1][0].getValue()).toBe(
180+
"Loading…"
181+
);
182+
183+
expect(mockEditor.setText.mock.calls).toEqual([["the text"]]);
176184

177185
expect(mockEditor.codeMirror.scrollTo.mock.calls).toEqual([[1, 2]]);
178186
});
@@ -253,10 +261,11 @@ describe("Editor", () => {
253261
selectedLocation: { sourceId: "foo", line: 1, column: 1 }
254262
});
255263

256-
expect(mockEditor.setText.mock.calls).toEqual([
257-
["Loading…"],
258-
["the text"]
259-
]);
264+
expect(mockEditor.replaceDocument.mock.calls[0][0].getValue()).toBe(
265+
"Loading…"
266+
);
267+
268+
expect(mockEditor.setText.mock.calls).toEqual([["the text"]]);
260269

261270
expect(mockEditor.codeMirror.scrollTo.mock.calls).toEqual([[1, 0]]);
262271
});

‎src/utils/editor/source-documents.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,17 @@ export function clearEditor(editor: SourceEditor) {
7575
}
7676

7777
export function showLoading(editor: SourceEditor) {
78-
if (hasDocument("loading")) {
79-
return;
80-
}
78+
let doc = getDocument("loading");
8179

82-
const doc = editor.createDocument();
83-
setDocument("loading", doc);
84-
editor.replaceDocument(doc);
85-
editor.setText(L10N.getStr("loadingText"));
86-
editor.setMode({ name: "text" });
80+
if (doc) {
81+
editor.replaceDocument(doc);
82+
} else {
83+
doc = editor.createDocument();
84+
setDocument("loading", doc);
85+
doc.setValue(L10N.getStr("loadingText"));
86+
editor.replaceDocument(doc);
87+
editor.setMode({ name: "text" });
88+
}
8789
}
8890

8991
export function showErrorMessage(editor: Object, msg: string) {

0 commit comments

Comments
 (0)