Installing and Using Dreditor

Video loading...

  • 0:00
    [Drupalize.me: Learn Drupal]
  • 0:06
    [Installing and Using Dreditor - Community Tools - with Joe Shindelar]
  • 0:12
    In this lesson, we're going to be taking a look at using the Dreditor tool
  • 0:16
    from drupal.org, in order to assist us with doing things like patch reviews
  • 0:20
    and general interaction with Drupal's issue queue.
  • 0:24
    Located at drupal.org/project/dreditor, the Dreditor project
  • 0:30
    isn't a module. It's a user script.
  • 0:32
    It's a set of JavaScript files that we can install into our browser
  • 0:36
    using various mechanisms, and once it's installed,
  • 0:39
    that JavaScript will be executed on all of the pages where it's relevant—
  • 0:44
    or, in this case, on drupal.org issue queue pages.
  • 0:47
    And then it can do things like provide enhancements
  • 0:50
    to what we're seeing on the page in our interaction with it.
  • 0:53
    It's used a lot by people that are reviewing patches for Drupal,
  • 0:57
    as it provides a nicer interface for interacting with the Diff output
  • 1:01
    and also for creating and formatting the messages
  • 1:04
    that are displayed in the issue queue.
  • 1:06
    We'll start by getting Dreditor installed.
  • 1:09
    And we'll walk through how we can do that in both Chrome and Firefox.
  • 1:13
    Once we've done that, we'll walk through most of the different tools
  • 1:17
    that it provides—some of them obvious,
  • 1:19
    like the patch review tool, and some of them not so obvious.
  • 1:22
    So let's go ahead and get started installing this script first.
  • 1:25
    What I've got here is a fresh installation of Chrome
  • 1:30
    and a fresh installation of Firefox.
  • 1:32
    And I'm going to demonstrate installing Dreditor on both of those.
  • 1:35
    With Chrome, you follow the instructions on the page. You click here to install.
  • 1:41
    What this is going to do is it's actually going to download a .js file.
  • 1:45
    So it's gone ahead and downloaded the dreditor.js file into my Downloads folder.
  • 1:50
    Since the extension can't be installed directly from drupal.org—
  • 1:55
    we can close this—in order to install that extension that I just downloaded,
  • 2:00
    I can either navigate to this URL in my address bar—so chrome://extensions—
  • 2:07
    or I can just go to the Window menu and the Extensions Manager page,
  • 2:14
    see a list of all the extensions in my Chrome browser,
  • 2:19
    and then I can take the .js file that I just downloaded
  • 2:22
    and drag and drop that onto the Extensions window here,
  • 2:26
    and Chrome will ask me if I'd like to install it.
  • 2:29
    I'm going to say go ahead.
  • 2:32
    And it's now installed the Dreditor tool. I can confirm that it's enabled.
  • 2:36
    So that's the simple way to install it in Chrome.
  • 2:40
    If I wanted to install this in Firefox, the process for installing it
  • 2:44
    in Firefox is equally easy.
  • 2:47
    The 1st thing you'll need to do is make sure that you've got the
  • 2:49
    Greasemonkey extension installed.
  • 2:51
    I won't go through that; I've already got it.
  • 2:53
    But just follow this link. There'll be a Download link there.
  • 2:56
    Click that link to download Greasemonkey,
  • 2:58
    and Firefox will walk you through installing the extension.
  • 3:01
    You can confirm that you've got this extension installed
  • 3:05
    by going to the Tools menu,
  • 3:07
    and you'll see Greasemonkey showing up here under Tools.
  • 3:11
    If it's installed but not enabled, you may see it under Add-ons,
  • 3:15
    listed under Extensions, and you can go ahead and enable that Greasemonkey tool.
  • 3:21
    What this will do is allow Firefox to make use of these user scripts
  • 3:26
    or .js files that are loaded onto specific pages and modify the DOM.
  • 3:32
    So once that's installed,
  • 3:36
    installing the user script in Firefox is as simple as just clicking
  • 3:39
    the Click to Install link here.
  • 3:41
    It pops open a dialog. I'll accept by clicking Install.
  • 3:47
    And it says it was successfully installed. I say OK.
  • 3:51
    And I can confirm that I have Dreditor installed in Firefox
  • 3:55
    by going to Tools and then going to Add-ons, and under Add-ons,
  • 4:02
    User Scripts, I'll see Dreditor listed there.
  • 4:05
    I want it to be enabled, not disabled, and I can go ahead and
  • 4:09
    start using it.
  • 4:11
    So that's installing it in Firefox and Chrome.
  • 4:15
    It'll also work in a handful of other browsers.
  • 4:18
    Take a look at the instructions provided on the Project page for getting it installed.
  • 4:23
    Okay, now that we've got it installed,
  • 4:25
    let's take a look at what this tool does for us.
  • 4:29
    You can get some information by reading through the project description here.
  • 4:32
    If you scroll down a little bit, it talks about the patch review tool that it provides
  • 4:37
    and some of the autocomplete and other, not so obvious, enhancements.
  • 4:40
    If you've navigated the drupal.org issue queue before,
  • 4:44
    you've probably come across an issue like this,
  • 4:46
    where some work is going on in order to enhance
  • 4:49
    some aspect of Drupal core or 1 of the modules.
  • 4:52
    It's got an issue summary at the top.
  • 4:55
    Various patches have been posted to the issue queue.
  • 4:58
    And then people have reviewed the patches and left helpful comments about
  • 5:02
    the things that they have found in a patch.
  • 5:06
    If we take a look at 1 of these issues,
  • 5:09
    or 1 of the comments in this issue—let's find 1 that's got a review—
  • 5:13
    as a good example—so this comment number 17 here
  • 5:17
    shows output that is common.
  • 5:21
    We see this a lot in comments, where you see some segment of the Diff
  • 5:25
    displayed in the comment, and then the person who performed the review
  • 5:30
    has left comments about that piece of code.
  • 5:32
    And it's all nicely formatted here.
  • 5:35
    What Dreditor does is provide this formatting for us,
  • 5:40
    so we don't have to remember all the HTML to make it look like this.
  • 5:46
    So let's take a look at how this works.
  • 5:48
    I'm going to scroll all the way down to the bottom of this issue
  • 5:51
    and find the last patch provided.
  • 5:53
    Because if we were really going to do a review on this issue,
  • 5:56
    we would want to make sure that we're reviewing the latest code.
  • 6:01
    You'll notice, once you've got Dreditor installed, that when you see a
  • 6:04
    patch attached to a comment in the issue queue, it's got
  • 6:07
    these extra buttons, Review and Simplytest.me.
  • 6:12
    These are enhancements that the Dreditor tool has provided.
  • 6:15
    When I click on Review, what Dreditor has done is it's overlaid this
  • 6:19
    sort of modal dialog, like window or pop-up window,
  • 6:23
    on top of the page that I was just looking at,
  • 6:26
    and it's loaded the contents of the .patch file into the screen here,
  • 6:30
    so I can read it very easily in my browser.
  • 6:34
    It's also added some basic syntax highlighting, so I can see
  • 6:38
    things that are removed are in red, and things that are added
  • 6:40
    are in green or blue, depending on if it's a comment or actual code.
  • 6:46
    It's also for really large patches, which modify multiple files, I can
  • 6:50
    see over here on the left, I could very easily jump around
  • 6:53
    inside of this patch to specific files to sort of, ah,
  • 6:57
    I want to see what's going on in this one, click that link,
  • 7:00
    and basically provides this navigation option for a large patch file.
  • 7:07
    So I can read the patch file. Once I've got comments on something, I can highlight the section that I'm interested in discussing.
  • 7:14
    And Dreditor will open a text field on the left here,
  • 7:19
    where I can leave a comment about this particular piece of code.
  • 7:29
    I add in my comment and click Save.
  • 7:32
    And the tool has now stored my comment
  • 7:35
    in association with this hunk of code from the .patch file.
  • 7:39
    And then I can continue on, reading more about the—
  • 7:42
    what the patch does, taking a look at all the code,
  • 7:45
    maybe later I find another segment that I'd like to leave a comment on—
  • 7:49
    right here, we'll—I'd like to leave a comment on this part.
  • 7:57
    Just making up some comments here.
  • 7:59
    I won't actually save them to the issue.
  • 8:01
    But I'm building up a buffer of all of my comments about this patch file.
  • 8:05
    A couple of things to note with Dreditor.
  • 8:09
    Down here in the left, I've got Paste, Hide, and Cancel buttons.
  • 8:13
    We'll talk about Paste in a moment.
  • 8:16
    What I'm going to talk about first is Hide and Cancel.
  • 8:18
    Cancel, if I click this, it's going to erase the buffer of comments
  • 8:21
    that I've started creating, and just dump me back to the issue queue.
  • 8:24
    Hide, however, allows me to temporarily hide Dreditor
  • 8:28
    so I can take a look at something in the issue queue.
  • 8:31
    Maybe I wanted to read somebody else's comment or so forth.
  • 8:34
    And then I can click Show to show it again.
  • 8:36
    And all my previous comments on the code are still in the buffer.
  • 8:41
    I can also, at any point, go back and see 1 of these sections
  • 8:45
    where Dreditor has highlighted in red. That means I've left a comment here.
  • 8:49
    If I click on that, my comment is loaded, and I can edit it.
  • 8:52
    I might add some more text, like this.
  • 8:57
    More text.
  • 8:59
    Then I can click the Update button, or I can click Cancel to
  • 9:03
    undo this edit that I'm in the process of making, or I could delete this comment altogether.
  • 9:09
    So the important thing to keep in mind is clicking Cancel
  • 9:12
    means I want to stop using Dreditor and get rid of any of the comments
  • 9:16
    that I've already added to this patch.
  • 9:18
    Be careful with that one.
  • 9:21
    Once I'm happy with my review,
  • 9:24
    and I feel like I've gone through and found all the code that I want to talk about,
  • 9:27
    I can use this button here, Paste.
  • 9:30
    When I click the Paste button,
  • 9:34
    the Dreditor tool has taken the buffer of comments
  • 9:37
    that I left about certain segments of code and wrapped it some
  • 9:42
    appropriate HTML, so that it can be displayed in the issue queue,
  • 9:46
    and then pasted that section of the code, along with my comment,
  • 9:50
    into the text area here for leaving a comment.
  • 9:53
    I'm not going to leave a comment here, but what I will do is
  • 9:56
    copy this into another issue, so we can see that it worked.
  • 10:01
    So I copied that text.
  • 10:03
    I'm going to go back—I've got an issue here just on the Drupal Ladder Sandbox,
  • 10:07
    so I'm not going to cluster or clutter up the main Drupal core issue queue.
  • 10:12
    But I'll post my text there.
  • 10:16
    And then I can save it.
  • 10:21
    And now you can see that I've got this nicely formatted
  • 10:25
    output in my comment on the issue, thanks to Dreditor.
  • 10:30
    That is, in my opinion, the most useful thing that Dreditor does. And it's the most obvious.
  • 10:36
    There's a handful of other things that it does, though,
  • 10:38
    that I'd like to take a look at as well.
  • 10:40
    If we go back to the issue we were looking at before,
  • 10:42
    I'm going to undo that comment.
  • 10:47
    You'll notice that the Dreditor tool has added a couple of additional buttons
  • 10:52
    or links to various places on this issue.
  • 10:58
    Down near the comment text area, there's this Create commit message
  • 11:01
    and Make sticky button that weren't there before.
  • 11:04
    These are added by Dreditor.
  • 11:06
    Make sticky allows me to place the text area field
  • 11:10
    into a modal dialog that's stuck at the bottom of the page.
  • 11:13
    So then I can scroll up and down and read in the comment,
  • 11:16
    and this is really nice if I want to respond to somebody's previous comment
  • 11:20
    without having to keep scrolling up and down, up and down,
  • 11:22
    in order to make that happen.
  • 11:25
    The Create commit message button here is used in order to
  • 11:31
    create an appropriately formatted commit message when this patch gets committed,
  • 11:37
    but with git, to the project.
  • 11:39
    This is a good start at least on what that commit message should look like.
  • 11:44
    So it's a tool for people that are committing patches, either for
  • 11:47
    core or their own modules to quickly format that,
  • 11:50
    and you can—it provides a summary of the people that interacted
  • 11:56
    with this issue via the comments, and sort of attempts to
  • 12:00
    make a best guess at who to attribute for that.
  • 12:04
    It also provides you with this down here, which is the actual
  • 12:08
    command that you could use in git to commit this,
  • 12:13
    along with attribution.
  • 12:15
    So we can hide that.
  • 12:17
    Another thing that it does that's also not super obvious
  • 12:21
    is it provides a tool that will allow us to embed images
  • 12:25
    a little bit more easily into an issue.
  • 12:30
    If you upload a new file—so I'll choose a file, and I'll pick an image.
  • 12:37
    And click Open. And I can attach that image.
  • 12:41
    Once the image is uploaded and attached,
  • 12:45
    I get this Embed button that's provided by Dreditor.
  • 12:49
    If I click that, it pastes the appropriate code into my comment
  • 12:54
    to embed that image. So that's a handy tool that it has.
  • 12:57
    It also has some tab-completion scripts.
  • 13:01
    So common things that you might do when commenting on an issue
  • 13:04
    are, for example, make a list, maybe an unordered list,
  • 13:08
    or you want a block quote.
  • 13:11
    Dreditor has tab-completion, so I could do
  • 13:13
    an opening angle bracket, block, tab,
  • 13:18
    and it completes that HTML tag.
  • 13:21
    It also does the same for ul tags,
  • 13:24
    so I can do ul, and it'll complete that.
  • 13:27
    And, of course, li, since this is a really common pattern to create an unordered list of
  • 13:33
    discussion points for this particular issue.
  • 13:37
    In addition to doing completing of HTML tags,
  • 13:40
    it also has some neat things for, like, if I want to link
  • 13:45
    to a previous comment in this issue, I can enter the comment number,
  • 13:49
    like so, #23, and then tab, and it'll insert an anchor to comment number 23
  • 13:55
    on this particular issue.
  • 13:57
    Or if I've got a URL for another issue on drupal.org,
  • 14:03
    I can just paste in that URL and hit tab,
  • 14:06
    and Dreditor will complete this to the syntax that's used
  • 14:10
    inside of the drupal.org issues in order to link to an issue,
  • 14:16
    but also provide some neat formatting around it, so you can see that down here.
  • 14:22
    And, finally, it'll also autocomplete
  • 14:25
    names of people that have participated in this issue.
  • 14:28
    So I can do @ somebody's name—just start typing the name
  • 14:32
    and hit tab, and it'll do its best to autocomplete that name for you.
  • 14:37
    The list of autocompletions is on the project description page.
  • 14:41
    So you can take a look at those there.
  • 14:43
    Finally, if I scroll up to the top of this page,
  • 14:46
    another thing that Dreditor does that I find to be really useful
  • 14:50
    is this Edit Issue Summary link.
  • 14:52
    I'm going to go over to my test issue again.
  • 14:56
    Go to the top. This one also has this Edit link here.
  • 14:59
    If I click this, Dreditor opens up a modal dialog with the form for editing this
  • 15:05
    node in the background, and so I can actually make changes
  • 15:08
    to this issue summary without actually having to leave the page.
  • 15:11
    It's also really nice, because it's stickyed at the bottom, and I can do that thing
  • 15:15
    where I scroll up and down the page and read the various comments,
  • 15:19
    make changes to the issue summaries—
  • 15:22
    so maybe I'll just add some formatting here—
  • 15:24
    click save, and in the background it's updating that node
  • 15:30
    and returning me to the page, just as if I had actually clicked the Edit tab up here.
  • 15:34
    And finally, another thing that the Dreditor tool does
  • 15:39
    is if we look at an issue in the core queue—
  • 15:42
    I'm going to—next to the Review button, it also provided this
  • 15:47
    button for Simplytest.me.
  • 15:49
    I can click on that, and when I do, it'll open the simplytest.me website
  • 15:55
    with the appropriate project already selected
  • 15:59
    and my patch file already entered as well.
  • 16:03
    So I can just quickly build a sandbox for that patch file,
  • 16:06
    using simplytest.me, and do a visual review of what that patch has added.
  • 16:11
    So that's just a convenience tool there. And that's about it.
  • 16:16
    A lot of what the tool does is try to provide quicker and easier ways
  • 16:21
    to perform common tasks, so things that you're doing
  • 16:24
    frequently when reviewing an issue, it's just trying to simplify that and make it easier.
  • 16:28
    Or provide buttons in places that probably make sense,
  • 16:32
    but drupal.org just hasn't been able to get around to doing that yet.
  • 16:36
    So hopefully this will prove to be a useful tool for you
  • 16:40
    when you start doing your own patch reviews.

Installing and Using Dreditor

Loading...

Dreditor is a great community tool that assists with things like patch reviews, and generally interacting with the Drupal.org issue queue. Dreditor is not a Drupal module, but is a plugin script you use in your browser. In this lesson, Joe walks through how to get Dreditor installed (on Chrome and Firefox), and then shows you how to use it to make your work in the issue queues more efficient.