Statusbar for Brackets #1717

jbalsas · 2012-09-25T23:32:33Z

Adds a bottom status bar in the content area to show general editor settings and other status indicators. This is inspired by this user story https://trello.com/card/2-status-bar-bottom/4f90a6d98f77505d7940ce88/337

NOTES

I'm creating this pull request because I'm not sure about the right process and maybe I'm going a little over my head here... I think it still needs some work and discussion if you'd want to add it, so maybe it would be best if it could be forked and polished to reach a better state before trying to merge it.

INFORMATION

As suggested in the card, the status bar sits at the bottom of the editor and shows the line and column number, number of lines, mode and current tab setting for the current focused editor.

API

exports.showBusyIndicator = showBusyIndicator;
exports.hideBusyIndicator = hideBusyIndicator;

These APIs are a possible solution (at least partial) for the story in this card https://trello.com/card/ui-for-long-running-operatons/4f90a6d98f77505d7940ce88/551. The status bar includes a busy indicator that any module can show or hide through these methods. Additionally, showBusyIndicator takes one optional parameter to set a busy cursor over Brackets until hideBusyIndicator is called.

In this pull request, the Find in Files module has been updated to show the busy indicator and cursor while waiting for the search operation to complete.

exports.addIndicator = addIndicator;
exports.updateIndicator = updateIndicator;

These APIs allow any module to add an indicator on the status bar and update it at any time.

addIndicator takes an id (module.id could be nice) and other optional parameters such as indicator, visible, style, tooltip and command.

updateIndicator takes the same parameters as the other except indicator. It allows to update the values with new ones to change the status indicator appearance and behavior.

If a DOM element indicator is passed, it will be added to the status bar. Otherwise, an empty span will be used.
The visible parameter sets the initial indicator visibility
The style parameter indicates a class to style the indicator
The tooltip parameter is set as the indicator title so that it appears as a tooltip when the mouse is over it
The command parameter indicates a function to be called on click over the indicator. (It could be used to show/hide the JSLint errors panel decoupling this from the enable/disable action as outlined in https://groups.google.com/forum/?fromgroups=#!topic/brackets-dev/PqEbuhw7k6c

In this pull request, and just as a test for the API, the JSLintUtils module has been updated to add and update the indicator at the statusbar instead of at the toolbar. Also, the UpdateNotification module has been updated to show the gift icon as a status indicator.

KNOWN ISSUES

The style for the status bar and the busy indicator are in serious need of a makeover :)
The information fields were not fully working with inline editors, so I didn't take them into account for now. Is it possible that inline editors are not triggering the cursorActivity event?
Indicator commands are not implemented waiting further discussion.
The addIndicator and updateIndicator APIs could be improved for better flexibility.

Sorry for the long and booring post :)

PS: Although not yet finished, the status bar also comes in a Brackets Extension flavour https://github.com/jbalsas/brackets-statusbar-extension ;)

Add/Update Indicator API in StatusBar JSLintUtils indicator UpdateNotificatino indicator Find in files shows busyIndicator

…sbar

njx · 2012-09-25T23:48:25Z

@jbalsas -- this is totally sweet. We literally just got out of our planning meetings for the next sprint, and one of the tasks we added was for a status bar :) We mainly wanted to add it to support adding a simple switcher for spaces vs. tabs, so what you've got could be a great start.

We'll try to do a closer review over the next few days and suggest improvements if any. Thanks!

njx · 2012-09-25T23:56:14Z

BTW, you can see a mockup that @GarthDB made for the status bar in the Extension UI Guidelines doc on the wiki: https://github.com/adobe/brackets/wiki/Extension-UI-Guidelines (search for the "Status Bar" section). Aside from the internal layout/positioning of the items in the status bar, the main differences are in the background color, font size and vertical padding. Probably worth tweaking those simple visual issues first--the internal layout stuff is probably a bigger question that's worth some discussion.

GarthDB · 2012-09-26T00:31:23Z

I'll try and take a look at the request and your current UI sometime tonight.

Sent from my iPhone

On Sep 25, 2012, at 4:56 PM, Narciso Jaramillo notifications@github.com wrote:

BTW, you can see a mockup that @GarthDB made for the status bar in the Extension UI Guidelines doc on the wiki: https://github.com/adobe/brackets/wiki/Extension-UI-Guidelines (search for the "Status Bar" section). Aside from the internal layout/positioning of the items in the status bar, the main differences are in the background color, font size and vertical padding. Probably worth tweaking those simple visual issues first--the internal layout stuff is probably a bigger question that's worth some discussion.

—
Reply to this email directly or view it on GitHub.

njx · 2012-09-26T01:19:17Z

The busy indicator is cool too. @GarthDB, do we have artwork for a spinner handy? (SVG preferably so we can scale it.) We could add a simple animation to rotate it, and start/stop it when we show/hide it.

GarthDB · 2012-09-26T01:34:27Z

There is a design done for reflow. I'll look into it.

Sent from my iPhone

On Sep 25, 2012, at 6:19 PM, Narciso Jaramillo notifications@github.com wrote:

The busy indicator is cool too. @GarthDB, do we have artwork for a spinner handy? (SVG preferably so we can scale it.) We could add a simple animation to rotate it, and start/stop it when we show/hide it.

—
Reply to this email directly or view it on GitHub.

