Line numbers need to be added to the correct div in the Right Pane. This should dynamically change as the file is edited, only showing line numbers for lines that are actually present in the file. Additional features can be added here, perhaps to denote un-editable lines, show syntax error locations, or as a visual augment to highlighting.

Need the following colors:
Background (dark, light, selected)
Text (dark, light)
UI Accent (maybe a nice blue - used to highlight ui elements the user should use)

Others may come later. If possible, classes should be created to streamline each of these combinations (one background, one text, so on). The editor should be able to apply and revoke classes to areas in order to color them.

Resizing the window can cause issues if one of the panes reaches its min width or height. JS should watch for that on window resize (micro.updateSize()) and adjust the compliment panel's percentage to suit the issue.

May also need to address the unique situation where both panels in the panel compliment are at their minimum size.

Especially for Type Help for Help, having sections of files that are un-editable might be useful. Not sure how that could be accomplished however.

When opening a file with browser code, micro tries to run it. This shouldn't happen and could result in some security holes if it isn't fixed.

First

When opening a new tab, the new tab should be placed to the right of the currently selected tab.

Second

When your mouse is over the tab bar, the size and pos of the tabs should be frozen. After the mouse leaves, animate the changes. Makes it easier to close lots of tabs.

File tree selection is based on being able to resolve a path for the selected element. Since directories alone are not supported without files in them (issue #21), they do not have paths associated.

Review how the this.file_tree variable gets generated to look for ways to resolve this.

The left bar and right bottom bar currently cannot be resized to zero. We should look into adding a popout button or something that the user can press to completely collapse the pane. This is much cleaner than relying on a resize handle for the same process because we won't have to worry about their content getting heavily distorted as it nears zero size.

Need to create functions for adding and removing key bindings for key commands.

Plan on using MouseTrap

There needs to be some sort of controller that changes key bindings based on what is going on. Something like below:

// In the callback that handles tab mouse clicks
configureKeyBindings(TYPE.EDITOR, this);
// Will configure all bindings required for the editor. References to the editor are passed in.

Need to implement code completion (suggestions) based on other elements in the document.

Need to add context menu support. Current use would be for file tree management, but it will be useful for editor commands as well.

https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

Account for window resizes in the resize handle system using the micro.updateSize() function.

Currently tabs snap to the correct size after the user moves their mouse away. Initial testing using a css transition on width created some strange bugs where the width snapped to zero and then animated to the correct size.

Left Bar

Should be divided into two horizontal panes: A title "tab" on the top and the project hierarchy on the bottom.

Project Hierarchy

Needs top level ul, with contained li for each TOP level directory. This denotes separate project folders.
Each TOP level li should contain another ul. That will contain each subfolder. The process should continue to map the entire directory tree. Each nested hierarchy should be intended slightly.

At the moment, if there is a directory used that is empty (IE it is not declared with a file), we get a recursive stack overflow.

files.push({path:"dirtest", type:"dir", size:1024});

Each element that should be draggable should have be a part of the "draggable" class. They should also have a "type_" class corresponding with the type of draggable it is. For example, a tab would belong to the "type_tab" class. This way you cannot drag things where they aren't intended to go.

This will need to be supported with quite a bit of JS - To be done after much of the rest of the interface is complete.

Needs to be divided into several tasks. A defining syntax style needs to be defined using a JSON (similar to ATOM) which is to be parsed by JS after file load. JS will add HTML spans around each bit of text to designate its function. Finally, JS should pass through each span and color it correctly.

Each pane that relies on a percentage height or width needs a minimum size associated with it. Perhaps we can create a class or two that can be applied to all panes that need a min size (one for height and one for width)

Add the resize bar structure in HTML and CSS only. Will need to wrap content in each pane in a new div that is parallel with the handle (see atom). Once this has been implemented correctly in html and CSS, then move onto Issue #2 for JS implementation.

Divs needing handles between them:

• micro_leftBar | micro_rightBar
• micro_rightTop | micro_rightBottom

The resize handles work well enough, but there is a slight bug when dragging. The mouse drifts from one side of the resize handle to the other as it pans across the screen. There is a slight mistake in the calculation somewhere.

Should also review the JS code that keeps the div min sizes from being troublesome.

Top Right Content

Needs to be divided into two horizontal panes: the tabs at the top and the editor space at the bottom. Under the editor space, we need two vertical panes: the line numbers to the left and the editor space to the right. The line number pane will be an empty div for now, to be populated with a stack of numbers later with JS based on the length of the file.

Editor Space

The editor space should be divided into a list of divs containing the entire text area, one for each tab at the top. This way the browser draws all of the tabs at the start and all we need to do to switch between tabs is change the visibility of each div. The HTML tag for each tab content should contain information about the grammar used to color the text and the encoding.

Tab Bar

The tab bar contains a ul list of tab divs, all with a class denoting their sorting capability. One of them should belong to the "active" class to denote that it is the active tab.

IF we want to have a settings menu as a tab: Each tab needs to have a class corresponding to the type of data it holds (either text or a settings view)

Consider converting the project to be compatible with CI:

• Implement NPM Testing manager
• Use Jest to test javascript functions
• Use PhantomJS and Jest to test the rest
• Use TestCafe and Jest to test browser functions
• Use JSHint to configure style

At the moment, if a file is selected from the tree view (and thusly highlighted blue) and the user goes to close the tab that was just opened by directly clicking the 'X', the next tab that is focused on keeps the blue highlight in the file tree.

After the HTML and CSS for the resize handles are finished, we need to support them with JS. The CSS and HTML IDs and Classes should be consolidated as much as possible for ease of use in JS.

Ideally, the resize mouse icon will show up when the user hovers over the border. The page will resize continuously as the user drags. As much as possible should be based on percentages.

A basic filesystem structure needs to be set. Either using a database or the user's harddrive if possible. This will be required before much can be done on the Left Bar (JS side)