diff --git a/src/SyncTrayzor/Pages/ViewerViewModel.cs b/src/SyncTrayzor/Pages/ViewerViewModel.cs index 35f70d83..60959f59 100644 --- a/src/SyncTrayzor/Pages/ViewerViewModel.cs +++ b/src/SyncTrayzor/Pages/ViewerViewModel.cs @@ -146,19 +146,36 @@ private void InitializeBrowser(ChromiumWebBrowser webBrowser) { if (e.Frame.IsMain && e.Url != "about:blank") { - var addOpenFolder = - @"$('#folders .panel-footer .pull-right').prepend(" + - @" '')"; - webBrowser.ExecuteScriptAsync(addOpenFolder); - - var addFolderBrowse = + // I tried to do this using Syncthing's events, but it's very painful - the DOM is updated some time + // after the event is fired. It's a lot easier to just watch for changes on the DOM. + var addOpenFolderButton = + @"var syncTrayzorAddOpenFolderButton = function(elem) {" + + @" var $buttonContainer = elem.find('.panel-footer .pull-right');" + + @" $buttonContainer.find('.panel-footer .synctrayzor-add-folder-button').remove();" + + @" $buttonContainer.prepend(" + + @" '');" + + @"};" + + @"new MutationObserver(function(mutations, observer) {" + + @" for (var i = 0; i < mutations.length; i++) {" + + @" for (var j = 0; j < mutations[i].addedNodes.length; j++) {" + + @" syncTrayzorAddOpenFolderButton($(mutations[i].addedNodes[j]));" + + @" }" + + @" }" + + @"}).observe(document.getElementById('folders'), {" + + @" childList: true" + + @"});" + + @"syncTrayzorAddOpenFolderButton($('#folders'));" + + @""; + webBrowser.ExecuteScriptAsync(addOpenFolderButton); + + var addFolderBrowse = @"$('#folderPath').wrap($('
').css('display', 'flex'));" + @"$('#folderPath').after(" + @" $('