Added search function for styles panel.

assets/css/code.css

@@ -15,7 +15,7 @@ div.CodeMirror {
 div.CodeMirror-lines,
 div.CodeMirror-gutter-text { padding:5px; }
 
-div.CodeMirror .errors {
+div.CodeMirror .errors, div.CodeMirror .search {
   width: 12px;
 }
 
@@ -26,6 +26,12 @@ div.CodeMirror .error-marker {
   cursor: pointer;
 }
 
+div.CodeMirror .search-marker {
+  background-color: #009928;
+  width: 8px;
+  height: 16px;
+}
+
 span.cm-carto-variable           { color:#708; }
 span.cm-carto-color-variable     { color:#B60049; }
 span.cm-carto-unit               { color:#281; }

plugins/editor/views/Stylesheets.bones

@@ -131,7 +131,7 @@ view.prototype.makeStylesheet = function(model) {
         name: 'carto',
         reference: window.abilities.carto,
         onColor: this.colors,
-        gutters: ["CodeMirror-linenumbers", "errors"]
+        gutters: ["CodeMirror-linenumbers", "errors", "search"]
     });
 
     model.codemirror.on("changes", function() {
@@ -333,13 +333,13 @@ view.prototype.colors = function(color) {
 view.prototype.moveTabsLeft = function() {
     if (this.$('.tabs:animated').size() > 0) return;
 
-    var contentWidth = 0; 
+    var contentWidth = 0;
     this.$('.tabs li').each(function(i, li) {
         contentWidth += $(li).width();
     });
 
     var width = this.$('.tabs-container').width();
-    
+
     var currentMargin = parseInt(this.$('.tabs').css('margin-left'));
 
     if (-currentMargin < contentWidth - width - 1) {
@@ -368,8 +368,8 @@ view.prototype.resizeTabsBar = function() {
 };
 
 view.prototype.enableLeftRightButtons = function() {
-    
-    var contentWidth = 0; 
+
+    var contentWidth = 0;
     this.$('.tabs li').each(function(i, li) {
         contentWidth += $(li).width();
     });

templates/Project._

@@ -6,6 +6,7 @@
     <div>
        <span class='name'><%= get('name') || get('id') %></span>
        <span class='project-status' title="check the logs for more details"></span>
+		 <input name="search" class="search" value="" size="15" placeholder="Search styles..." type="text"><span class='search-results' title=""></span>
     </div>
     <div class='actions joined'>
       <a class='button disabled' href='#save'><span class='icon reverse edit labeled'></span> Save</a>

views/Project.bones

@@ -6,7 +6,8 @@ view.prototype.events = {
     'click .actions a[href=#exports]': 'exportList',
     'click a[href=#settings]': 'settings',
     'click a[href=#layers]': 'layers',
-    'click .breadcrumb .logo': 'unload'
+    'click .breadcrumb .logo': 'unload',
+	 'keyup input.search' : 'searchStyles',
 };
 
 view.prototype.initialize = function() {
@@ -21,7 +22,8 @@ view.prototype.initialize = function() {
         'exportList',
         'settings',
         'layers',
-        'unload'
+        'unload',
+		  'searchStyles'
     );
     Bones.intervals = Bones.intervals || {};
 
@@ -203,3 +205,31 @@ view.prototype.unload = function(ev) {
     return false;
 };
 
+view.prototype.searchStyles = function(ev) {
+	var val = this.$("input.search").val() || "";
+	val = val.toLowerCase();
+
+	if (val == "") {
+		for (var i=0;i<this.model.get("Stylesheet").models.length;i++) {
+			this.model.get("Stylesheet").models[i].codemirror.clearGutter("search");
+		}
+		$('.workspace .search-results').text("");
+		return;
+	}
+	var searchResults = 0;
+	for (var i=0;i<this.model.get("Stylesheet").models.length;i++) {
+		var model = this.model.get("Stylesheet").models[i];
+		var lines = model.get("data").split("\n");
+		model.codemirror.clearGutter("search");
+
+		for (var j=0;j<lines.length;j++) {
+			if (lines[j].toLowerCase().indexOf(val) != -1) {
+				var marker = document.createElement("div");
+				marker.className = "search-marker";
+				model.codemirror.setGutterMarker(j, 'search', marker);
+				searchResults++;
+			}
+		}
+	}
+	$('.workspace .search-results').text(" " + searchResults);
+}