cherry picked themable code to color variables list

lib/context/context-variable-list-view.coffee

@@ -8,11 +8,24 @@ class ContextVariableListView extends View
   @content: (params) ->
     dataname = if params.name then params.name else ''
     dataname = if !!params.parent then params.parent + '.' + dataname else dataname
+    nameIsNumeric = /^\d+$/.test(params.name)
+    label = params.name
+    if !params.parent # root taxonomy (Locals, etc.)
+      labelClass = 'syntax--type'
+    else if params.parent.indexOf('.') == -1 # variable
+      labelClass = 'syntax--variable'
+    else # array key, object property
+      labelClass = "syntax--property #{if nameIsNumeric then 'syntax--constant syntax--numeric' else 'syntax--string'}"
+      label = '"' + params.name + '"'
+    valueClass = switch params.type
+      when 'array' then 'syntax--support syntax--function'
+      when 'object' then 'syntax--entity syntax--name syntax--type'
+      else ''
     @li class: "context-variable-list-view", =>
       @details 'data-name': dataname, =>
         @summary =>
-          @span class: 'variable php', params.name
-          @span class: 'type php', params.summary
+          @span class: "variable php syntax--php #{labelClass}", label
+          @span class: "type php syntax--php syntax--#{params.type} #{valueClass}", params.summary
         @ul outlet: "contextVariableList"
 
   initialize: ({@variables,@autoopen,@parent,@name,@openpaths}) ->
@@ -25,5 +38,3 @@ class ContextVariableListView extends View
     if @variables
       for variable in @variables
         @contextVariableList.append(new ContextVariableView({variable:variable, parent: path,openpaths:@openpaths}))
-
-

lib/context/context-variable-view.coffee

@@ -4,6 +4,7 @@ helpers        = require '../helpers'
 
 module.exports =
 class ContextVariableView extends View
+
   @content: =>
     @li class: 'native-key-bindings', =>
       @div class: 'native-key-bindings', tabindex: -1, outlet: 'variableView'
@@ -12,12 +13,28 @@ class ContextVariableView extends View
     @render()
 
   renderScalar: ({label,value}) ->
-    "<span class=\"variable php\">#{label}</span><span class=\"type php\">#{value}</span>"
+    labelIsNumeric = /^\d+$/.test(label)
+    if @parent == 'User defined constants'
+      labelClass = "variable php syntax--php syntax--constant"
+    else
+      labelClass = 'variable php syntax--php ' + switch label[0]
+        when '$' then 'syntax--variable'
+        else "syntax--property #{if labelIsNumeric then 'syntax--constant syntax--numeric' else 'syntax--string'}"
+      label = '"'+label+'"' if !labelIsNumeric and label[0] != '$'
+    valueClass = "type php syntax--php syntax--#{@variable.type} " + switch @variable.type
+      when 'bool', 'null', 'numeric' then 'syntax--constant'
+      when 'object' then 'syntax--entity syntax--name syntax--type'
+      when 'uninitialized' then 'syntax--comment'
+      else ''
+    "<span class=\"#{labelClass}\">#{label}</span><span class=\"#{valueClass}\">#{value}</span>"
 
   render: ->
     ContextVariableListView = require "./context-variable-list-view"
     label = @variable.label
     openChildren = false
+    mapValue = {
+      bool: { '0': 'false', '1': 'true' },
+    }
     if @openpaths?
       for open in @openpaths
         if !!@parent
@@ -34,22 +51,38 @@ class ContextVariableView extends View
       when 'numeric'
         @variableView.append(@renderScalar({label: label, value:@variable.value}))
       when 'bool'
-        @variableView.append(@renderScalar({label: label, value:@variable.value}))
+        @variableView.append(@renderScalar({label: label, value: mapValue.bool[@variable.value]}))
       when 'uninitialized'
         @variableView.append(@renderScalar({label:label, value:"?"}))
       when 'error'
           @variableView.append(@renderScalar({label:label, value:helpers.escapeHtml(@variable.value)}))
       when 'null'
         @variableView.append(@renderScalar({label: label, value: "null"}))
       when 'array'
-        summary ="array["+@variable.length+"]"
-        @variableView.append(new ContextVariableListView({name: label, summary: summary, variables: @variable.value, autoopen: openChildren,parent:@parent,openpaths:@openpaths}))
+        summary ="array["+(@variable.length || @variable.value.length)+"]"
+        @variableView.append(new ContextVariableListView({
+          name: label,
+          summary: summary,
+          variables: @variable.value,
+          autoopen: openChildren,
+          parent:@parent,
+          openpaths:@openpaths,
+          type: @variable.type,
+        }))
       when 'object'
         summary ="object"
         if @variable.className
           summary += " ["+@variable.className+"]"
         properties = @variable.value
-        @variableView.append(new ContextVariableListView({name:label, summary: summary, variables: properties, autoopen: openChildren, parent:@parent,openpaths:@openpaths}))
+        @variableView.append(new ContextVariableListView({
+          name:label,
+          summary: summary,
+          variables: properties,
+          autoopen: openChildren,
+          parent:@parent,
+          openpaths:@openpaths,
+          type: @variable.type,
+        }))
       when 'resource'
         @variableView.append(@renderScalar({label:label, value: "\""+helpers.escapeHtml(@variable.value)+"\""}))
       else