Toggling Outline

[Tes3awy]

When I toggle the outline from extension icon on the right side, this happens:

However; When I toggle the outline panel position twice, it becomes normal. Any Idea why this happens?

[Hirse]

Does this happen everytime (after starting Brackets)?
Does resizing the window help?

@pelatx Could this be related to your Autohide feature?

[pelatx]

I do not know. It could be related.

But the truth is that something similar has not happened to me. And I use the extension constantly.

Apart from all the autohide testing when I wrote it, I tried again on a clean installation and I could not reproduce this issue.

It would be nice to know the versions used and also the other extensions installed.

[Tes3awy]

@Hirse Resizing window does not help.

[pelatx]

@Tes3awy, can you provide more information?

What version of Brackets and Outline do you use?

Before enable Outline with the toolbar button, does Brackets look normal? Or is the scrollbar of the editor also separated from the toolbar as in the captures?

Being the Outline as seen in the captures, what happens if you enable the autohide feature?

[FrenchMajesty]

Hey, I have a similar error. When this plugin is active and I open Brackets I get a white space on the left side of my Brackets window. I tried resizing but it does not affect it.
The only way for me to use this plugin without this visually impairing bug is to disable it, then restart Brackets and then re-activate it.

The same thing happens every time I have to open & close Brackets.

[pelatx]

@FrenchMajesty, I see in the screenshot that the buttons of the Toolbar are on the Sidebar bottom, which extension is it?

Do you have the autohide feature enabled? What happens if you activate it (in the Wiew menu) when Brackets is in that state?

[Hirse]

@FrenchMajesty Your Brackets looks fairly different from the standard, so it would be really great if you could give a list of your installed and activated extensions.

@pelatx Thanks for watching this issue. 👍

[Tes3awy]

I have the following extensions installed:

• Autoprefixer
• Beautify
• Brackets Icons
• Changing Tags
• Display Shortcuts
• Emmet
• Documents toolbar
• HTMLHint
• HTML Skeleton
• Indent Guides
• Lorem Ipsum
• Special HTML Characters

[pelatx]

No problem @Hirse. ☺️

I have reproduced something similar to what happens to @Tes3awy. Although with an extension that is not on his list.

I think this problem happens when another extension resizes .content after the outline does it. The issue seen in the screenshot is done when the position of the toolbar is changed by the test extension I have installed.

This basic test is done getting back to a previous commit to the autohide feature, since it does not seem related to me.

[Hirse]

That makes sense.

Which extension did you find that causes issues?
Is there any resize event we could listen for?

[pelatx]

Extensions Toolbar Reposition

I've thought about listening to all the .content resize events. Determining when they finish completely and then checking if the Outline is visible and in the right side position.
And if so, check if .content have the right size for the Outline, acting accordingly.

[Hirse]

Maybe this could help: https://github.com/que-etc/resize-observer-polyfill

Then again, if every extension were to do it, we would end up in a state of permanent resizing.
Ideally, Brackets would expose an API for this, but I doubt we could get all extension updated, since many have not been changed in years.

[Tes3awy]

I have to add this, however, I don't think this is a solution. I have updated Brackets to Release 1.10 build 1.10.0-17425. And since then, I have been using the extension very well.

[Hirse]

@Tes3awy Are you saying you are not experiencing this with 1.10?
Do you still have the same list of extension installed?

[Tes3awy]

@Hirse Yes, I confirm that I don't experience the problem anymore after updating Brackets. I still have the same list of extensions though. That's why I said in a comment earlier that I don't think that this is a solution for the problem.

[pelatx]

It's very strange. Perhaps the extensions are loaded in another order for some reason in this new version.

Yes @Hirse. I agree. Only if each extension takes the responsibility of checking if it is really necessary to make a resize, this would be viable I think.

I've been taking a look. About listening for resize events ... well, it looks like these are not being emitted. Surely a library like the one you said could help.

But yesterday I thought a different approach. What if we check in a time interval if ".content" has the proper dimensions (only if the Outline is showing) and we only make a resize if necessary.

I wrote a first version and this does the job, but I still have to test it well. Something like this:

define(function (require, exports, module) {
   "use strict";

   var monitor;

   function checkContent() {
       var toolbarPx = $("#main-toolbar:visible").width() || 0;
       var outlinePx = $("#outline").width() || 0;
       if ($(".content").css("right") !== (outlinePx + toolbarPx + "px")) {
           $(".content").css("right", (outlinePx + toolbarPx + "px"));
       }
   }

   function start() {
       monitor = setInterval(checkContent, 3000);
   }

   function stop() {
       clearInterval(monitor);
   }

   module.exports = {
       start: start,
       stop: stop
   };
});

After that, I call start inside showOutline() and stop inside hideOutline(). What do you think about it?

[Hirse]

Yes, that sounds possible. Would this still work if another extension adds a panel like the outline?

[pelatx]

I think not.

On the right side you mean? Then I think even Brackets would be unusable. Or little usable, at least.