Installing and Configuring Dreditor

Image
Drupalize.Me Tutorial

With DrupalCon Los Angeles underway we thought it might be a good time to introduce (or reintroduce) folks to Dreditor (short for "Drupal editor"). Dreditor is a collection of user scripts, which alter browser behavior on specific pages on the drupal.org domain. The features of Dreditor are mostly helpful in the issue queue and during the patch review process.

We have a video, Installing and using Dreditor, if you'd like to follow along, but since that recording, installation of Dreditor is even easier. Let's take a look at the changes, and how we can use this powerful tool to make interacting with the issue queue awesome.

Installation

For recent versions of Chrome, Firefox or Safari, simply visiting https://dreditor.github.io/ will prompt you to install the particular version of Dreditor your browser needs. Clicking the Install Dreditor 1.2.14 for Chrome (or Firefox) button in either Chrome and Firefox will prompt you to grant the Dreditor extension permission to install. Click "Allow" and Dreditor is installed and ready to go. On Safari you need to download and manually install the browser extension. After clicking install, an extension file (called "dreditor.safariextz") will be downloaded. Double-click this extension and Dreditor will be installed.

Image
Dreditor Installation in Safari

Now that we've got Dreditor installed, and ready to go, let's take a look at the various tools it provides to make working in the issue queue a little easier.

Patch Review and Simplytest.me Tools

After installing Dreditor for a browser, when we visit an issue in that browser, there are now two extra buttons available: REVIEW and SIMPLYTEST.ME

Image
Dreditor patch button

The simplytest.me service allows us to spin up a Drupal sandbox site with any modules, themes, or patches already added or applied. The button provided by Dreditor fills in the "apply patches" field, so we can easily bring up a site to test a particular patch with just a couple of clicks. This is obviously a huge time saver, since we no longer have to alter our local environment to test every single patch. Simplytest.me allows for faster and easier patch review, while also lowering the technical barriers to doing so. Now that we've used simplytest.me to help test the functionality of our patch, let's see how Dreditor helps with code review, too.

Dreditor's REVIEW button launches a modal window which gives us a quick listing of the changed files in this particular patch. From here we can click on a line (or click and drag across several lines) of code to leave a comment.

Image
Dreditor review comments

We can save this comment, and continue to review the rest of the patch. At any time, the CANCEL button will discard our comments and take us back the the drupal.org page we were on. The HIDE button can be used to temporarily hide the Dreditor modal window while maintaining any in progress comments we've saved. When we've finished reviewing the patch, hitting the PASTE button will insert all of our comments, with the appropriate formatting, into the comment box in the issue queue.

Image
Dreditor comment formatting

Text Field Tools

Dreditor also provides handy tools for the other text areas on an issue. Both the comment field and the issue summary have a Make sticky button.

Image
Dreditor sticky button

This button will pop up a half-screen modal window which allows us to continue editing while still being able to scroll through the rest of the issue for reference.

Image
Dreditor sticky button in action

Issue summaries also have buttons for inserting templates or tasks. These buttons insert some boilerplate markup for headings common to larger issue organization.

Dreditor makes the actual text area a little bit smarter, too. Tab completion is in place to allow <ulTAB to create an unordered list, <blockTAB for a blockquote, etc. Username tab completion works with by prefixing the username with @ (only for usernames on the current page). Linking to another comment in the issue thread can be done by prefixing the comment number with #. Instead of remembering the syntax drupal.org uses to link to other issues, pasting a url to an issue and hitting tab will automatically convert the link to the proper syntax.

Finally, Dreditor also provides an alternate method of embedding images. After you've uploaded and attached a file, an EMBED button appears. Clicking this button inserts the appropriate markup into the text area.

Image
Dreditor embed

Hopefully this has helped illustrate how Dreditor can help save time, and make the patch review process a little smoother. If you haven't given it a shot before, I highly encourage you to give it a try. With all of the code sprinting over the next week, it certainly can't hurt.

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more