Fix for issue #1122 #1661

jbalsas · 2012-09-16T10:46:02Z

This pull request provides a possible fix for issue #1122.

It adds resize functionality for the two existing bottom panels ("jslint errors" and "find in files").

Knwon issues

If a panel is resized beyond the main toolbar, it keeps growing. If the mouse is released within the toolbar the panel height is greater than the main view height. When starting the panel resize again, there is an offset between the handler and the panel height due to this.
If both panels are opened, resizing the search panel until both the panels cover the entire editor and keep going causes the same effect as the previous issue.
If both panels are opened, resizing the jslint panel beyond the main toolbar causes the find panel to shift downwards as the first one keeps growing.

This issues could be solved but it will require to introduce some dependencies between panels or dom elements and betwen panels and the toolbar element.

Check search panel visibility to adjust jslint mouse drag position

- Removed old comments

…t-panel-resize Conflicts: src/language/JSLintUtils.js src/search/FindInFiles.js

redmunds · 2012-09-17T17:57:40Z

Thanks for submitting this code. We have an internal milestone that we're trying to hit this week, so I might not get to reviewing this code until next week.

redmunds · 2012-09-26T15:21:39Z

This is cool, but I'm seeing a couple problems with this on Win7. I posted a pic here: https://twitter.com/randyedmunds/status/250976078926077952/photo/1 (Let me know if the resolution got messed up and I can e-mail the pic).

Notice in the upper (JSLint) panel that after increasing the height of the panel, I still see the same number of lines of JSLint errors displayed (with a vertical scrollbar). The number of lines viewed should be increased to fill the height of the panel.

Notice the lower (Find in Files) panel that the number of lines are increased with the height, but on the lower end of the scrollbar, the down-arrow button is mostly off the screen.

…gins Fixed missing toolbar.outerHeight() in _setHeight for jsLint

jbalsas · 2012-09-26T22:34:23Z

Hi!

I think I messed up the jslint results panel resize when doing some cleaning before the pull request... fixed now :)

About the other issue, scrollbars on Mac are somehow subtler so this was harder to spot than on windows. I was using height() to get the toolbars height, which wasn't considering paddings and margins. I've changed it to outerHeight() instead. Please, check it to see if is ok now.

redmunds · 2012-09-27T00:37:24Z

Excellent. Both of the problems mentioned above are fixed. I am noticing another problem with releasing mouse capture. Do this:

Open JSLint panel (it only happens with JSLint panel, either by itself or with FiFs panel)
Drag height up as high as you can (until editor disappears)
Release left mouse button
Now move mouse down over JSLint panel

Results: JSLint panel height starts decreasing as if mouse button was never released, so it seems to still have the capture.

Expected: Obviously, releasing the mouse should stop the drag, but I'm not sure if I like how the entire editor can be covered up. I am wondering if enforcing a minimum height on the editor will fix both problems?

redmunds · 2012-09-27T00:44:02Z

src/styles/brackets_variables.less

@@ -50,5 +50,6 @@

 @z-index-brackets-sidebar-resizer: @z-index-brackets-ui + 2;
 @z-index-brackets-resizer-div: @z-index-brackets-sidebar-resizer + 1;
+@z-index-brackets-bottom-resizer: @z-index-brackets-ui + 2;


@z-index-brackets-bottm-panel-resizer would be more accurate.

will fix...

jbalsas · 2012-09-27T17:59:36Z

I basically thought of this as a temporary fix while getting a crack at the tabbed panel solution discussed in https://groups.google.com/forum/?fromgroups=#!topic/brackets-dev/PqEbuhw7k6c. I feel, that would be the best way to go.

We should of course improve this if it is to be made part of Brackets in the meantime.

About the behavior you saw, I think it only happens when you release the mouse outside the Brackets window (also over the app toolbar). It also happens for the FiFs panel. I'll try to fix this later today.

About enforcing a minimum height for the editor, I did try it, but it didn't convince me at all. There are lots of issues to be addressed for that:

1. Dependencies between panels

We'd need to check the height of all visible panels to get the available space. I didn't want to create any dependencies between panels. Having a utils/Resizer class that tracks all panels could help with this...

2. Resizing the window

With one panel

If we start resizing the whole window... what should happen when the minimum height for the editor is reached? Should the panel shrink to leave place for the editor?

With two or more panels

If we start resizing the whole window, when reaching the minimum height for the editor, should the panels shrink? Should all panels shrink in the same proportion? Ones more than others?

3. Resizing the panels

If we start resizing a panel and the maximum height for all panels is reached, should we stop all resizing or should other panels give height away for or it?

4. Opening panels

If we try to open a panel and there is not enough space for the saved height of the panel, should we set it to the maximum available height? What if no space at all is left?

I think solving all these issues may be a lot of work that could be better spent on the tabbed panel solution if that is the final goal. I'm willing to work in both directions in any case, so just point at what should we do, please :)

redmunds · 2012-09-27T22:09:21Z

This resizing code will still be needed if the tabbed interface is implemented.

Enforcing a minimum height on the editor is just a suggestion for a possible solution, but it's not required. I does not seem to be worth the effort.

But, the mouse not releasing the capture needs to be solved. Can the "dragleave" event be used to release the mouse at the point when mouse exits window?

jbalsas · 2012-09-27T22:36:50Z

I think dragleave is for drag operations, which we aren't really doing. However, jquery .mouseleave() should do the trick.(Note that this is currently also happening for the sidebar...)

I'll check and fix this and refactor the resize as suggested.

jbalsas · 2012-10-01T07:50:33Z

I've created a a new utils/Resizer as discussed.

It scans the DOM on AppInit.htmlReady for ver-resizable and hor-resizable classes and adds the resize handlers for those elements. It expects a top-resizer or bottom-resizer class in the case of vertical resizing to identify where to put the handler (both could work at the same time in the future). The same way, it expects a left-resizer or right-resizer for horizontal resizing. Finally, it also looks for an optional element with a content-resizable class that should be resized at the same time the parent does, to fill the available space.

The process creates a promise that the resizable modules can use to get notifications of the resizing process using the progress method. The associated deferred objetct never gets resolved. It gets notified any time the resize starts, updates or ends. This way, modules can do performance improvements (like the sidebar does, hiding elements when resizing starts), custom resize on progress, or saving preferences and restoring elements when resize ends.

Known Issues

The code works right now for vertical resizing and resizer on top. Bottom vertical resizing as well as horizontal resizing would need small modifications. I think this could be done in future requests.
The scan for classes is triggered on AppInit.htmlReady, and modules can retrieve their resize promises on AppInit.appReady. This prevents extensions to benefit from this and force them to explicitly call makeResizable. We could solve this by triggering the scan on AppInit.appReady instead and create a new event Resizer.ready or AppInit.resizerReady to be triggered afterwards.

redmunds · 2012-10-01T20:37:27Z

Excellent! This is much better. Now that the high-level design is in place, I'm going to do one last review of the code details.

redmunds · 2012-10-01T20:40:55Z

src/language/JSLintUtils.js

@@ -23,7 +23,7 @@


 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, JSLINT, PathUtils */
+/*global define, $, JSLINT, PathUtils, document, window */


It looks like both document and window are no longer used and can be removed

redmunds · 2012-10-01T21:05:55Z

src/utils/Resizer.js

@@ -0,0 +1,200 @@
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */


Copy the Adobe copyright header comment from any other .js file and paste it at the top.

redmunds · 2012-10-01T22:13:31Z

Done with review.

…t-panel-resize Conflicts: src/brackets.js src/language/JSLintUtils.js src/search/FindInFiles.js

redmunds · 2012-10-08T17:36:04Z

@jbalsas I see you pushed some changes since my last comment, so I am just checking to see where we're at with this one. I want to get this change into master so I can use it! Also, there are conflicts with master, so you'll need to merge the latest changes to master to this branch. Thanks.

jbalsas · 2012-10-08T19:14:03Z

@redmunds Yes, I added your final suggestions the other day in London (@peterflynn helped me with those ;)) Please, tell me if there's anything left to add.

I'll merge the changes to master later tonight.

…t-panel-resize Conflicts: src/search/FindInFiles.js

redmunds · 2012-10-08T20:15:41Z

@jbalsas Glad I asked :) Please post a comment with @redmunds when passing something back so I don't wait unnecessarily.

This looks good. 2 very minor other changes:

line 190 of Resizer.js has a typo -- it should be "right" not "bottom".
Totally optional, but do you mind renaming "ver-resizable" to be "vert-resizable", and "hor-resizable" to be "horz-resizable"? Seems much quicker to remember what they're for.

jbalsas · 2012-10-08T20:36:40Z

