Toolbar on top disapeared in Atom 1.7

[abdelouahabb]

After updating Atom, Toolbar disapears sometimes, I had to make in on the bottom (position-bottom), or to make it re-appear in the top, I have to reload Atom.

[jerone]

Please provide some more information:

1. Can you provide some clear steps to reproduce this issue.
2. Screencast.
3. Any console errors?
4. Can you confirm that you are running the latest version of this package.
5. Which theme do you have active?
6. Any conflicting packages?
7. Which tool-bar plugins have you installed?
8. Also, you mentioned running Atom 1.7, which is actually not released. I'm running 1.7-beta0 and not having any issues.

[abdelouahabb]

1 - I deleted the beta, reinstalled the normal 1.6, this happened in a way I cant reproduced it, It happened while I was editing my code on python (while I was running it using Script plugin). 2 - The plugin is https://atom.io/packages/tool-bar-atom. 3 - The console dident give any error abour the toolbar, here is what I get everytime I run Atom

Loading Emmet extensions from ~/emmet
emmet.coffee:125 Emmet: no such extension folder: C:\Users\Abdelouahab/emmet
minimap-element.js:893 ::shadow pseudo-element is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.
C:\Users\Abdelouahab\AppData\Local\atom\app-1.6.0\resources\app.asar\src\config.js:669 'open-in-browsers.defBrowser' could not set the default. Attempted default: ["Chrome"]; Schema: {"title":"Default Browser","type":"string","default":["Chrome"]}
index.js:52 Window load time: 4901ms
C:\Users\Abdelouahab\AppData\Local\atom\app-1.6.0\resources\app.asar\src\text-editor-component.js:982 /deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.

4 - Both the plugin and the toolbar are running the latest version (1.3.0 for the plugin, 0.4.0 for the toolbar) (I always update the packages when available). 5 - I am using Atom Dark with Atom Monokai. 6 - I dont see any error on the console about conflicting.

As I said, I removed the beta, got the bug, removed it, installed a clean 1.6 and got it again, I will give more information as fast as I reproduce the bug.

(Saw thatin the 1.6, there a new Toolbar API, maybe this is the reason ?)

[jerone]

2 - The plugin is https://atom.io/packages/tool-bar-atom.

Looking through the code I don't see anything weird.

3 - ... here is what I get everytime I run Atom...

This doesn't seem related.

Saw thatin the 1.6, there a new Toolbar API, maybe this is the reason ?

You mean the new Top and Bottom Bar API, which shouldn't be an issue as those panels are always visible.

I'm wondering if you can reproduce the issue with other tool-bar plugins too... Tool Bar Main for example.

[abdelouahabb]

Right now I am using Atom (1.6), and it has not reproduced it yet, what happened exactly, is that the toolbar got in the bottom without icons, like this picture (i photoshoped it)

I had to choose explicitly bottom to see the toolbar again with the icons in the bottom, and when I choosed top, the same problem happened, my bad practice was to relaunch Atom, I should check the console error or make a screencast.

[abdelouahabb]

@jerone finally the bug happens when you toggle the sidebar, to make it back, you just run the dev tools, I made a video:

https://youtu.be/4diOY3qtdig

[jerone]

Thank you for the video, that helped a lot.

Confirmed! Atom 1.7.0-beta0

For it to reproduce one need to have the Dev Tools open and indeed toggle the tree-view.

What seems to happen is that the whole UI shifts up. I've seen that happen before long time ago, also in combination with Dev Tools open. The issue disappeared many versions ago.

This doesn't seems to be an tool-bar issue, but a combination of using different API's.

I'm going to do a quick search for a similar issue at Atoms' repo... Couldn't find anything for now.

[jerone]

@simurai As UI expert, maybe you have some insides in this...

[abdelouahabb]

Ah, thank you, and it is the same thing on Atom 1.6 stable.

[jerone]

Interesting: disabling the display: flex style on atom-workspace restores the layout:

[abdelouahabb]

Maybe it is because it gains space, and enable again the toolbar, tried it here and it hides the script-console, which make extra space and make the toolbar appear again.

[simurai]

Hmm.. odd, can't reproduce it by

