Refactor & tweak styles

src/inject.css

@@ -37,6 +37,13 @@ html.octotree {
     padding-left: 13px;
     width: 100%;
 }
+
+.octotree_header_error {
+    margin-left: -3px;
+    margin-top: 6px;
+    color: #900;
+}
+
 .octotree_header_repo {
     font-size: 16px;
     width: 201px;
@@ -51,6 +58,7 @@ html.octotree {
     margin-right: 6px;
     line-height: 28px;
 }
+
 .octotree_header_branch {
     line-height: 1;
     margin-top: -10px;
@@ -66,9 +74,6 @@ html.octotree {
 }
 
 /* Source tree */
-.octotree_sidebar inner > .tree { 
-    margin: 5px;
-}
 .jstree-icon.tree,
 .jstree-icon.blob {
     font: normal normal 16px octicons;
@@ -90,16 +95,8 @@ html.octotree {
     color: #4183c4 !important;
     text-decoration: none;
 }
-.jstree-anchor:hover {
-    text-decoration: underline;
-}
-
-.jstree-default {
-    border-bottom: 1px solid #eee;
-}
 
 .jstree-default .jstree-wholerow {
-    border-top: 1px solid #eee;
     height: auto;
 }
 .jstree-default .jstree-wholerow-hovered {
@@ -110,8 +107,8 @@ html.octotree {
 }
 
 .jstree-default .jstree-node {
-  line-height: 24px;
-  margin-left: 12px;
+    line-height: 24px;
+    margin-left: 12px;
 }
 .jstree-default .jstree-icon,
 .jstree-default .jstree-icon:empty,
@@ -126,13 +123,16 @@ html.octotree {
 
 /* Token form */
 .octotree_sidebar form div { 
-    margin: 5px; 
+    margin: 6px; 
 }
 .octotree_sidebar form input { 
-    width: 230px; 
+    width: 237px; 
 }
-.octotree_sidebar form > .error { 
-    color: #d35400; 
+.octotree_sidebar form .error { 
+    color: #900; 
+}
+.octotree_sidebar form button { 
+    margin-right: 5px; 
 }
 
 /* Toggle button */
@@ -153,16 +153,16 @@ html.octotree {
     transition: left 0.2s ease, color 0.1s ease-in;
     -webkit-transition: left 0.2s ease, color 0.1s ease-in;
 }
-.octotree_toggle:hover {
-    color: #4183C4;
-}
 .octotree_toggle:after {
     content: '\f078';
 }
-.octotree .octotree_toggle:after {
-    content: '\f0a4';
+.octotree_toggle:hover {
+    color: #4183C4;
 }
+
 .octotree .octotree_toggle {
     left: 214px;
 }
-
+.octotree .octotree_toggle:after {
+    content: '\f0a4';
+}

src/inject.js

@@ -10,14 +10,14 @@
           'stars', 'dashboard', 'notifications'
         ]
       , RESERVED_REPO_NAMES = ['followers', 'following']
-      
+
   var $html    = $('html')
     , $sidebar = $('<nav class="octotree_sidebar">' +
                      '<div class="octotree_header">loading...</div>' +
-                     '<div class="tree"></div>' +
+                     '<div class="octotree_treeview"></div>' +
                    '</nav>')
-    , $tree    = $sidebar.find('.tree')
-    , $token   = $('<form>' +
+    , $treeView = $sidebar.find('.octotree_treeview')
+    , $tokenFrm = $('<form>' +
                      '<div class="message"></div>' +
                      '<div>' +
                        '<input name="token" type="text" placeholder="Paste access token here"></input>' +
@@ -28,9 +28,9 @@
                      '</div>' +
                      '<div class="error"></div>' +
                    '</form>')
-    , $toggler = $('<div class="octotree_toggle button"></div>')
-    , $dummy   = $('<div/>')
-    , store    = new Storage()
+    , $toggleBtn = $('<div class="octotree_toggle button"></div>')
+    , $dummyDiv  = $('<div/>')
+    , store      = new Storage()
     , domInitialized = false
     , currentRepo    = false
 
@@ -62,7 +62,7 @@
       if (!domInitialized) {
         $('body')
           .append($sidebar)
-          .append($toggler.click(toggleSidebar))
+          .append($toggleBtn.click(toggleSidebar))
         domInitialized = true
       }
 
@@ -139,7 +139,7 @@
 
     if (err.error === 401) {
       header = 'Invalid token!'
-      message = 'The provided token is invalid. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create a new token and paste it in the textbox below.'
+      message = 'The token is invalid. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create a new token and paste it in the textbox below.'
     }
 
     else if (err.error === 404) {
@@ -154,11 +154,11 @@
       else message = 'You have exceeded the GitHub API hourly limit and need GitHub access token to make extra requests. Follow <a href="https://github.com/settings/tokens/new" target="_blank">this link</a> to create one and paste it in the textbox below.'
     }
 
-    updateSidebar(header, message)
+    updateSidebar('<div class="octotree_header_error">' + header + '</div>', message)
   }
 
   function renderTree(repo, tree) {
-    $tree
+    $treeView
       .empty()
       .jstree({
         core    : { data: tree, animation: 100, themes : { responsive : false } },
@@ -182,21 +182,24 @@
         }
       })
       .on('ready.jstree', function() {
-        updateSidebar(
-          '<div class="octotree_header_repo">' + repo.username + ' / ' + repo.reponame + '</div>' +
-          '<div class="octotree_header_branch">' + repo.branch + '</div>'
-        )
+        var headerText = '<div class="octotree_header_repo">' + 
+                           repo.username + ' / ' + repo.reponame + 
+                         '</div>' +
+                         '<div class="octotree_header_branch">' + 
+                           repo.branch + 
+                         '</div>'
+        updateSidebar(headerText)
       })
   }
 
-  function updateSidebar(header, errorMessage) {
+  function updateSidebar(header, message) {
     $sidebar.find('.octotree_header').html(header)
 
-    if (errorMessage) {
+    if (message) {
       var token = store.get(TOKEN)
-      if (token) $token.find('[name="token"]').val(token)
-      $token.find('.message').html(errorMessage)
-      $tree.empty().append($token.submit(saveToken))
+      if (token) $tokenFrm.find('[name="token"]').val(token)
+      $tokenFrm.find('.message').html(message)
+      $treeView.empty().append($tokenFrm.submit(saveToken))
     }
 
     // Shows sidebar when:
@@ -218,18 +221,17 @@
   function saveToken(event) {
     event.preventDefault()
 
-    var token = $token.find('[name="token"]').val()
-      , $error = $token.find('.error').text('')
+    var token  = $tokenFrm.find('[name="token"]').val()
+      , $error = $tokenFrm.find('.error').text('')
+
+    if (!token) return $error.text('Token is required')
 
-    if (token === '') {
-      return $error.text('Token is required')
-    }
     store.set(TOKEN, token)
     loadRepo(true)
   }
 
   function sanitize(str) {
-    return $dummy.text(str).html()
+    return $dummyDiv.text(str).html()
   }
 
   function Storage() {