jasonsanjose · 2012-09-29T19:20:09Z

src/project/StatusBar.js

+
+    function _updateCursorInfo() {
+        var cursor      = fullEditor.getCursorPos(),
+            cursorInfo  = "Line " + (cursor.line + 1) + ", " + "Column " + (cursor.ch + 1);


Externalize string, Line {0}, Column {1}

It seems like the cursor movement/statusbar updating feels a little laggy on my 2012 macbook air. Especially when scrolling down by holding the down arrow. I tried using webkitRequestAnimationFrame but that only helped slightly. Are you seeing any issues?

It looks good to me... I'm on an old Macbook Pro (2007 I think...), with Mac OS X 10.7.4.

I've noticed it lags when I have some other panels such 'Find in Files' with many results opened, but then so does everything else...

Maybe it has something to do with https://github.com/adobe/brackets-shell/issues/61 ?

jasonsanjose · 2012-09-29T19:20:23Z

Reviewing

jasonsanjose · 2012-09-30T00:05:10Z

src/project/StatusBar.js

+            $(fullEditor).off("cursorActivity", _updateCursorInfo);
+        }
+
+        fullEditor  = EditorManager.getCurrentFullEditor();


This probably has something to do with #1257, but we should put a comment here about supporting inline editors.

I just saw the note in the description about supporting inline editors. It's still worth putting a comment here in the code as a reminder.

jasonsanjose · 2012-10-01T22:46:34Z

Initial review complete. Hopefully this is mostly just cleanup and not a ton of refactoring. Our goal is to merge this in as soon as possible to unblock the tabs/spaces story https://trello.com/c/exOQhrGw. If you're too busy to take on these code review changes, we can also help.

Thanks for the great contribution. The timing couldn't be better.

jbalsas · 2012-10-02T08:07:29Z

I'm attending tomorrows hackaton in London. Hopefully I'll be able to go through all the review changes there ;)

jasonsanjose · 2012-10-02T21:05:39Z

@jbalsas I'm not going to be in London, but please introduce yourself to the team that's there. Maybe @peterflynn, @njx or @gruehle will pick up the review or I can finish it tomorrow as well.

…sbar Conflicts: src/search/FindInFiles.js

gruehle · 2012-10-03T14:08:28Z

Looks great! Thanks for the contribution. Merging.

Statusbar for Brackets

jbalsas added 4 commits September 24, 2012 23:02

Show/Hide BusyIndicator API in StatusBar

3667786

Add/Update Indicator API in StatusBar JSLintUtils indicator UpdateNotificatino indicator Find in files shows busyIndicator

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

ef2eed8

…sbar

Cleanup changes

37032e8

More cleanup

3be18f4

jasonsanjose reviewed Sep 29, 2012
View reviewed changes

ghost assigned jasonsanjose Sep 29, 2012

jasonsanjose reviewed Sep 30, 2012
View reviewed changes

jbalsas added 4 commits October 3, 2012 14:16

Cleanup changes for pull request review

e331203

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

87ab246

…sbar Conflicts: src/search/FindInFiles.js

Hides the statusbar when there is no focused editor

5ae895c

Move gift notification back up in the toolbar

f5d977a

gruehle added a commit that referenced this pull request Oct 3, 2012

Merge pull request #1717 from jbalsas/statusbar

4c7b775

Statusbar for Brackets

gruehle merged commit 4c7b775 into adobe:master Oct 3, 2012

core-ai-bot mentioned this pull request Aug 29, 2021

[CLOSED] Statusbar for Brackets brackets-archive/bracketsIssues#1673

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Statusbar for Brackets #1717

Statusbar for Brackets #1717

jbalsas commented Sep 25, 2012

njx commented Sep 25, 2012

njx commented Sep 25, 2012

GarthDB commented Sep 26, 2012

njx commented Sep 26, 2012

GarthDB commented Sep 26, 2012

jasonsanjose Sep 29, 2012

jasonsanjose Sep 29, 2012

jbalsas Sep 30, 2012

jbalsas Oct 2, 2012

jasonsanjose commented Sep 29, 2012

jasonsanjose Sep 30, 2012

jasonsanjose Oct 1, 2012

jasonsanjose commented Oct 1, 2012

jbalsas commented Oct 2, 2012

jasonsanjose commented Oct 2, 2012

gruehle commented Oct 3, 2012

Statusbar for Brackets #1717

Statusbar for Brackets #1717

Conversation

jbalsas commented Sep 25, 2012

njx commented Sep 25, 2012

njx commented Sep 25, 2012

GarthDB commented Sep 26, 2012

njx commented Sep 26, 2012

GarthDB commented Sep 26, 2012

jasonsanjose Sep 29, 2012

Choose a reason for hiding this comment

jasonsanjose Sep 29, 2012

Choose a reason for hiding this comment

jbalsas Sep 30, 2012

Choose a reason for hiding this comment

jbalsas Oct 2, 2012

Choose a reason for hiding this comment

jasonsanjose commented Sep 29, 2012

jasonsanjose Sep 30, 2012

Choose a reason for hiding this comment

jasonsanjose Oct 1, 2012

Choose a reason for hiding this comment

jasonsanjose commented Oct 1, 2012

jbalsas commented Oct 2, 2012

jasonsanjose commented Oct 2, 2012

gruehle commented Oct 3, 2012