Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: live preview UX where clicking on lp will open html when editing unrelated ts/json/js file #1800

Merged
merged 1 commit into from
Aug 10, 2024
Merged

fix: live preview UX where clicking on lp will open html when editing unrelated ts/json/js file #1800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 5 additions & 15 deletions src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
View file
Open in desktop
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
View file
Open in desktop
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
Loading