From 622bcb9ef4ba4e4f474a373eadd5e7e9e4f21887 Mon Sep 17 00:00:00 2001
From: Waseem Daher <wdaher@humbughq.com>
Date: Wed, 12 Dec 2012 01:43:58 -0500
Subject: [PATCH] Call the colorpicker drawing code just once, rather than in a
 tight loop.

Unfortunately, this doesn't actually give us much performance gain
either; it's not really the calls to 'find' that are taking any time.
But I do find this a little cleaner as well.

Simply initializing 100 colorpickers with our options takes about 700ms.
Initializing ~100 colorpickers with the total default set of options
shaves that down to about 300-400ms (though obviously doesn't quite
achieve what we want).

(imported from commit 7084b35fb6e77600edfcdcfcc2761a11e6f38c03)
---
 zephyr/static/js/subs.js | 64 ++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/zephyr/static/js/subs.js b/zephyr/static/js/subs.js
index c4757e6433..8909030e79 100644
--- a/zephyr/static/js/subs.js
+++ b/zephyr/static/js/subs.js
@@ -38,39 +38,47 @@ function update_historical_message_color(stream_name, color) {
     }
 }
 
+var colorpicker_options = {
+    clickoutFiresChange: true,
+    showPalette: true,
+    palette: [
+        ['a47462', 'c2726a', 'e4523d', 'e7664d', 'ee7e4a', 'f4ae55'],
+        ['76ce90', '53a063', '94c849', 'bfd56f', 'fae589', 'f5ce6e'],
+        ['a6dcbf', 'addfe5', 'a6c7e5', '4f8de4', '95a5fd', 'b0a5fd'],
+        ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
+    ],
+    change: function (color) {
+        // TODO: Kind of a hack.
+        var stream_name = $(this).parent().find('.subscription_name').text();
+        var hex_color = color.toHexString();
+        stream_colors[stream_name] = hex_color;
+        update_historical_message_color(stream_name, hex_color);
+
+        $.ajax({
+            type:     'POST',
+            url:      '/json/subscriptions/property',
+            dataType: 'json',
+            data: {
+                "property": "stream_colors",
+                "stream_name": stream_name,
+                "color": hex_color
+            },
+            timeout:  10*1000
+        });
+    }
+};
+
 // TODO: The way that we find the row is kind of fragile
 // and liable to break with streams with " in their name,
 // just like our unsubscribe button code.
 function draw_colorpicker(stream_name) {
     var colorpicker = $('#subscriptions_table').find('button[value="' + stream_name + '"]')
                                                .parent().prev().find('input');
-    colorpicker.spectrum({
-        clickoutFiresChange: true,
-        showPalette: true,
-        palette: [
-            ['a47462', 'c2726a', 'e4523d', 'e7664d', 'ee7e4a', 'f4ae55'],
-            ['76ce90', '53a063', '94c849', 'bfd56f', 'fae589', 'f5ce6e'],
-            ['a6dcbf', 'addfe5', 'a6c7e5', '4f8de4', '95a5fd', 'b0a5fd'],
-            ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
-        ],
-        change: function (color) {
-            var hex_color = color.toHexString();
-            stream_colors[stream_name] = hex_color;
-            update_historical_message_color(stream_name, hex_color);
+    colorpicker.spectrum(colorpicker_options);
+}
 
-            $.ajax({
-                type:     'POST',
-                url:      '/json/subscriptions/property',
-                dataType: 'json',
-                data: {
-                    "property": "stream_colors",
-                    "stream_name": stream_name,
-                    "color": hex_color
-                },
-                timeout:  10*1000
-            });
-        }
-    });
+function draw_all_colorpickers() {
+    $('.colorpicker').spectrum(colorpicker_options);
 }
 
 function add_to_stream_list(stream_name) {
@@ -147,9 +155,7 @@ exports.fetch = function () {
                     subscriptions.push({subscription: stream_name, color: color});
                 });
                 $('#subscriptions_table').append(templates.subscription({subscriptions: subscriptions}));
-                $.each(subscriptions, function (index, data) {
-                    draw_colorpicker(data.subscription);
-                });
+                draw_all_colorpickers();
             }
             $('#streams').focus().select();
         },