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.

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

Unreadable buttons in alert() and prompt() dialogs [$100] #433

Closed
xverges opened this issue Feb 9, 2013 · 31 comments
Closed

Unreadable buttons in alert() and prompt() dialogs [$100] #433

xverges opened this issue Feb 9, 2013 · 31 comments
Assignees

Comments

@xverges
Copy link

xverges commented Feb 9, 2013

On Windows XP, the alert() and prompt() windows have hardly readable buttons.
On Windows 7, it works properly.
https://groups.google.com/d/topic/node-webkit/mByrzqMeMYU/discussion

nw small_alert
nw alert_transparent_regions

There is a $100 open bounty on this issue. Add to the bounty at Bountysource.

@ButzYung
Copy link

I can confirm similar problem on Vista as well.

@Mithgol
Copy link
Contributor

Mithgol commented Feb 10, 2013

Probably depends on the theme set in the system.

For example, that's the result for the classic theme on Windows XP:

screenshot

Also, what's your node-webkit version? (The most recent version does not seem to display “Alert” or “Prompt” in the title of those dialog windows, as far as I see.)

@ghost
Copy link

ghost commented Mar 22, 2013

I use node-webkit 0.4.2 and Windows 7 64bit, the screen of code like:

    window.onbeforeunload=function(event){
        return "alert";
    }

looks like this:
QQ 20130322131024

@ghost
Copy link

ghost commented Apr 25, 2014

This issue still exists with latest node webkit build and windows xp. (not tested on other windows versions)...

@mattroyer
Copy link

This issue also exists with the latest node webkit build and Window 7. I am using it for a confirm dialog .

@TooBug
Copy link

TooBug commented Jul 12, 2014

Same issue (nw 0.8 + xp + confirm and alert). Any update?

@CarmelK
Copy link

CarmelK commented Aug 5, 2014

Same issue on windows 7 32bit and node-webkit v0.10.1-win-ia32

@AndryBray
Copy link

Same problem with windows xp + nw 0.10.5
works well with windows 7 Home Premium instead.

@CarmelK
Copy link

CarmelK commented Sep 18, 2014

It worked much better on pc when I used 'window.alert' instead of just 'alert'.

@pVesian
Copy link

pVesian commented Nov 12, 2014

Bug is still present (NW v0.10.5, Windows 7 Pro). Please note that with alert() and confirm() (same problem with window.alert() and window.confirm()):

  • pressing "enter" key does not trigger anything
  • clicking the closing arrow does not trigger anything

@CarmelK : Not on Win 7 Pro here.

@Mithgol
Copy link
Contributor

Mithgol commented Nov 12, 2014

Now that I think of that, alert and window.alert is the same thing:

(screenshot)

Therefore there's no reason for window.alert to behave any better.

@ghost
Copy link

ghost commented Dec 1, 2014

Just to add - this is a problem on Win7 if you disable Aero - it seems OK (at least for me) if you have Aero enabled - checked in latest version (W764 here)

@tommoor tommoor changed the title Unreadable buttons in alert() and prompt() windows (Windows XP) Unreadable buttons in alert() and prompt() dialogs Dec 16, 2014
@khoin
Copy link

khoin commented Jan 3, 2015

I have the same problem here on Windows 7 Basic 32-bit. Since it's Basic, there's no Aero mode.

pic

@pVesian
Copy link

pVesian commented Jan 3, 2015

@rogerwang Any idea what could be causing this? It's realy disturbing and dates back 2 years...

@rogerwang
Copy link
Member

will look to fix it soon.

@yangg
Copy link

yangg commented Feb 25, 2015

@rogerwang When would you like to look into it ?

@goshatch
Copy link

goshatch commented Mar 9, 2015

Hi guys, any news on this? :)

@sanderboom
Copy link
Contributor

Quite a weird issue, and really disturbing. Any ideas?

@xueeinstein
Copy link
Contributor

Just as @Mithgol said, the real problem is about the compatibility of chromium of old windows system. As you know, such basic javascript code is handled by chromium module itself.

