Let's Edit Adobe Brackets Source

Introduction

This tip is for web developers who want to learn how to get started with editing source of Brackets with Brackets though you can practically use any editor of your choice. There are two clearly separate repositories of brackets source, one dealing with Bracket-Shell (Core part) and other UI/Code Editor part on which we will be focused as it is completely done with HTML/JS/CSS.

Background

As said, the above bracket has a shell part which is a kind of container application that runs the UI source code giving us the feel of single seamless Editor application. This shell is based on chromium(CEF3 based) along with some API from brackets team for more native feature support (brackets-app code). Thus, we can think of it as a small Google chrome browser application. At the same time, the UI portion of code is somewhat equivalent to devtools but only far too extensive. Actually, both use the same remote debugging API provided with chrome to do live editing.

Let's Get Started!!!

For our purpose, we just have to get brackets installer from Adobe brackets site.

http://brackets.io/

Then install it. One part done, i.e., we have the binaries for shell with deployed version of UI code.

Note: By UI code, I mean source code of brackets editor written in HTML/CSS/JS which provides for most of the editor features.

Now, we have to install Git. So, download it from git website:

http://git-scm.com/downloads

and install it. On Windows, choose the option to use git commands from Windows command prompt or you might face some trouble working with Git (which is installed by default with bash shell only).

**********************

If you are not interested in contributing and just want to get a feel of it, you may skip it and clone from original repository as per link below.

But for proper work, signup on github if you haven't already and fork the brackets repo from:

https://github.com/adobe/brackets

It makes a copy of the same code in your account, so that you can do whatever you like on it.

**********************

Next, create a folder to get brackets UI part of code (For example E:\BracketsSource\).

Open command prompt and change the current directory to E:\BracketsSource\.

Then, use this command to get the code locally from your forked repository.

git clone https://github.com/<username>/brackets.git

Now, you have UI code but we need dependency modules as well like code mirror, requirejs and jquery which is used internally but is available to you by default for writing extensions.

So next, fetch dependencies/submodules as below:

cd brackets

and then enter:

git submodule update --init

Now you have the complete code.

Next, you can use setup_for_hacking script given in tools folder of currently downloaded source to do last configuration. Just run it as below:

This step may work if you are on Windows Vista and above with NTFS filesystem but if it does not, then we have to tweak it.

If you open this file, you will see that all it does is create a symbolic link named dev in bracket installation folder.

"C:\Program Files (x86)\Brackets\dev" to the downloaded bracket source folder (E:\BracketsSource\brackets)

You can use utilities like Junction or ntfslink even if you are on XP.

On Linux, if script fails, just type:

ln -s "<absolute path of downloaded source code>" "<absolute path of bracket installation>/dev"

Setup completed!!!!

Now run the installed brackets program which will now always reference your downloaded source.

It will use the installed shell part and use your copy of source code for UI part of brackets.

Open brackets source code folder with brackets program file menu -> open folder option.

With ctrl + shift + o open the quick open feature.

There type workingsetview to search a js file with this name (WorkingSetView.js) and open it.

Next search @create to find functions within the current file containing the term create.

Go to _createNewListItem function and edit the below line:

var $link = $("<a href='#'></a>").html(ViewUtils.getFileEntryDisplay(file));

as:

var $link = $("<a href='#'></a>").html('***' + ViewUtils.getFileEntryDisplay(file));

Save file and select reload with extensions from debug menu.

You will see all your open file names on the left side panel (working files) have asterisks at the beginning.

Done...

Points of Interest

http://brackets.io/docs/current/ is a good place to know about various modules/APIs which constitute brackets. Try tweaking with some of them and see the result.

For safe experimentation, start with creating a plugin.

References

• https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets