Implement git revert.

css/explaingit.css

@@ -131,6 +131,11 @@ circle.commit.merge-commit {
     fill: #FFFFCC;
 }
 
+circle.commit.reverted {
+    fill: #FFC;
+    stroke: #933;
+}
+
 circle.commit.rebased {
     stroke: #3300CC;
     fill: #CCCCFF;

index.html

@@ -40,9 +40,9 @@ <h4>&nbsp;</h4>
       <a id="open-checkout-b" class="openswitch" href="#">git checkout -b</a>
     </div>
     <div class="twocol">
-      <h4>Undo/Delete</h4>
+      <h4>Undo Commits</h4>
       <a id="open-reset" class="openswitch" href="#">git reset</a>
-
+      <a id="open-revert" class="openswitch" href="#">git revert</a>
     </div>
     <div class="twocol">
       <h4>Combine Branches</h4>
@@ -137,6 +137,17 @@ <h4>&nbsp;</h4>
       </p>
       <div class="playground-container"></div>
     </div>
+    <div id="ExplainGitRevert-Container" class="twelvecol concept-container">
+      <p>
+        To undo commits that have already been pushed and shared with the team, we cannot use the
+        <span class="cmd">git reset</span> command. Instead, we have to use <span class="cmd">git revert</span>.
+      </p>
+      <p>
+        <span class="cmd">git revert</span> will create a new commit that will undo all of the work that
+        was done in the commit you want to revert.
+      </p>
+      <div class="playground-container"></div>
+    </div>
     <div id="ExplainGitMerge-Container" class="twelvecol concept-container">
       <p>
         <span class="cmd">git merge</span> will create a new commit with two parents. The resulting
@@ -395,6 +406,32 @@ <h2>Specific Examples</h2>
 });
 </script>
 
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-revert'),
+        open;
+
+    open = function () {
+        explainGit.reset();
+        this.classList.add('selected');
+
+        explainGit.open({
+            name: 'Revert',
+            height: 200,
+            baseLine: 0.5,
+            commitData: [
+                {id: 'e137e9b'},
+                {id: '0e70093', parent: 'e137e9b'},
+                {id: '3e33afd', parent: '0e70093', tags: ['master']}
+            ],
+            initialMessage: 'Type "git revert 0e70093".'
+        });
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
+
 <script type="text/javascript">
 require(['explaingit'], function (explainGit) {
     var openSwitch = document.getElementById('open-merge'),

js/controlbox.js

@@ -240,6 +240,10 @@ define(['d3'], function () {
             this.info('Deleting all of your untracked files...');
         },
 
+        revert: function (args) {
+            this.historyView.revert(args.shift());
+        },
+
         merge: function (args) {
             var ref = args.shift(),
                 result = this.historyView.merge(ref);

js/historyview.js

@@ -413,6 +413,9 @@ define(['d3'], function () {
                 .attr('id', function (d) {
                     return view.name + '-' + d.id;
                 })
+                .classed('reverted', function (d) {
+                    return d.reverted;
+                })
                 .classed('rebased', function (d) {
                     return d.rebased;
                 });
@@ -854,6 +857,21 @@ define(['d3'], function () {
             return this;
         },
 
+        revert: function (ref) {
+            var commit = this.getCommit(ref);
+
+            if (!commit) {
+                throw new Error('Cannot find ref: ' + ref);
+            }
+
+            if (this.isAncestor(commit, 'HEAD')) {
+                commit.reverted = true;
+                this.commit({reverts: commit.id});
+            } else {
+                throw new Error(ref + 'is not an ancestor of HEAD.');
+            }
+        },
+
         fastForward: function (ref) {
             var targetCommit = this.getCommit(ref);