• opening DevTools
• and toggling tree-view

Also, when I toggle flexbox on atom-workspace, it behaves differently.

Can you also reproduce it on a Mac (if you have access to one)?

And does the header have a computed height?

[jerone]

Can you also reproduce it on a Mac (if you have access to one)?

No, sorry don't have access to a Mac.

And does the header have a computed height?

Yes, exactly the same as your screenshot; 39px: In the screenshot also shows that the arrow on the Dev Tools tooltip is cut off, because the Tool Bar is pushed under the Menu Bar.

[jerone]

I can now also confirm this issue on Windows 8.1 Atom 1.6.0

Another interesting thing is that it only happens in some range of window sizes:

Window size x/y	Reproducible
800x400px	Yes
1000x500px	Yes
1000x600px	No
1100x500px	Yes
1100x550px	Partly overlapping
1100x600px	No
1200x600px	No

Width doesn't seem to have any effect. It seems to happen only between height 500 and 600 pixels. It seems to happen only on windows lower then 500 pixels, and between 500 - 600 pixels it happens in stages.

[simurai]

only between height 500 and 600 pixels

Interesting. I just tried it on Win and still can't reproduce it.

Could it be a package that you both have installed and I don't?

[abdelouahabb]

So this is why enabling/disabling dev tool made the toolbar appear again, this is making the initial height that make it appear.

[jerone]

So this is why enabling/disabling dev tool made the toolbar appear again, this is making the initial height that make it appear.

Seems so.

Could it be a package that you both have installed and I don't?

I'll later try it with a clean profile.

[jerone]

It seems to happen only between height 500 and 600 pixels.

That happens when you do two things at the same time. Concluded from the table, that line should of course read "It seems to happen only on windows lower then 500 pixels, and between 500 - 600 pixels it happens in stages."

So this is why enabling/disabling dev tool made the toolbar appear again, this is making the initial height that make it appear.

Weird; when I resize the Dev Tools to almost no height it still doesn't reappear, but when I close the Dev Tools it does appear.

Could it be a package that you both have installed and I don't?

I'll later try it with a clean profile.

Just tried on a clean profile with only Tool Bar and Flex Tool Bar and I can't reproduce this issue anymore. @abdelouahabb If you've got time can you find similar installed packages between yours and mine.

[abdelouahabb]

Here is what I have using apm list :

` Built-in Atom packages (89) ├── about@1.3.0 ├── archive-view@0.61.0 ├── atom-dark-syntax@0.27.0 ├── atom-dark-ui@0.51.0 ├── atom-light-syntax@0.28.0 ├── atom-light-ui@0.43.0 ├── autocomplete-atom-api@0.10.0 ├── autocomplete-css@0.11.0 ├── autocomplete-html@0.7.2 ├── autocomplete-plus@2.25.0 ├── autocomplete-snippets@1.10.0 ├── autoflow@0.27.0 ├── autosave@0.23.0 ├── background-tips@0.26.0 ├── base16-tomorrow-dark-theme@1.1.0 ├── base16-tomorrow-light-theme@1.1.1 ├── bookmarks@0.38.2 ├── bracket-matcher@0.79.0 ├── command-palette@0.38.0 ├── deprecation-cop@0.54.0 ├── dev-live-reload@0.47.0 ├── encoding-selector@0.21.0 ├── exception-reporting@0.37.0 ├── find-and-replace@0.197.4 ├── fuzzy-finder@0.94.0 ├── git-diff@0.57.0 ├── go-to-line@0.30.0 ├── grammar-selector@0.48.0 ├── image-view@0.56.0 ├── incompatible-packages@0.25.0 ├── keybinding-resolver@0.33.0 ├── language-c@0.51.1 ├── language-clojure@0.19.1 ├── language-coffee-script@0.46.0 ├── language-csharp@0.11.0 ├── language-css@0.36.0 ├── language-gfm@0.84.0 ├── language-git@0.12.1 ├── language-go@0.42.0 ├── language-html@0.44.0 ├── language-hyperlink@0.16.0 ├── language-java@0.17.0 ├── language-javascript@0.110.0 ├── language-json@0.17.4 ├── language-less@0.29.0 ├── language-make@0.21.0 ├── language-mustache@0.13.0 ├── language-objective-c@0.15.1 ├── language-perl@0.32.0 ├── language-php@0.37.0 ├── language-property-list@0.8.0 ├── language-python@0.43.0 ├── language-ruby@0.68.0 ├── language-ruby-on-rails@0.25.0 ├── language-sass@0.45.0 ├── language-shellscript@0.21.0 ├── language-source@0.9.0 ├── language-sql@0.20.0 ├── language-text@0.7.0 ├── language-todo@0.27.0 ├── language-toml@0.18.0 ├── language-xml@0.34.2 ├── language-yaml@0.25.1 ├── line-ending-selector@0.3.0 ├── link@0.31.0 ├── markdown-preview@0.157.2 ├── metrics@0.53.1 ├── notifications@0.62.1 ├── one-dark-syntax@1.2.0 ├── one-dark-ui@1.1.9 ├── one-light-syntax@1.2.0 ├── one-light-ui@1.1.9 ├── open-on-github@0.41.0 ├── package-generator@0.41.0 ├── settings-view@0.232.3 ├── snippets@1.0.1 ├── solarized-dark-syntax@1.0.0 ├── solarized-light-syntax@1.0.0 ├── spell-check@0.65.0 ├── status-bar@0.83.0 ├── styleguide@0.45.1 ├── symbols-view@0.110.1 ├── tabs@0.91.3 ├── timecop@0.33.0 ├── tree-view@0.203.2 ├── update-package-dependencies@0.10.0 ├── welcome@0.33.0 ├── whitespace@0.32.1 └── wrap-guide@0.38.1

C:\Users\Abdelouahab.atom\packages (30) ├── angularjs@0.3.4 ├── atom-beautify ├── atom-html-preview@0.1.19 ├── atom-monokai@0.10.1 ├── atom-ternjs@0.13.2 ├── autoclose-html@0.23.0 ├── autocomplete-paths@1.0.2 ├── autocomplete-python@1.7.2 ├── color-picker@2.1.1 ├── django-templates@0.5.0 ├── emmet@2.4.2 ├── file-icons@1.6.18 ├── highlight-selected@0.11.2 ├── indent-guide-improved@1.4.5 ├── jshint@1.8.3 ├── language-django@0.1.1 ├── language-javascript-jsx@0.3.7 ├── linter@1.11.4 ├── linter-pep8@1.2.1 ├── minimap@4.21.0 ├── open-in-browsers@0.0.12 ├── pretty-json@0.4.1 ├── react@0.14.2 ├── script@3.6.3 ├── semantic-ui@1.0.7 ├── symbols-tree-view@0.11.0 ├── tool-bar@0.4.0 ├── tool-bar-atom@1.3.0 ├── tool-bar-config@0.0.2 └── tornado-templates@0.2.0 `

[jerone]

Not many similarities:

• atom-beautify
• color-picker@2.1.1
• file-icons@1.6.18
• linter@1.11.4
• minimap@4.21.0
• tool-bar@0.4.0

[jerone]

I've traced it down to color picker package.

@abdelouahabb Can you confirm that disabling the color picker package solves this issue?!

[abdelouahabb]

@jerone CONFIRMED! it seems color picker was the conflicting extension, I tried this: I reloaded Atom with color picker disabled, and I tried to enable it without reloading Atom, and it has caused the bug without reloading!

[abdelouahabb]

@jerone Update, here is a tip: this bug will not happen if you run the color picker once.

Weird!

[jerone]

CONFIRMED!

That's great news! Found the cause, now need to find a solution.

It's getting late, but this might be related: https://github.com/thomaslindstrom/color-picker/pull/176

[abdelouahabb]

Finally it is all related (the left sidebar ;) )

So as a recommandation (maybe weird recommandation), users have to run at least once the color picker because they start working.

[jerone]

There's an element with class ColorPicker causing issues:

[abdelouahabb]

If the bug stopped, because the node doesent disapear once you dont need the color picker! it stays in the DOM !

[jerone]

It looks like it needs a default top & left value of zero for the position absolute to work.

[abdelouahabb]

What if you add it to the default Atom CSS configuration?

[simurai]

Nice narrowing it down to color-picker. I still can't reproduce it, but I can imagine that it might cause problems if it gets pushed up too high.

@abdelouahabb What if you add it to the default Atom CSS configuration?

Does

.ColorPicker {
  top: 0;
  left: 0;
}

in your styles.less file fix it for you?

[abdelouahabb]

@simurai That did the trick , the bug is gone after applying the CSS !

@jerone @simurai maybe this is hacky, since the CSS is a global variable, why not putting is temporary in this extension?

https://github.com/abdelouahabb/tool-bar/blob/master/styles/tool-bar.less#L151

[simurai]

Great.. :+1: ok, there is now a PR https://github.com/thomaslindstrom/color-picker/issues/179 that should fix it.

[abdelouahabb]

Ah, that's wonderful then :+1: :dancers:

[jerone]

It looks like it needs a default top & left value of zero for the position absolute to work.

It was late yesterday, but after checking out @simurai's PR I can not confirm the fix working:

Hopefully I have some time later today to find a working fix.

[simurai]

Good news: I can reproduce it! :tada:

A new clue. It doesn't happen if the tree-view roots are collapsed. a.k.a when there is nothing to scroll.

[jerone]

Good news: I can reproduce it! :tada:

That's definitely good news! So it's not Windows only.

I've taken some time to find a solution that works for me, which is to replace the visibility properties with display none/block.

Maybe you can confirm that that is a working solution...

[jerone]

Ref commit https://github.com/jerone/color-picker/commit/335fce538b09064eea93483eefc14e74906fdb4a

[simurai]

replace all visibility properties with display none/block.

:+1: Yes, that works for me too. I guess the transition would be lost, but maybe acceptable? Or it might could be replaced with a keyframe animation.

[simurai]

What also works for me is to add overflow: hidden; to the parent element. But of course, that would cut off other packages like autocomplete.

[jerone]

I guess the transition would be lost

According to the Dev Tools the original transition didn't even work:

I'm not sure how to proceed now :confused:

[jerone]

I created https://github.com/thomaslindstrom/color-picker/pull/180. It fixes this problem, but permanently disables the possibility for an open and close animation. I believe that's the best solution.

[abdelouahabb]

@jerone what if you used -webkit- prefix?

[jerone]

@jerone what if you used -webkit- prefix?

Use the -webkit- prefix for what?

[siemato]

in my case color picker wasn't the cause. I completely removed all Atom-related files, got the newest release and installed tool-bar on this brand new version. Tool-bar still didn't show. The Problem is occurring on a Mac with both v1.6 and v1.7

[jerone]

@siedentm Are you sure you've got a plugin installed?

[siemato]

it's a clean install, i removed all plugins and settings. all of them. then i installed tool-bar and it didn't work

i removed the following folders: users/user/.atom users/user/Library/Application Support/Atom

then i removed the Atom Application itself, downloaded the current release and tried it. i have no idea how to replicate it, i never had tool-bar installed before, i just wanted to try it and it didn't work ever

[jerone]

@siedentm Can you open another issue with clear steps what you have done and how we can reproduce it.

[siemato]

reading and thinking is a high value skill ;) ignore me. you were right, no plugins installed. I realized that the toolbar was shown properly but had no items in it when checking the code.

By itself this package shows an empty tool bar. To add buttons and spacers to the tool bar, follow the instructions below.

I feel like banging my head against a wall... I need a big red warning at the top of the readme :(

[abdelouahabb]

@jerone using the webkit prefix, maybe it will not be rejected by Atom ? (-webkit-transition instead of transition)

Here it works normal even without the vendor prefix

[simurai]

According to the Dev Tools the original transition didn't even work:

Right, it seems the s value is needed to make it valid:

- transition: opacity .15s, visibility 0 .15s;
+ transition: opacity .15s, visibility 0s .15s;

[jerone]

Yeah or removing the 0 works too.

But again, I didn't work and looking at the logs it was there for a long time. Nobody noticed or complained about it. Anyways, thats way out of the scope of this issue.

If someone got time to test https://github.com/thomaslindstrom/color-picker/pull/180 and upvote it, maybe it can be merged to fix this issue.