adding more colors for symbol highlighting (#1662)

* adding more colors for symbol highlighting
fixes #1634

* different class names + updating the other css styles

Author: tulinkry

src/org/opensolaris/opengrok/web/Scripts.java

@@ -125,7 +125,7 @@ public String toHtml() {
         SCRIPTS.put("jquery-tablesorter", new FileScript("js/jquery-tablesorter-2.26.6.min.js", 12));
         SCRIPTS.put("tablesorter-parsers", new FileScript("js/tablesorter-parsers-0.0.1.js", 13));
         SCRIPTS.put("searchable-option-list", new FileScript("js/searchable-option-list-2.0.3.min.js", 14));
-        SCRIPTS.put("utils", new FileScript("js/utils-0.0.9.js", 15));
+        SCRIPTS.put("utils", new FileScript("js/utils-0.0.10.js", 15));
         SCRIPTS.put("repos", new FileScript("js/repos-0.0.1.js", 20));
         SCRIPTS.put("diff", new FileScript("js/diff-0.0.1.js", 20));
     }

web/default/style.css

@@ -833,11 +833,24 @@ a.scope            { /* scope              */ color: steelblue; font-weight: bol
     max-height: 400px;
 }
 
-.symbol-highlighted {
+.symbol-highlighted.hightlight-color-1 {
+    /* yellow */
     background-color: #ffd700;
     background-color: rgb(255, 215, 0);
 }
 
+.symbol-highlighted.hightlight-color-2 {
+    /* green */
+    background-color: #00ff00;
+    background-color: rgb(0, 255, 0);
+}
+
+.symbol-highlighted.hightlight-color-3 {
+    /* blue */
+    background-color: #00ccff;
+    background-color: rgb(0, 204, 255);
+}
+
 .messages-window {
     width: 40%;
     max-height: 400px;

web/help.jsp

@@ -202,10 +202,10 @@ Key "1" toggles <dfn>Intelligence Window</dfn>.  It gives the user many helper a
 
 <h5>Symbol Highlighting</h5>
 <p>
-Key "2" toggles highlighting of the last symbol pointed by the mouse cursor.  This functionality is also accessible via the <dfn>Intelligence Window</dfn>.
+Keys "2", "3", "4" toggles highlighting of the last symbol pointed by the mouse cursor.  This functionality is also accessible via the <dfn>Intelligence Window</dfn>.
 </p>
 <p>
-Key "3" toggles unhighlighting all symbols. This functionality is also accessible via the <dfn>Intelligence Window</dfn>.
+Key "5" toggles unhighlighting all symbols. This functionality is also accessible via the <dfn>Intelligence Window</dfn>.
 </p>
 <img src="<%= PageConfig.get(request).getCssDir() %>/img/symbol-highlighting.png"/>
 
@@ -216,7 +216,7 @@ Key "3" toggles unhighlighting all symbols. This functionality is also accessibl
 <h5>Symbol jumping</h5>
 <p>
 By 'n' for next and 'b' for back you can jump between the symbols easily only with keyboard. When there is no symbol highlighted then the jump
-is made to the next symbol in the file from the current one. If you have highlighted a specific symbol then the jump is done only among the highlighted symbols.
+is made to the next symbol in the file from the current one. If you have highlighted a specific symbol then the jump is done only among the highlighted symbols regardless the color of the symbol.
 </p>
 
 <h4>Diff jumper</h4>

web/js/utils-0.0.9.js renamed to web/js/utils-0.0.10.js

@@ -807,10 +807,20 @@
                                 break;
                             case 50: // 2
                                 if (that.symbol) {
-                                    that.unhighlight(that.symbol).length === 0 && that.highlight(that.symbol);
+                                    that.unhighlight(that.symbol).length === 0 && that.highlight(that.symbol, 1);
                                 }
                                 break;
                             case 51: // 3
+                                if (that.symbol) {
+                                    that.unhighlight(that.symbol).length === 0 && that.highlight(that.symbol, 2);
+                                }
+                                break;
+                            case 52: // 4
+                                if (that.symbol) {
+                                    that.unhighlight(that.symbol).length === 0 && that.highlight(that.symbol, 3);
+                                }
+                                break;
+                            case 53: // 5
                                 that.unhighlightAll();
                                 break;
                             case 110: // n
@@ -882,13 +892,13 @@
                 getSymbols: function () {
                     return (this.$symbols = this.$symbols || $(this.options.selector));
                 },
-                highlight: function (symbol) {
+                highlight: function (symbol, color) {
                     if (this.$current.text() === symbol) {
                         this.$last_highlighted_current = this.$current;
                     }
                     return this.getSymbols().filter(function () {
                         return $(this).text() === symbol;
-                    }).addClass('symbol-highlighted')
+                    }).addClass('symbol-highlighted').addClass('hightlight-color-' + (color || 1))
                 },
                 unhighlight: function (symbol) {
                     if (this.$last_highlighted_current &&
@@ -900,11 +910,13 @@
                     return this.getSymbols().filter(".symbol-highlighted").filter(function () {
                         return $(this).text() === symbol;
                     }).removeClass('symbol-highlighted')
-
+                            .removeClass("hightlight-color-1 hightlight-color-2 hightlight-color-3");
                 },
                 unhighlightAll: function () {
                     this.$last_highlighted_current = undefined
-                    return this.getSymbols().filter(".symbol-highlighted").removeClass("symbol-highlighted")
+                    return this.getSymbols().filter(".symbol-highlighted")
+                            .removeClass("symbol-highlighted")
+                            .removeClass("hightlight-color-1 hightlight-color-2 hightlight-color-3");
                 },
                 scrollTop: function ($el) {
                     if (this.options.scrollTop) {

web/offwhite/style.css

@@ -878,11 +878,24 @@ a.scope            { /* scope              */ color: steelblue; font-weight: bol
     max-height: 400px;
 }
 
-.symbol-highlighted {
+.symbol-highlighted.hightlight-color-1 {
+    /* yellow */
     background-color: #ffd700;
     background-color: rgb(255, 215, 0);
 }
 
+.symbol-highlighted.hightlight-color-2 {
+    /* green */
+    background-color: #00ff00;
+    background-color: rgb(0, 255, 0);
+}
+
+.symbol-highlighted.hightlight-color-3 {
+    /* blue */
+    background-color: #00ccff;
+    background-color: rgb(0, 204, 255);
+}
+
 .messages-window {
     width: 40%;
     max-height: 400px;

web/polished/style.css

@@ -933,11 +933,24 @@ a.scope            { /* scope              */ color: steelblue; font-weight: bol
     max-height: 400px;
 }
 
-.symbol-highlighted {
+.symbol-highlighted.hightlight-color-1 {
+    /* yellow */
     background-color: #ffd700;
     background-color: rgb(255, 215, 0);
 }
 
+.symbol-highlighted.hightlight-color-2 {
+    /* green */
+    background-color: #00ff00;
+    background-color: rgb(0, 255, 0);
+}
+
+.symbol-highlighted.hightlight-color-3 {
+    /* blue */
+    background-color: #00ccff;
+    background-color: rgb(0, 204, 255);
+}
+
 .messages-window {
     width: 40%;
     max-height: 400px;