@redmunds Done and done ;)

redmunds · 2012-10-08T20:43:36Z

Looks good. Thanks for sticking with this one! Merging.

Fix for issue #1122

jbalsas added 7 commits September 7, 2012 20:27

- Basic bottom panel resize behaviour

164ffa8

Combine both panels to get available height.

3b05f42

Check search panel visibility to adjust jslint mouse drag position

- Removed panels coupling

19fa897

- Removed old comments

Merge branch 'master' of https://github.com/adobe/brackets into jslin…

22855c0

…t-panel-resize Conflicts: src/language/JSLintUtils.js src/search/FindInFiles.js

Cleanup vars and comments

e714f38

Fix bug in search panel resize with toolbar height

cbadfc4

Fixed comment indentation

e2ff4ea

ghost assigned redmunds Sep 17, 2012

Use outerHeight() for toolbars height to account for paddings and mar…

9e25576

…gins Fixed missing toolbar.outerHeight() in _setHeight for jsLint

redmunds reviewed Sep 27, 2012
View reviewed changes

jbalsas added 4 commits September 28, 2012 03:17

Resize behavior refactored in utils/Resizer

e853066

Generalization for both resize directions

ea3354c

Added position selection for future resizer position implementations

6a933a3

Comments and clean up

5559cd3

redmunds reviewed Oct 1, 2012
View reviewed changes

jbalsas added 3 commits October 3, 2012 15:39

Cleanup changes for pull request review

c561ef0

Merge branch 'master' of https://github.com/adobe/brackets into jslin…

2044846

…t-panel-resize Conflicts: src/brackets.js src/language/JSLintUtils.js src/search/FindInFiles.js

Final comments cleanup

8f1cfb2

Merge branch 'master' of https://github.com/adobe/brackets into jslin…

aab262d

…t-panel-resize Conflicts: src/search/FindInFiles.js

Rename "ver" and "hor" for easier to remember "vert" and "horz".

ab2645a

redmunds added a commit that referenced this pull request Oct 8, 2012

Merge pull request #1661 from jbalsas/jslint-panel-resize

9de1238

Fix for issue #1122

redmunds merged commit 9de1238 into adobe:master Oct 8, 2012

jbalsas mentioned this pull request Oct 11, 2012

Sidebar resize refactorization #1811

Closed

jbalsas mentioned this pull request Nov 15, 2012

Drag ends if mouse moves outside window while resizing a panel #2117

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix for issue #1122 #1661

Fix for issue #1122 #1661

jbalsas commented Sep 16, 2012

redmunds commented Sep 17, 2012

redmunds commented Sep 26, 2012

jbalsas commented Sep 26, 2012

redmunds commented Sep 27, 2012

redmunds Sep 27, 2012

jbalsas Sep 27, 2012

jbalsas commented Sep 27, 2012

redmunds commented Sep 27, 2012

jbalsas commented Sep 27, 2012

jbalsas commented Oct 1, 2012

redmunds commented Oct 1, 2012

redmunds Oct 1, 2012

redmunds Oct 1, 2012

redmunds commented Oct 1, 2012

redmunds commented Oct 8, 2012

jbalsas commented Oct 8, 2012

redmunds commented Oct 8, 2012

jbalsas commented Oct 8, 2012

redmunds commented Oct 8, 2012

		@@ -0,0 +1,200 @@
		/jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 /

Fix for issue #1122 #1661

Fix for issue #1122 #1661

Conversation

jbalsas commented Sep 16, 2012

redmunds commented Sep 17, 2012

redmunds commented Sep 26, 2012

jbalsas commented Sep 26, 2012

redmunds commented Sep 27, 2012

redmunds Sep 27, 2012

Choose a reason for hiding this comment

jbalsas Sep 27, 2012

Choose a reason for hiding this comment

jbalsas commented Sep 27, 2012

redmunds commented Sep 27, 2012

jbalsas commented Sep 27, 2012

jbalsas commented Oct 1, 2012

redmunds commented Oct 1, 2012

redmunds Oct 1, 2012

Choose a reason for hiding this comment

redmunds Oct 1, 2012

Choose a reason for hiding this comment

redmunds commented Oct 1, 2012

redmunds commented Oct 8, 2012

jbalsas commented Oct 8, 2012

redmunds commented Oct 8, 2012

jbalsas commented Oct 8, 2012

redmunds commented Oct 8, 2012