add changable title.

app/assets/javascripts/gl_change_element.js.coffee

+$.fn.changeElementType = (newType) ->
+  attrs = {}
+  $.each @[0].attributes, (i, attr) ->
+    attrs[attr.nodeName] = attr.nodeValue
+    return
+  @replaceWith ->
+    $('<' + newType + '/>', attrs).append $(this).contents()
+  return
\ No newline at end of file

app/assets/javascripts/issue.js.coffee

@@ -9,6 +9,7 @@ class @Issue
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
+      @initEditableIssue()
     @initMergeRequests()
     @initRelatedBranches()
@@ -18,6 +19,25 @@ class @Issue
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
+  initEditableIssue: ->
+    console.log('initEditableIssue')
+    # Rather than check permissions. It is cheaper to add through JS if possible.
+    $('.detail-page-description .title')
+    .on('mouseover', (e) ->
+      $(this).css('border', '1px solid #CCC')
+    )
+    .on('mouseout', (e) ->
+      $(this).css('border', 'none')
+    )
+    .on('click', (e) ->
+      $this = $(this)
+      oldText = $this.text().trim()
+      console.log(oldText)
+      $this.text('')
+      $this.changeElementType('input')
+      $this.val(oldText)
+    )
+
   initIssueBtnEventListeners: ->
     _this = @
     issueFailMessage = 'Unable to update this issue at this time.'

app/assets/stylesheets/pages/detail_page.scss

@@ -22,7 +22,13 @@
   .title {
     margin: 0;
     font-size: 23px;
+    padding: 5px;
     color: $gl-gray-dark;
+
+    &:hover {
+      padding: 4px;
+      cursor: text;
+    }
   }
   .description {