My plugin code has some Javascript that updates the HTML popup element to provide visual feedback to the user. Basically, they need to make some selections at various spots (selecting folders to use; files to open; etc), and when selections are made, it provides them with visual feedback of what they selected by updating HTML elements with the filepaths/folderpaths of their selections.
What I’ve noticed is, if there is at least one open Photoshop document? This functionality works fine and as expected. However if there are no open Photoshop documents? The Javascript will still fire, as I’ve verified by including console log statements to test, but the HTML popup element does NOT get updated to provide the visual feedback. It even still registers their selections, as when all required selections are made and the “RUN” button is clicked? It correctly executes the code to provide the full functionality. But for whatever reason, the HTML popup does not get updated with the text of their selections to provide that visual feedback.
I can’t think to describe this as anything other than a bug with Photoshop plugins. Is there any reason for this behavior, and is there anything I can do to prevent this from happening?
async function specifyPhotoshopDocument() {
photoshop_document_to_use = await fs.getFileForOpening();
display_selection_as_text();
}
async function specifyInputFolder() {
input_folder_to_use = await fs.getFolder(); // prompts the user to select a directory
all_images_to_use = await input_folder_to_use.getEntries(input_folder_to_use); // gets all files within the directory
display_selection_as_text();
}
async function specifyOutputFolder() {
output_folder_to_use = await fs.getFolder();
display_selection_as_text();
}
function updateSliderValue() {
document.getElementById("image_quality_text_output").innerText = document.getElementById("image_quality_setting_slider").value;
}
// provides visual feedback to user, post-selection, so they can see their parameters before running
function display_selection_as_text() {
console.log("MADE IT HERE");
if (photoshop_document_to_use !== null && photoshop_document_to_use !== app.activeDocument.title) {
document.querySelector(".photoshop_document").innerHTML = `${photoshop_document_to_use.name}`;}
if (input_folder_to_use !== null) {
document.querySelector(".input_folder").innerHTML = `${input_folder_to_use.name}`;}
if (output_folder_to_use !== null) {
document.querySelector(".output_folder").innerHTML = `${output_folder_to_use.name}`;}
}
Thanks.
This MIGHT have something to do with the scope of the variables. Because I declare them as “null” in the global scope, as I need to access them later within a set of nested functions.
// Declare the variables in the global scope -- without this, their scope is restricted to their narrow functions, and they can't be read elsewhere;
let photoshop_document_to_use = null;
let input_folder_to_use = null;
let all_images_to_use = null;
let output_folder_to_use = null;
Still, the code works perfectly fine when a Photoshop document is open. It only becomes buggy when there aren’t any open documents. No clue why that would be the case.
Maybe the reason has something to do with this: When all documents are closed? The default Photoshop behavior is to hide all panels, since the user isn’t working on anything. However for this specific plugin, you can open the popup via the Plugins dropdown, to then be able to make your selections and run the commands. MAYBE this is happening because Photoshop’s usual behavior is, “no open documents? there aren’t any visible panels. therefore, there’s no point in updating the text of these elements or anything, since the user isn’t using them.” Or similarly, maybe Photoshop puts these kind of visual updates on hold or blocks them for some reason, when no documents are open – perhaps to preserve CPU resources or whatever. It’s the best explanation I can seem to think of.
Basically, the conditions get met in this block of code (as I verify with console log statements that show the variable values), no errors show up (for example, it doesn’t say anything like querySelector of that element is undefined) – yet the HTML updates simply don’t happen:
function display_selection_as_text() {
console.log(input_folder_to_use);
console.log(photoshop_document_to_use);
console.log(output_folder_to_use);
if (photoshop_document_to_use !== null && photoshop_document_to_use !== app.activeDocument.title) { // 2nd condition is to avoid an error where it tries to get the .name of the .title -- an operation that isn't needed, since we already have the title
document.querySelector(".photoshop_document").innerHTML = `${photoshop_document_to_use.name}`;}
if (input_folder_to_use !== null) {
document.querySelector(".input_folder").innerHTML = `${input_folder_to_use.name}`;}
if (output_folder_to_use !== null) {
document.querySelector(".output_folder").innerHTML = `${output_folder_to_use.name}`;}
}
Updating in case anyone else has this issue.
Turns out, my code was failing silently when there were no open Photoshop documents. That’s because one of my functions had a conditional statement that checked something about app.activeDocument. Since all documents were closed, app.activeDocument was null – causing an error.
After patching that, the functionality of the plugin works fine with or without any open Photoshop documents. This was particularly tricky to catch, because unlike internet browsers that’ll report any/all errors that occur and aren’t handled in the code via the console log? Photoshop errors are a lot trickier to catch. I’ve had TONS of silent failures in the course of working on my Photoshop plugin so far. Maybe there’s some foolproof way to catch them all or cause them to bubble up to where they’re always detected and reported, but I’m finding myself having to just do lots of “MADE IT HERE” / “MADE IT HERE 2” statements to pin down the source of my bugs/errors that I can’t seem to immediately figure out.
1 Like