Anyway, both alert() and prompt() dialog work well on my win7-64bit.
Suggestion: try to build nw.js locally. Maybe on different .NET version it works differently.

@ghost
Copy link

ghost commented Mar 13, 2015

Note: it has NOTHING to do with "older systems", there are plenty of 'newer systems' which run Windows7 without Aero (some software doesn't work well with it - some hardware isn't good enough and as someone said, there are versions of W7 which don't have it!!)

I've been doing a bit of work with a similar project to nw.js - atom-shell - and I came across a comment by the developer who was explaining that all the "dialog" windows (generated by alert, confirm, prompt) have to be coded manually per-platform and that was something he wouldn't be doing because there were easy alternatives such as http://tristanedwards.me/sweetalert and http://fabien-d.github.io/alertify.js/ - more here too http://webuilddesign.com/6-javascript-tools-to-create-cool-user-alert/ ...

So I'm in the process of gutting-out all my usage of alert/prompt/confirm as I type - I like the more 'styleable' CSS approach anyway - thought I'd leave this here for anyone who runs into this in future tho

@rogerwang rogerwang changed the title Unreadable buttons in alert() and prompt() dialogs Unreadable buttons in alert() and prompt() dialogs [$100] Mar 13, 2015
@goshatch
Copy link

While CSS-based solutions are great in most cases, in the case of our project we rely quite a bit on the blocking nature of window.confirm, so this is still very much an issue.

@ghost
Copy link

ghost commented Mar 13, 2015

CSS-based alerts offer a variety of 'modal' options - the simplest of which
is throwing a transparent div over the whole screen which traps
clicks/keypresses and anything else a user might throw at it whilst the
dialog is shown

The only real downside to a CSS dialog (much like a CSS contextmenu or a
CSS FileSelector or whatever else you might make) is that you're locked
inside the Window (a particular problem for context menus but not really
here?)

On 13 March 2015 at 02:50, Gueorgui Tcherednitchenko <
notifications@github.com> wrote:

While CSS-based solutions are great in most cases, in the case of our
project we rely quite a bit on the blocking nature of window.confirm, so
this is still very much an issue.


Reply to this email directly or view it on GitHub
#433 (comment).

@mbrami76
Copy link

It's not just "Aero"... It's Win 7 presentation styles (not sure what is going to happen on winXp). By disabling them from MyComputer>Properties>Advanced>Performance will make the dialog buttons visible, but your desktop will look like Win95.

Workaround
Just disable visual styles only for your application. Get your launcher properties page, go to tab "Compatibility" and check "Disable visual styles" under "Settings" group. Labels may be different, since my OS is not in english. By doing so, only your app will run without Win7 visual styles (this will only affect window borders and titlebar).

Here's my settings and result:
image

@pVesian
Copy link

pVesian commented Apr 28, 2015

I'll try that. But that doesn't fix the problem for the users of my app,
does it?

2015-04-28 11:24 GMT+02:00 mbrami76 notifications@github.com:

It's not just "Aero"... It's Win 7 presentation styles (not sure what is
going to happen on winXp). By disabling them from
MyComputer>Properties>Advanced>Performance will make the dialog buttons
visible, but your desktop will look like Win95.

Workaround
Just disable visual styles only for your application. Get your launcher
properties page, go to tab "Compatibility" and check "Disable visual
styles" under "Settings" group. Labels may be different, since my OS is not
in english. By doing so, only your app will run without Win7 visual styles
(this will only affect window borders and titlebar).


Reply to this email directly or view it on GitHub
#433 (comment).

@mbrami76
Copy link

@pVesian for current users they should do it by themselves, or you could ship a patch with a windows registry update to permanently adopt the compatibility mode just for your application (see this for more info: http://www.verboon.info/2011/03/running-an-application-as-administrator-or-in-compatibility-mode/). Unfortunately I couldn't find any command-line switch or option to enable this, and if anyone has info on this it would be highly appreciated.

@ghost
Copy link

ghost commented Apr 28, 2015

Suggesting people hack the registry/change system settings to make dialogs
work in one application is crazy - third-party users aren't going to be
pleased you changed their system settings and in-house applications making
such a change could affect other applications by doing so.

Using CSS-based dialogs is a better solution because it's making proper
user of the platform you're developing on - you have more control over how
things look and behave - it's a proper solution to the problem.

Also - I think nw.js needs to address this properly by either

a - fixing it
b - disabling dialogs (or at least throwing warnings at developers of the
potential issues) - that's the approach which atom-shell has taken in the
same situation

On 28 April 2015 at 16:29, mbrami76 notifications@github.com wrote:

@pVesian https://github.com/pVesian for current users they should do it
by themselves, or you could ship a patch with a windows registry update to
permanently adopt the compatibility mode just for your application (see
this for more info:
http://www.verboon.info/2011/03/running-an-application-as-administrator-or-in-compatibility-mode/
).


Reply to this email directly or view it on GitHub
#433 (comment).

@mbrami76
Copy link

Suggesting people hack the registry/change system settings to make dialogs
work in one application is crazy - third-party users aren't going to be
pleased you changed their system settings and in-house applications making
such a change could affect other applications by doing so.

Totally agree that this is not the way. That's why it's called a workaround. By the way changing the registry the way it is suggested it's not exactly a hack, but a normal operation: every single application you are going to install on windows quite "hacks" the registry, and such a change it is supposed not going to affect any other application, since it is application-specific.

Using CSS-based dialogs is a better solution because it's making proper
user of the platform you're developing on - you have more control over how
things look and behave - it's a proper solution to the problem.

On this I do not agree, because you are assuming that any app is consistently more robust than the platform: I don't think this is realistic. Alerts and Confirms are designed to be native to the OS (and not the application) because are supposed to be a bit more reliable and robust.

In my opinion the proper solution is to fix the issue and continue using system dialogs.

@ghost
Copy link

ghost commented Apr 28, 2015

Just to be clear, the reason this issue exists is because those dialogs are
NOT supported/provided by Chromium (I believe?) - they have to be
implemented manually??

In nw.js there is this issue and it's been there a LONG time - in
atom-shell they've simply not bothered doing it (trying to use them just
throws an error message!)

I'm not entirely sure a browser should be throwing 'OS-style' dialogs at a
user OTHER than the file browser (it's the ONLY OS-native action a person
does within a web-based app) - making everything else 'CSS/HTML/JS'
actually makes a degree of sense because it's consistent across all
platforms

Whatever tho, this bug had been around for a long time - may be around for
longer and even if it's fixed, there's nothing to say similar bugs won't
creep back in future so the wise choice is one which is a permanent fix
surely?

On 28 April 2015 at 21:30, mbrami76 notifications@github.com wrote:

Suggesting people hack the registry/change system settings to make dialogs
work in one application is crazy - third-party users aren't going to be
pleased you changed their system settings and in-house applications making
such a change could affect other applications by doing so.

Totally agree that this is not the way. That's why it's called a
workaround. By the way changing the registry the way it is suggested it's
not exactly a hack, but a normal operation: every single application you
are going to install on windows quite "hacks" the registry, and such a
change it is supposed not going to affect any other application, since
it is application-specific.

Using CSS-based dialogs is a better solution because it's making proper
user of the platform you're developing on - you have more control over how
things look and behave - it's a proper solution to the problem.

On this I do not agree, because you are assuming that any app is
consistently more robust than the platform: I don't think this is
realistic. Alerts and Confirms are designed to be native to the OS (and not
the application) because are supposed to be a bit more reliable and robust.

In my opinion the proper solution is to fix the issue and continue
using system dialogs.


Reply to this email directly or view it on GitHub
#433 (comment).

@rogerwang
Copy link
Member

It will be fixed in the upcoming nw13 version.

@TateHuang
Copy link

nw13 not support NPAPI,while nw12 is still with this bug...this is really disturbing

@rogerwang
Copy link
Member

Close as it's fixed in nw13.

@TateHuang how is NPAPI related to the alert dialog?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests