Gerrit Productivity Hacks – Inline Edit: Change Source Code from your Browser

Today, we will have a look at inline-edit, a neat Gerrit feature that allows you to change source code on the fly from your browser. This feature has been finished during the Gerrit Hackathon organized by CollabNet in Berlin and is available for all recent TeamForge versions. Inline-edit introduces buttons in Gerrit’s UI to create new Gerrit changes from scratch and edit source code of existing changes drive-by style.

Editing an existing change – Modify source code adhoc from your browser

Let’s start with something really quick and easy. We will just fix a typo by inline modification of an existing change. This is going to be fast, so we will go through it with just minimal explanation. The more detailed description will come later on, as we will create a new review from scratch.

Here is my one-line change with mistyped ReadMe (highlighted yellow):

To fix it we need to click on Edit icon (in the orange box). We’ve just entered the Edit mode. So we can fix the typo:

As you can see the change is now corrected (highlighted in yellow). Now, we have to Save it and Close. Once we are back to change screen and we have to click the Done Editing button:

Finally, we click on the blue Publish change button on the top of the screen.

After that we can see a new patch set for the change, containing our modifications:

It’s quite efficient, isn’t it? I think it is. Now let’s have a look at new change creation. This time I will describe it in more detail.

Creating a new change – Craft an entirely new commit from your browser – drive-by style

How to create a new change from Gerrit UI?

First you need to go to the Projects->List and choose the project in question. Here I’m using a demo project. Looking at the General tab:

There is a new Create Change button (highlighted in orange). Let’s click it. Now we see a pop-up window with two fields – branch for the new change and its description. The values entered are highlighted in yellow:

Now it is time to click at Create button. This redirect us to the change page for the newly created change:

There is a couple of things to notice here.

First thing is In the left-upper corner: We see there that our change is at this point a Draft, and on the right-upper corner there are two, self-explaining buttons: Publish and Delete Change.

Another important button is located on the left side in the middle of the page (below Delete Change). It reads Follow-Up and allows us to create a Follow-Up change. The Follow-Up changes are changes that are based on existing changes. This gives you an opportunity to create a chain of related changes.

Now, marked in yellow, we can see that our branch is master, our description has turned into Commit Message and is now decorated with a Change-Id that has been automatically generated for us. Finally, the Edit button in the bottom of the screen allows us to edit the change. That way we will enter Edit Change mode, where we can add/remove files and change its content.

Here’s what you see after clicking the Edit button:

As you see the File menu has changed. It allows us to Add, Delete, Rename, Open All, Diff or Finish Editing.  We want to add a new file so we click the Add button. Then we have entered the Path: Readme.txt (highlighted yellow). So, we are ready to open the Readme.txt file for inline editing, by pressing the blue Open button.

Now we can see the File edit screen:

As you can see, we’ve already entered some text into the Readme.txt file. Now, it’s time to save (Save button) and close this view (Close button).

Now we are back to change screen, but it looks slightly different:

First thing to note is that our Readme.txt file has been added to this Edit (bottom left).

At the top of the screen on the left side we can see that we are now in Change Edit mode.

On the upper right corner our options are: Publish Edit, Delete Edit or Delete Change (the latter deletes draft change).

In File menu (middle of the screen) the Edit button has been transformed into Done Editing which means that it is now easy for us to Add, Delete or Rename files, and once we are done we can click Done Editing button.

But we don’t need to do that. We are done with our change already, so we just click the blue Publish Edit button.

We are now back to Change screen in Draft mode:

Note the “Patch Set 2: Published edit on patch set 1” message in the bottom of the screen.

We are ready to publish the Draft using the blue Publish button in the upper left corner.

That way we have finished our editing and have managed to add a file to git repo without even cloning it ;).

As you can see it is fairly easy to publish changes like that, especially if the change itself is trivial. And the workflow is also pretty simple: you create a change in Draft mode, then switch into Edit Change mode. After that you decide if you want to publish the edit or delete it. And you can re-enter Edit Change mode as many times as you wish. Finally you publish the Draft and the Change is ready for review.

Stay tuned for more Gerrit Productivity Hacks

That’s all for now. Keep checking our CollabNet blog page for more Gerrit productivity hacks and our announcement for the next Gerrit Hackathon in Berlin.