Autohide rewritten

[pelatx]

Hi.

Another try. :relaxed: Take a look and let me know, please.

There are some issues in 'No Distractions' mode. If you think that it can be merged, I think they are easy to solve.

[Hirse]

Thanks for the new version. I will try to have a closer look as soon as possible.

[pelatx]

This last commit is to fix a couple of things that I forgot.

[Hirse]

I finally got around to try it out. It feels really good, but I did notice the issue with the "No Distractions" mode. Do you think they can be solved easily?

[pelatx]

Have you tried it with all the commits?

It works correctly for me in "No Distractions" mode now. But I did see some time ago that there is an issue with that mode in the Outline without auto-hide.

I'll test it all over again when I can.

[Hirse]

When I enable Auto-Hide and then go to that mode, I have to click the outline area after expanding it by hover to see the actual outline content.

[pelatx]

I can not reproduce that @hirse.

My current installation works correctly. Watch it in this video.

I'm going to test it on a clean installation of Portable Brackets over Windows, to see if this happens.

[pelatx]

I have tested on Windows 10 with a Brackets Portable 1.9 clean installation.

I do not know what may be happening so it does not work for you. :astonished:

[Hirse]

Thanks for the videos. I have tested again and it seems to be a complication with the Sidebar Plus extension that is mention in the original issue about this topic. When I have that extension enabled and set to "click-mode", the outline is only shown empty on hover, but gets content on a click.

[pelatx]

I've been testing it too.

It appears that the Sidebar Plus css overrides the Outline css over .content.

Then the transition end event never occurs and the handler does not return visibility to the Outline.

function exposeOutline() {
        if (!isExposed) {
            $content.bind("transitionend", function () {
                var $outline = $("#outline");
                $outline.css("visibility", "visible");
            });
            hidePlaceholder();
            OutlineManager.showOutline();
            var $outline = $("#outline");
            $outline.css("visibility", "hidden");
            isExposed = true;
        }
    }

The animation is also lost, of course.

I have tried some things but, frankly, I find it difficult to solve unless we disable the animation.

[Hirse]

Thanks for the debugging.

Can we just have the Outline visible all the time? Would that only effect what we see during the expand-transition or also show something when hidden?

Where is the transitionend event coming from? Could we use a namespace like transitionend.outline on the event handler?

Could we set it to visible after a delay instead of listening to the event?

[pelatx]

The fact is that the css for .content transition that defines Sidebar Plus takes precedence over the Outline css and cancels it. Then the Outline transition never happens and the Outline is simply displayed or not, according to the showOutline andhideOutline methods. That answers some of the questions.

Can we just have the Outline visible all the time?

Would that only effect what we see during the expand-transition or also show something when hidden?

Yes, we can. There is no animation, so that's the only way. Playing with visibility is just to soften the animation. This would only affect the expand-transition. In fact, the visivility switches to hidden just before beginning the transition and returns to visible when it ends.

Where is the transition coming from?

Could we use a namespace like transitionend.outline on the event handler?

I have not been able to test too much for now. But I think this will not work because the Outline transition css is missing. If we do not have a transition we do not need to know when it's over, come from wherever it comes from.

Could we set it to visible after the delay instead of listening to the event?

Yes. But I think it does not make sense if there is not going to be any animation.

By adding !Important to the Outline css rules, it results in the correct operation of the Outline. But of course, it disables the rules of Sidebar Plus and It shows well but without animation.

Honestly, all I can think of is giving priority to Outline animation or disabling it. In addition to some crazy and difficult ideas that may not work.

[pelatx]

I fixed it. But with a dirty hack. :unamused:

This removes the sidebarplus-content class just before the Outline transition begins and returns it when it is finished.

Not a very good solution, but it works.

What do you think about it? Do you think I should commit?

[Hirse]

As long as you document it clearly, I am fine with that. 😉

[Hirse]

Thanks for the feature and sorry for the long delay.

[pelatx]

No problem with the delay.

I'm happy to contribute a little. :smiley:

Greetings and thanks.