fix(files): edit locally buttons and description

[skjnldsv]

Fix #48972
Fix #49034

• Fixed button trigger
• Fixed icons
• Improved modal paragraph

The file should now open on your device. If it doesn't, please check that you have the desktop app installed.

[skjnldsv]

/backport 33a399f to stable28

[skjnldsv]

/backport 33a399f to stable29

[skjnldsv]

/backport 33a399f to stable30

[ne0YT]

can you create an option to disable the dialog completely?

[skjnldsv]

@ne0YT unfortunately no, that was not part of the goal.
We refrain from adding toggles for newly added features, otherwise it's unmaintainable :)

[ne0YT]

@skjnldsv maybe you can tell me how I could get rid of it using injected js?

[skjnldsv]

You cannot, our js is compiled and not possible to edit.
The only thing I could think of is with ublock origin: ##h2:has-text('Edit file locally'):upward(div[role=dialog])

But this might not work in the long run 🤔 Use it at your own risk

[ne0YT]

You cannot, our js is compiled and not possible to edit. The only thing I could think of is with ublock origin: ##h2:has-text('Edit file locally'):upward(div[role=dialog])

But this might not work in the long run 🤔 Use it at your own risk

is there some similar code I could use when I load my own js changing it? I injected a dialog to test that), but I'm not getting how to hide this element.

[skjnldsv]

Careful, you will hide ALL modals or dialogs with that 🫣

[ne0YT]

corrected script to hide the dialog:

// Function to hide specific elements based on exact class combinations
function hideSpecificElements() {
    const elementsToHide = document.querySelectorAll(
        '.modal-wrapper--small.modal-wrapper, .dialog__modal.modal-mask'
    );
    elementsToHide.forEach(el => {
        if (el) {
            el.style.cssText = `
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            `;
        }
    });
}

// Create observer to watch for new elements
const observer = new MutationObserver((mutations) => {
    hideSpecificElements(); // Hide elements if they appear dynamically
});

// Start observing the entire document for changes
observer.observe(document.documentElement, {
    childList: true,
    subtree: true
});

// Initial hide on load
window.addEventListener('load', function() {
    hideSpecificElements(); // Initial hide
});