no JS9 toolbar

[SpheMakh]

See screenshot

[o-smirnov]

Yikes where has the menu gone ("File" is there, oddly enough).

@ericmandel, are there any recent changes that could have caused this?

[ericmandel]

There shouldn't be any breaking changes like that!

[ericmandel]

What does the Javascript Console say? Are there errors?

[o-smirnov]

Nothing criminal on the console, no errors. And I tried rolling back to JS9 2.5, same lack of menu. So there's something I must have broken on this end to make it display like that... but what would do it?

[o-smirnov]

OK, this is interesting -- it's only in Chrome that we have the problem. Displays fine in Firefox for me.

[ericmandel]

That sounds like a caching problem

[o-smirnov]

Cleared cache, reloaded, same problem...

[ericmandel]

There is a JS9.globalOpts.menubar property that is an array of the menus that should be displayed in the menubar:

    menuBar: ["file", "edit", "view", "zoom", "scale", "color", "region", "wcs", "analysis", "help"],

What's its current value, and what happens if you put "edit" first, for example? Does it now only show the Edit menu?

[ericmandel]

If you go into the debugger, and click Elements, you should be able to find the container for the menubar, which should look something like this:

[o-smirnov]

All present and accounted for. Just shy about showing themselves. :):

[o-smirnov]

Ah but wait, if I drag the cursor over the elements, the debugger shows me their location. Look at this, the menu's gone vertical (and mostly obscured by the main display):

[o-smirnov]

width="0" on JS9MenubarContainer looks suspicious, no?

[ericmandel]

Yup, that doesn't sound good. You should be able to disable or change that value ... in the right hand side ...

[ericmandel]

Use the styles editor:

[ericmandel]

btw, you should always be clearing the cache fully when you make a new test .... Chrome is maddening about caching and 1/2 hour later you find you've been using a cached file.

So this still still could be a CSS contention that I did and you picked up and never unloaded ...

[ericmandel]

And on the off-chance you don't know this ... when the Chrome debugger is loaded, press and hold the reload button to see this beautiful menu ... you want the empty cache and hard reload ...

[o-smirnov]

I did not know this, thanks! Very useful -- doesn't solve the problem alas.

Can't find width under the Styles editor. I can edit it directly in the Elements display, but it doesn't do anything.

[ericmandel]

It looks to me like you are setting the width of the menubar using a calculation "known only to yourself":

Can you check what calc is doing? This would be in the menubar's data-width property right in the div element ...

[o-smirnov]

Ah, well spotted. That was part of my auto-calculating layout code I laboriously developed a while back... That calc is returning -200px so I guess it's entitled to stick to 0. Sorry, my bad!

Can't understand why or how this worked before (or works in Firefox...)

[ericmandel]

Can't understand why or how this worked before (or works in Firefox...

Because CSS remains, at its core, total freaking black magic, with concrete results at the whim of browser makers.

Are we fixed then?

[ericmandel]

P.S. What is calc anyway? Is that a standard CSS construct or something you developed, perhaps using 3rd party sw? It looks pretty useful ...

[o-smirnov]

OK I found it!

And yes, calc is standard CSS these days. It is very useful. It lets me put stuff like this at the top:

    --total-height: 95vh;
    --total-width: 98vw;
    --statusbar-height: 18px;
    --colorbar-height:  40px;
    --menubar-height:   36px;
    --statusbar-rebin-height: 18px;
    --tools-padding:    5px;
    --horizontal-padding: 5px;
    --zoom-vertical-padding: calc(var(--statusbar-height) + var(--colorbar-height) + var(--menubar-height));
    --rebin-vertical-padding: calc(2*var(--tools-padding) + var(--statusbar-rebin-height));

    --js9-rebin-size: calc((var(--total-height) - var(--rebin-vertical-padding))/3);
    --js9-zoom-width: calc(var(--total-width) - var(--horizontal-padding) - var(--js9-rebin-size));
    --js9-zoom-height: calc(var(--total-height) - var(--zoom-vertical-padding));
    --plugin-size: var(--js9-rebin-size);
    --colorbar-width: calc(var(--js9-zoom-width) - 64px);

...and then use these computed dimensions in the DIV styles to achieve a JS9 layout that fits the browser window perfectly.

When it works, it's great. When it doesn't, it is, as you noted, a complete festering bloody rat king.

So the problem here was: turns out the calc syntax requires whitespace around + or - operators, but not around * and /. Why? Well just because! And you can see I missed a space above. Firefox was being lenient, Chrome was being a CSS Nazi.

Sorry for the bother, this was entirely my problem. Wouldn't have found it without you though!

[ericmandel]

Great, I'll store this one in the bank for when I screw up and inadvertently nail your project to the wall!

Thanks for calc, our own developing voyager app (meant to be a beautiful ds9 replacement, built on top of js9, available before Lynx launch ... I hope) will need that sort of capability.