Localize buttons makes them squared inside groups

[schroef]

Im updating this CEP panel which has many script and a couple dialog windows. Ive started now adding localize to it and notice some weird behavior which i can find in the resources ive found.

The "issue" im seeing is that when buttons have hard-coded text, defined when they are created. Buttons show with round borders. When i use localize and they are placed inside a group, they get squared off in the corners. But when it uses English they show with rounded corners.

Ive got an example script here. Its perhaps hard to test since you need to have Photoshop with different languages installed. Ive installed different languages by copying the packs when you install the app. Some are old so i guess its misses some parts.

Do you perhaps have knowledge of this?
I see this happening on Windows by the way, OSX doesnt show this.

Ive looked in the Javscript toolguide, the ScriptUI for dummies by Peter Kahrel, tried PS-Script.com (nothing found yet)

// enable double clicking from the Finder or Explorer
#target photoshop

//Make Photoshop the front most application
app.bringToFront();

// Javascript toolsguide cs5
var locCancelBtn = {
    en: "Cancel",
    es: "Cancelar",
    fr: "XXXXXXXXX",
    nl: "Annuleer",
    ch: "XXXXXXXX"
};
testLbl = {
    en: "Test",
    nl: "Testen"
};
$.localization = true;

var dlg = new Window("dialog", "Alert Box Builder");
    btnPnl = dlg.add("panel", undefined, "Build it");

var testBtn = btnPnl.add("button", undefined,  localize(testBtn), {
    name: "test"
});
var buildBtn = btnPnl.add("button", undefined, "Build", {
    name: "ok"
});
var cancelBtn = btnPnl.add("button", undefined, "Cancel", {
    name: "cancel"
});
// BUTTONGROUP
    // ===========
    var buttonGroup = dlg.add("group", undefined, {name: "buttonGroup"}); 
        // buttonGroup.orientation = "row"; 
        // buttonGroup.alignChildren = ["right","center"]; 
        // buttonGroup.spacing = 8; 
        // buttonGroup.margins = [0,10,0,0]; 
        // buttonGroup.alignment = ["fill","top"]; 
var testBtn = buttonGroup.add("button", undefined,  localize(testLbl), {
    name: "test"
});
var buildBtn = buttonGroup.add("button", undefined, "Build", {
    name: "ok"
});
var cancelBtn = buttonGroup.add("button", undefined, "Cancel", {
    name: "cancel"
});
dlg.show();

[schroef]

What ive found this far is the first buttons which are assigned as ok and cancel seem to be getting rounded. When i comment out that first panel, then i do see other buttons getting rounded as well.

When i set the last buttons to be ok and cancel, then those get rounded. Seem like its some behavior to show the dialog buttons i guess.

var buildenBtn = buttonGroup.add("button", undefined, "Build", {
    name: "ok"
});
var cancelenBtn = buttonGroup.add("button", undefined, "Cancel", {
    name: "cancel"
});
var testenBtn = dialogButtons.add("button", undefined,  "Ok", {
    name: "ok"
});

[joonaspaakko]

Yea, I don't really know more than you about it... Maybe just that it's something in PS specifically, and maybe certain versions. I'm not certain about localization, just I feel pretty confident that if you tried it in Indesign or Illustrator, all buttons would likely be round.

I've definitely seen this happening on Mac... In fact in recent memory that's the only OS's where I've seen this behavior.

You could try to see if leaving out the ok and cancel buttons would help. I feel like maybe I've tried it so it probably didn't work cause I can't remember. They have some default behavior but you should be able to replicate that, if needed.

Is it a CEP panel? The code made me assume you meant to say SUI? If it is HTML and CSS it sounds like a weird but fixable issue.

[schroef]

You are correct about Illustrator and Indesign both showing rounded buttons. Im wondering why so much parts are different when they use the same engine right?!

Illustrator

Indesign

The CEP panel is indeed html, css and js panel for Photoshop. Its called AnimDessin2. Im no coder but did now some scripting in extendedscript, this thought me so much more.

Im guessing on a couple names can be used so they get rounded. I see this same behavior in for instance the preference panel dialog. Though they have some other buttons which also have rounded edges.

But i also noticed, a sub dialog window i added in my main script. Its a dialog which show for when deleting presets, it gets those square corners as well due to localize or not being main buttons. When i hard-code the text. So when i use button.text = "Cancel" then they show correct

Because of your AMAZING website i was able to make mockups for custom dialog windows so much faster! Wish i had found it sooner. Man i can remember when i used to try and test all the time and see how the layout would look. Dozens of errors and misalignment... offf! Adobe should link your website in their guides!

Really glad you also responded so fast!

Below is the dialog im building, its like the old new document dialog but with some extras. like timeline settings and custom presets. Ive also added more options for coloring the background.
Another thing which took me long was getting objectToDescriptor and descriptToObject to work. This is for storing variables so when you call the window again, it uses the last used settings. I kinda hacked a preset system together so it works together with this using JSON files as presets.

Custom new document dialog

The delete dialog, a sub panel of the main panel also shows squared buttons now. Trying to figure out how i can get them to be rounded as well

I did just learn a new trick about localization and testing. Prior i used to set the language and then did a restart.
But when i use $.localize = "nl" I can test it while keeping the UI on English
Another one is using $.localize = true; is handy so i dnot need to wrap all the variables with localize(stringToLanguage)

[joonaspaakko]

My take on it is that it's their way of lazily defining a primary set of buttons, perhaps so that all old SUI dialogs get the primary button style, and it's probably based on how often times the "primary" buttons are/or sit next to the default ok and cancel default buttons.

Beats me why PS has these differences, especially in CC, which is when they added the round buttons (I think) and quite a few other visual changes... but PS has always been the kind of the Internet Explorer of Script UI for whatever reason. Like for example how Palette window type has been broken for like 10 years I think.

When I first bumped into this "buttons with rounded/straight corners" issue I just let it go because it didn't seem worth it to struggle with it since that's how it is in the application preferences and built in scripts as well... Which by the way hint heavily that the "primary" set of buttons should be rounded, I think that's where I got it from.

I took fresh a look at it, but couldn't come up with any kind of workaround, other than maybe using iconButton with a different image per button, which probably isn't worth it,

[mcsinc]

I’ve gotten around it using images as buttons instead of letting them default if you want to change them as you suggested.

…

Sent from my iPhone

On Jan 16, 2022, at 10:49 AM, Joonas Pääkkö ***@***.***> wrote:  My take on it is that it's their way of lazily defining a primary set of buttons, probably based on how often the "primary" buttons are... or sit next to the default ok and cancel buttons. Beats me why PS has these differences, especially in CC, which is when they added the round buttons (I think) and quite a few other visual changes... but PS has always been the kind of Internet Explorer of Script UI for whatever reason. Like for example how Palette window type has been broken for like 10 years I think. When I first bumped into this "buttons with rounded/straight corners" issue I just let it go because it didn't seem worth it to struggle with it since that's how it is in the application preferences and built in scripts as well... Which by the way hint heavily that the "primary" set of buttons should be rounded, I think that's where I got it from. I took fresh a look at it, but couldn't come up with any kind of workaround, other than maybe using iconButton with a different image per button, which probably isn't worth it, — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to this thread.

[schroef]

That is indeed great workaround, i could make an very simpe png and make it binary. This will tax the file size quite a lot though :(

[joonaspaakko]

It's going to cause you way less of a headache if you leave it be. Since all PS CC SUI dialogs suffer from the same issue, including application preferences... I don't think anyone is going to care as much as you do right now :)

You're going to have heck of a time generating images if you want localization on them... And the filesize... I have no experience with this in SUI, but how would the images show up on high dpi screens...

[mcsinc]

I store them locally but agree with you entirely about people caring unless you want specific icons or a look to the interface.

…

Sent from my iPhone

On Jan 16, 2022, at 3:35 PM, Joonas Pääkkö ***@***.***> wrote:  It's going to cause you way less of a headache if you leave it be. Since all PS CC SUI dialogs suffer from the same issue, including application preferences... I don't think anyone is going to care as much as you do right now :) You're going to have heck of a time generating images if you want localization on them... And the filesize... I have no experience with this in SUI, but how would the images show up on high dpi screens... — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.

[schroef]

Im sort of glad it show now only rounded buttons for the main dialog. Still would love to know what triggers that. As like you mentioned the preference dialog of photoshop also shows rounded buttons for the main functions and squared for the tabbed section and its buttons

[joonaspaakko]

My understanding is that PS finds the first occurrence of a button with the name or text = ok or cancel, which define the defaultElement and cancelElement, and based on the location of that first ok or cancel button any sibling buttons become rounded. That's how I see it. I'm pretty sure the javascript tools guide pdf has a little about these buttons. Not about the PS specific quirk, but about the default and cancel buttons in general.

• I can't remember if it's all siblings or if I even ever tested that, but it's possible it's not... Just given that radiobuttons form a group with their immediate siblings and if there's any other item between, it breaks into another group. This could work similarly for all I know.
• I actually forgot to properly test how localization affects this, if at all. Your example code at the top seems to suggest localization was irrelevant.