Skip to content

Commit

Permalink
fix: live preview UX where clicking on lp will open html when editing…
Browse files Browse the repository at this point in the history
… unrelated ts/json/js file
  • Loading branch information
abose committed Aug 10, 2024
1 parent 5604c38 commit f2669f8
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 47 deletions.
20 changes: 5 additions & 15 deletions src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,8 +163,7 @@ define(function (require, exports, module) {
activeEditor && activeEditor.focus(); // restore focus from live preview
return;
}
const openFullEditors = MainViewManager.findInOpenPane(liveDocPath);
const openLiveDocEditor = openFullEditors.length ? openFullEditors[0].editor : null;
const allOpenFileCount = MainViewManager.getWorkingSetSize(MainViewManager.ALL_PANES);
function selectInHTMLEditor(fullHtmlEditor) {
const position = HTMLInstrumentation.getPositionFromTagId(fullHtmlEditor, parseInt(tagId, 10));
if(position && fullHtmlEditor) {
Expand All @@ -183,19 +182,10 @@ define(function (require, exports, module) {
_focusEditorIfNeeded(activeEditor, nodeName, contentEditable);
_searchAndCursorIfCSS(activeEditor, allSelectors, nodeName);
// in this case, see if we need to do any css reverse highlight magic here
} else if(openLiveDocEditor) {
// If we are on multi pane mode, the html doc was open in an inactive unfocused editor.
selectInHTMLEditor(openLiveDocEditor);
} else {
// no open editor for the live doc in panes, check if there is one in the working set.
const foundInWorkingSetPane = MainViewManager.findInAllWorkingSets(liveDocPath);
const paneToUse = foundInWorkingSetPane.length ?
foundInWorkingSetPane[0].paneId:
MainViewManager.ACTIVE_PANE; // if pane id is active pane, then the file is not open in working set
const viewToUse = (paneToUse === MainViewManager.ACTIVE_PANE) ?
FileViewController.PROJECT_MANAGER:
FileViewController.WORKING_SET_VIEW;
FileViewController.openAndSelectDocument(liveDocPath, viewToUse, paneToUse)
} else if(!allOpenFileCount){
// no open editor in any panes, then open the html file directly.
FileViewController.openAndSelectDocument(liveDocPath,
FileViewController.WORKING_SET_VIEW, MainViewManager.ACTIVE_PANE)
.done(()=>{
selectInHTMLEditor(EditorManager.getActiveEditor());
});
Expand Down
32 changes: 0 additions & 32 deletions test/spec/LiveDevelopmentMultiBrowser-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1431,38 +1431,6 @@ define(function (require, exports, module) {
await endPreviewSession();
}, 30000);

it("should open html in correct pane on clicking live preview in split pane", async function () {
MainViewManager.setLayoutScheme(1, 2);
MainViewManager.setActivePaneId(MainViewManager.FIRST_PANE);
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["cssLivePreview.html"], MainViewManager.FIRST_PANE),
"SpecRunnerUtils.openProjectFiles cssLivePreview.html");

await waitsForLiveDevelopmentToOpen();

await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.css"], MainViewManager.SECOND_PANE),
"SpecRunnerUtils.openProjectFiles simple1.css"); // non related file
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["blank.css"], MainViewManager.FIRST_PANE),
"SpecRunnerUtils.openProjectFiles blank.css"); // non related file

// now the live preview page's editor is not visible in any panes, but is already open in first pane
// so, on clicking live preview, it should open the file in first pane
MainViewManager.setActivePaneId(MainViewManager.SECOND_PANE);

await forRemoteExec(`document.getElementById("testId2").click()`);
let editor = EditorManager.getActiveEditor();
await awaitsFor(()=>{
editor = EditorManager.getActiveEditor();
return editor && editor.document.file.name === "cssLivePreview.html";
}, "cssLivePreview.html to open as active editor");
await _forSelection("#testId", editor, { line: 13, ch: 4, sticky: null });
editor = EditorManager.getActiveEditor();
expect(editor.document.file.name).toBe("cssLivePreview.html");
expect(MainViewManager.getActivePaneId()).toBe(MainViewManager.FIRST_PANE);

MainViewManager.setLayoutScheme(1, 1);
await endPreviewSession();
}, 30000);

it("should reverse highlight open previewed html file if not open on clicking live preview", async function () {
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
"SpecRunnerUtils.openProjectFiles simple1.html");
Expand Down

0 comments on commit f2669f8

Please sign in to comment.