From 34cc000ef8932d3eaac985069f64943ef981c335 Mon Sep 17 00:00:00 2001
From: Alexey Skobkin <skobkin-ru@ya.ru>
Date: Mon, 24 Nov 2014 01:01:33 +0400
Subject: [PATCH] - Dynamic options save/load - Warning for @NokitaKaze - Some
 shit-like codestyle corrections

---
 chrome_point_plus/css/point-plus.css |   8 +-
 chrome_point_plus/js/options.js      | 170 +++++++++------------------
 chrome_point_plus/js/point-plus.js   |  99 ++++++++--------
 chrome_point_plus/manifest.json      |   2 +-
 chrome_point_plus/options.html       | 152 ++++++++++++------------
 5 files changed, 187 insertions(+), 244 deletions(-)

diff --git a/chrome_point_plus/css/point-plus.css b/chrome_point_plus/css/point-plus.css
index 9e54d19..7ede9c6 100644
--- a/chrome_point_plus/css/point-plus.css
+++ b/chrome_point_plus/css/point-plus.css
@@ -115,12 +115,12 @@ div#markItUpText-input {
     padding: 5px 0 0 5px;
 }
 
-.pp-options .option {
+.pp-options .option-node {
     display: block;
     margin: 5px 0 5px 15px;
 }
 
-.pp-options .option label {
+.pp-options .option-node label {
     font: 10pt Georgia;
     color: #FFF;
 }
@@ -130,11 +130,11 @@ div#markItUpText-input {
 }
 
 /* Disables subcheckboxes if parent disabled */
-.pp-options .option input[type="checkbox"]:not(:checked) ~.option {
+.pp-options .option-node input[type="checkbox"]:not(:checked) ~.option-node {
     display: none;
 }
 
-.pp-options .option input[type="checkbox"]:not(:checked) ~.option label {
+.pp-options .option-node input[type="checkbox"]:not(:checked) ~.option-node label {
     color: #BBB;
 }
 
diff --git a/chrome_point_plus/js/options.js b/chrome_point_plus/js/options.js
index e939c7f..779ac76 100644
--- a/chrome_point_plus/js/options.js
+++ b/chrome_point_plus/js/options.js
@@ -1,108 +1,30 @@
-var ppOptions = [
-    // Fancybox
-    'option_fancybox',
-        // Open images in Fancybox
-        'option_fancybox_images',
-        // Open videos in Fancybox
-        'option_fancybox_videos',
-        // Open posts in Fancybox
-        'option_fancybox_posts',
-        // Bind all images from fancybox to one flow
-        'option_fancybox_bind_images_to_one_flow',
-    // Load original images
-    'option_images_load_original',
-    // Embedding
-    'option_embedding',
-        // Load images from Gelbooru, Danbooru, etc
-        'option_images_load_booru',
-        // Wrap WEBM videos into the <video> tag
-        'option_videos_parse_webm',
-            'option_videos_parse_all_videos',
-        // SoundCloud
-        'option_embedding_soundcloud',
-            'option_embedding_soundcloud_orig_link',
-        // Pleer.com
-        'option_embedding_pleercom',
-            'option_embedding_pleercom_nokita_server',
-    // NSFW filtering
-    'option_nsfw',
-        'option_nsfw_hide_posts',
-        // Blured pictures
-        'option_nsfw_blur_posts_images',
-        'option_nsfw_blur_posts_entire',
-        // Blur comments too
-        'option_nsfw_blur_comments_images',
-        'option_nsfw_blur_comments_entire',
-    // CTRL+Enter
-    'option_ctrl_enter',
-    // Fluid layout
-    'option_fluid_layout', 
-    // Visual editor for posts
-    'option_visual_editor_post', 
-    // Google search
-    'option_search_with_google', 
-    // WebSocket
-    'option_ws', 
-        // Comments
-        'option_ws_comments', 'option_ws_comments_color_fadeout', 'option_ws_comments_notifications',
-        // Feeds
-        'option_ws_feeds', 'option_ws_feeds_subscriptions', 'option_ws_feeds_blogs',
-    // Font size
-    'option_enlarge_font', 'option_enlarge_font_size',
-    // @ before username
-    'option_at_before_username',
-    // Highlight posts with new comments
-    'option_other_hightlight_post_comments',
-    // Show recommendations and unique comments count
-    'option_other_show_recommendation_count',
-    // Scrolling posts with `space` key
-    'option_other_scroll_space_key',
-];
+var ppOptions = {};
 
 // Saves options to localStorage.
 function pp_save_options() {
-    ppOptions = {};
-    ppOptions.option_ctrl_enter = $('#option-ctrl-enter').prop('checked');
-    ppOptions.option_fancybox = $('#option-fancybox').prop('checked');
-    ppOptions.option_fancybox_images = $('#option-fancybox-images').prop('checked');
-    ppOptions.option_fancybox_videos = $('#option-fancybox-videos').prop('checked');
-    ppOptions.option_fancybox_posts = $('#option-fancybox-posts').prop('checked');
-    ppOptions.option_fancybox_bind_images_to_one_flow = $('#option-fancybox-bind-images-to-one-flow').prop('checked');
-    ppOptions.option_fluid_layout = $('#option-fluid-layout').prop('checked');
-    ppOptions.option_images_load_original = $('#option-images-load-original').prop('checked');
-    ppOptions.option_embedding = $('#option-embedding').prop('checked');
-    ppOptions.option_images_load_booru = $('#option-images-load-booru').prop('checked');
-    ppOptions.option_videos_parse_webm = $('#option-videos-parse-webm').prop('checked');
-    ppOptions.option_videos_parse_all_videos = $('#option-videos-parse-all-videos').prop('checked');
-    ppOptions.option_embedding_soundcloud = $('#option-embedding-soundcloud').prop('checked');
-    ppOptions.option_embedding_soundcloud_orig_link = $('#option-embedding-soundcloud-orig-link').prop('checked');
-    ppOptions.option_embedding_pleercom = $('#option-embedding-pleercom').prop('checked');
-    ppOptions.option_embedding_pleercom_nokita_server = $('#option-embedding-pleercom-nokita-server').prop('checked');
-    ppOptions.option_nsfw = $('#option-nsfw').prop('checked');
-    ppOptions.option_nsfw_hide_posts = $('#option-nsfw-hide-posts').prop('checked');
-    ppOptions.option_nsfw_blur_posts_images = $('#option-nsfw-blur-posts-images').prop('checked');
-    ppOptions.option_nsfw_blur_posts_entire = $('#option-nsfw-blur-posts-entire').prop('checked');
-    ppOptions.option_nsfw_blur_comments_images = $('#option-nsfw-blur-comments-images').prop('checked');
-    ppOptions.option_nsfw_blur_comments_entire = $('#option-nsfw-blur-comments-entire').prop('checked');
-    ppOptions.option_visual_editor_post = $('#option-visual-editor-post').prop('checked');
-    ppOptions.checkbox_search_with_google = $('#option-search-with-google').prop('checked');
-    ppOptions.option_ws = $('#option-ws').prop('checked');
-    ppOptions.option_ws_comments = $('#option-ws-comments').prop('checked');
-    ppOptions.option_ws_comments_color_fadeout = $('#option-ws-comments-color-fadeout').prop('checked');
-    ppOptions.option_ws_comments_notifications = $('#option-ws-comments-notifications').prop('checked');
-    ppOptions.option_ws_feeds = $('#option-ws-feeds').prop('checked');
-    ppOptions.option_ws_feeds_subscriptions = $('#option-ws-feeds-subscriptions').prop('checked');
-    ppOptions.option_ws_feeds_blogs = $('#option-ws-feeds-blogs').prop('checked');
-    ppOptions.option_enlarge_font = $('#option-enlarge-font').prop('checked');
-    ppOptions.option_enlarge_font_size = document.querySelector('input[name="pp-font-size"]:checked').value;
-    ppOptions.option_at_before_username = $('#option-at-before-username').prop('checked');
-    ppOptions.option_other_hightlight_post_comments = $('#option-other-hightlight-post-comments').prop('checked');
-    ppOptions.option_other_show_recommendation_count = $('#option-other-show-recommendation-count').prop('checked');
-    ppOptions.option_other_scroll_space_key = $('#option-other-scroll-space-key').prop('checked');
-
+    $('.option-node').find('input').each(function(idx, $input) {
+        console.log($(this));
+        
+        // Using option types
+        if ($(this).hasClass('option-boolean')) {
+            ppOptions[$(this).prop('id').replace(/-/g, '_')] = {
+                'type': 'boolean',
+                'value': $(this).prop('checked')
+            };
+        } else if ($(this).hasClass('option-enum')) {
+            if ($(this).prop('checked')) {
+                ppOptions[$(this).prop('name').replace(/-/g, '_')] = {
+                    'type': 'enum',
+                    'value': $(this).val()
+                }
+            }
+        }
+    });
+    
+    console.log('Saving options: %O', ppOptions);
 
     // Saving parameters
-    chrome.storage.sync.set(ppOptions, function() {
+    chrome.storage.sync.set({'options': ppOptions}, function() {
         // Update status to let user know options were saved.
         $('#status').html(chrome.i18n.getMessage('options_text_saved'));
     });
@@ -110,23 +32,39 @@ function pp_save_options() {
 
 // Restores select box state to saved value from localStorage.
 function pp_restore_options() {
-    // Loading options
-    chrome.storage.sync.get(ppOptions, function(options) {
-        // Setting options in DOM
-        $.each(options, function(key, value) {
-            var optionId = null;
-            
-            // Detecting option type
-            if (typeof(value) == 'boolean') {
-                // Checkbox
-                if (value === true) {
-                    optionId = '#' + key.replace(/_/g, '-');
-                    $(optionId).first().prop('checked', true);
+    // Cleaning old style options
+    // Delete after some time
+    chrome.storage.sync.get('option_fancybox', function(value) {
+        if (value === true || value === false) {
+            console.log('Found old-style options. Cleaning...');
+            chrome.storage.sync.get(null, function(old_options) {
+                console.log('Old data: %O', old_options);
+                for (option in old_options) {
+                    chrome.storage.sync.remove(option);
                 }
-            } else if (typeof(value) == 'number') {
-                // Radio select
-                optionId = '#' + key.replace(/_/g, '-') + '-' + value;
-                $(optionId).first().prop('checked', true);
+                console.log('All old data removed');
+            });
+        }
+    });
+    
+    // Loading options
+    chrome.storage.sync.get('options', function(options) {
+        // Setting options in DOM
+        $.each(options.options, function(key, data) {
+            switch (data.type) {
+                case 'boolean':
+                    if (data.value) {
+                        $('#' + key.replace(/_/g, '-')).prop('checked', true);
+                    }
+                    break;
+                    
+                case 'enum':
+                    $('.option-node .option-enum[name="' + key.replace(/_/g, '-') + '"][value="' + data.value + '"]').prop('checked', true);
+                    break;
+                    
+                default:
+                    console.warn('Invalid option "%s" type: %O', key, data);
+                    break;
             }
         });
         
diff --git a/chrome_point_plus/js/point-plus.js b/chrome_point_plus/js/point-plus.js
index d425cab..6f1b49b 100644
--- a/chrome_point_plus/js/point-plus.js
+++ b/chrome_point_plus/js/point-plus.js
@@ -4,35 +4,40 @@ $(document).ready(function() {
     console.info('Point+ %s', getVersion());
 
     // Проверяем, загрузились ли мы
-    var point_plus_debug=$('.point-plus-debug');
+    // @todo: Убрать это говно и нормально пилить расширение не принося пользователям костыли
+    // Хочешь детект? Делай невидимый элемент где-нибудь в подвале. И айдишник, а не класс. Их искать быстрее.
+    // Хочешь показать пользователю обработку - делай индикатор и встраивай в интерфейс сайта.
+    var point_plus_debug = $('.point-plus-debug');
     if (point_plus_debug.length > 0){
         console.info('Point+ already loaded, version: %s', point_plus_debug.attr('data-point-plus-version'));
         return;
     }
     point_plus_debug = null;
-    var new_div=document.createElement('div');
+    var new_div = document.createElement('div');
     document.body.appendChild(new_div);
     $(new_div).attr({
         'data-point-plus-version':getVersion()
-    }).addClass('point-plus-debug').html('Point+ v'+getVersion()+' loading...');
-    new_div=null;
+    }).addClass('point-plus-debug').html('Point+ v' + getVersion() + ' loading...');
+    new_div = null;
 
     // Loading options
-    chrome.storage.sync.get(ppOptions, function (options) {
+    chrome.storage.sync.get('options', function(options_data) {
+        var options = options_data.options;
+        
         // Options debug
         console.debug('Options loaded: %O', options);
 
         create_tag_system();
 
         // Embedding
-        if (options.option_embedding == true) {
+        if (options.option_embedding.value == true) {
             // Load pictures from Booru, Tumblr and some other sites
-            if (options.option_images_load_booru == true) {
+            if (options.option_images_load_booru.value == true) {
                 load_all_booru_images();
             }
             // Parse webm-links and create video instead
-            if (options.option_videos_parse_webm == true) {
-                if (options.option_videos_parse_all_videos == true) {
+            if (options.option_videos_parse_webm.value == true) {
+                if (options.option_videos_parse_all_videos.value == true) {
                     parse_all_videos();
                 } else {
                     parse_webm();
@@ -40,7 +45,7 @@ $(document).ready(function() {
             }
 
             // Soundcloud
-            if (options.option_embedding_soundcloud == true) {
+            if (options.option_embedding_soundcloud.value == true) {
                 // Injecting JS API
                 chrome.extension.sendMessage({
                     type: 'injectJSFile',
@@ -48,7 +53,7 @@ $(document).ready(function() {
                 });
 
                 // Processing links 
-                $('.post .post-content a[href*="\\:\\/\\/soundcloud\\.com\\/"]').each(function (index) {
+                $('.post .post-content a[href*="\\:\\/\\/soundcloud\\.com\\/"]').each(function(index) {
                     console.log($(this));
 
                     $player = $('<div class="pp-soundcloud">\
@@ -63,7 +68,7 @@ $(document).ready(function() {
                                 </div>');
 
                     // Replace or prepend
-                    if (options.option_embedding_soundcloud_orig_link == true) {
+                    if (options.option_embedding_soundcloud_orig_link.value == true) {
                         // Before
                         $(this).before($player);
                     } else {
@@ -74,25 +79,25 @@ $(document).ready(function() {
 
             }
             // Parse webm-links and create video instead
-            if (options.option_embedding_pleercom == true) {
+            if (options.option_embedding_pleercom.value == true) {
                 parse_pleercom_links();
             }
         }
 
         // Fancybox
-        if (options.option_fancybox == true) {
-            if (options.option_fancybox_bind_images_to_one_flow == true) {
+        if (options.option_fancybox.value == true) {
+            if (options.option_fancybox_bind_images_to_one_flow.value == true) {
                 // Linking images in posts to the galleries
-                $('.post-content .text').each(function () {
+                $('.post-content .text').each(function() {
                     $(this).find('a.postimg:not(.youtube)').attr('data-fancybox-group', 'one_flow_gallery');
                 });
             }
 
             // Images
-            if (options.option_fancybox_images == true) {
-                if (options.option_fancybox_bind_images_to_one_flow !== true) {
+            if (options.option_fancybox_images.value == true) {
+                if (options.option_fancybox_bind_images_to_one_flow.value !== true) {
                     // Linking images in posts to the galleries
-                    $('.post-content .text').each(function (idxPost) {
+                    $('.post-content .text').each(function(idxPost) {
                         $(this).find('a.postimg:not(.youtube)').attr('data-fancybox-group', 'post' + idxPost);
                     });
                 }
@@ -102,7 +107,7 @@ $(document).ready(function() {
                 });
             }
             // Правим хинт в FancyBox
-            $('.post').each(function () {
+            $('.post').each(function() {
                 var all_post_images = $(this).find('.postimg');
                 if (all_post_images.length == 0) {
                     return;
@@ -146,7 +151,7 @@ $(document).ready(function() {
             });
 
             // Videos
-            if (options.option_fancybox_videos == true) {
+            if (options.option_fancybox_videos.value == true) {
                 $('.postimg.youtube').addClass('fancybox-media').fancybox({
                     helpers: {
                         media: {
@@ -160,7 +165,7 @@ $(document).ready(function() {
                 });
             }
             // Posts
-            if (options.option_fancybox_posts == true) {
+            if (options.option_fancybox_posts.value == true) {
                 // Excluding some sort of piece-of-shit makeup
                 $('.post-id a').not('#comments .post-id a, #top-post .post-id a').attr('data-fancybox-type', 'iframe').fancybox({
                     maxWidth: 780
@@ -169,20 +174,20 @@ $(document).ready(function() {
         }
 
         // NSFW Filtering
-        if (options.option_nsfw == true) {
+        if (options.option_nsfw.value == true) {
             $('.post-tag-nsfw,.post-tag-сиськи').find('a.postimg:not(.youtube)').attr('data-fancybox-group', 'hidden-images');
 
-            if (options.option_nsfw_hide_posts == true) {
+            if (options.option_nsfw_hide_posts.value == true) {
                 if ($('#comments').length == 0) {
                     console.log('Hide NSFW posts in feed');
                     $('.post').addClass('hide-nsfw-posts');
                 }
             } else {
                 // Blurred posts
-                if (options.option_nsfw_blur_posts_entire == true) {
+                if (options.option_nsfw_blur_posts_entire.value == true) {
                     console.log('Bluring NSFW posts');
                     $('.post').addClass('blur-nsfw-entire');
-                } else if (options.option_nsfw_blur_posts_images == true) {
+                } else if (options.option_nsfw_blur_posts_images.value == true) {
                     console.log('Bluring images in NSFW posts');
                     $('.post').addClass('blur-nsfw-images');
                 }
@@ -190,10 +195,10 @@ $(document).ready(function() {
 
             // Blurred comments
             if ($('.post').hasClass('post-tag-nsfw') || $('.post').hasClass('post-tag-сиськи')) {
-                if (options.option_nsfw_blur_comments_entire == true) {
+                if (options.option_nsfw_blur_comments_entire.value == true) {
                     console.log('Bluring comments');
                     $('#comments').addClass('blur-nsfw-entire');
-                } else if (options.option_nsfw_blur_comments_images == true) {
+                } else if (options.option_nsfw_blur_comments_images.value == true) {
                     // @hint Никита Ветров официально складывает с себя все претензии, если у кого-то от этого говна упадёт драйвер видео-карты
                     console.log('Bluring images in comments');
                     $('#comments').addClass('blur-nsfw-images');
@@ -203,17 +208,17 @@ $(document).ready(function() {
 
         // Hotkeys
         // Send by CTRL+Enter
-        if (options.option_ctrl_enter == true) {
+        if (options.option_ctrl_enter.value == true) {
             // Reply
             // Delegated event for all comments
-            $('.content-wrap #comments').on('keydown.point_plus', '.reply-form textarea', function (e) {
+            $('.content-wrap #comments').on('keydown.point_plus', '.reply-form textarea', function(e) {
                 if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)) {
                     e.preventDefault();
                     $(this).parent('.reply-form').submit();
                 }
             });
             // New post
-            $('#new-post-form #text-input,#new-post-form #tags-input').on('keydown.point_plus', function (e) {
+            $('#new-post-form #text-input,#new-post-form #tags-input').on('keydown.point_plus', function(e) {
                 if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)) {
                     e.preventDefault();
                     $(this).parent('#new-post-form').submit();
@@ -222,7 +227,7 @@ $(document).ready(function() {
         }
         // Look and feel
         // Fluid #main layout
-        if (options.option_fluid_layout == true) {
+        if (options.option_fluid_layout.value == true) {
             $('#main, #header, #subheader, #footer').css({
                 'width': '95%',
                 'max-width': '95%'
@@ -230,7 +235,7 @@ $(document).ready(function() {
             // TODO: fix #main #left-menu #top-link position
         }
         // Image resizing
-        if (options.option_images_load_original == true) {
+        if (options.option_images_load_original.value == true) {
             // Setting new image source
             $('.postimg:not(.youtube) img').each(function() {
                 console.log($(this).parent('.postimg').attr('href'));
@@ -245,14 +250,14 @@ $(document).ready(function() {
             });
         }
         // Visual editor
-        if (options.option_visual_editor_post == true) {
+        if (options.option_visual_editor_post.value == true) {
             // Add classes
             $('#new-post-form #text-input, .post-content #text-input').addClass('markitup').css('height', '20em');
             // Init
             $('.markitup').markItUp(mySettings);
 
             // Send by CTRL+Enter
-            if (options.option_ctrl_enter == true) {
+            if (options.option_ctrl_enter.value == true) {
                 // New post
                 $('#new-post-form #text-input, .post-content #text-input').on('keydown.point_plus', function(e) {
                     if (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13)) {
@@ -263,7 +268,7 @@ $(document).ready(function() {
             }
         }
         // Google search
-        if (options.option_search_with_google == true) {
+        if (options.option_search_with_google.value == true) {
             $('#search-form input[type="text"]').attr('placeholder', 'Google').keydown(function(e) {
                 if (e.keyCode == 10 || e.keyCode == 13) {
                     e.preventDefault();
@@ -272,7 +277,7 @@ $(document).ready(function() {
             });
         }
         // WebSocket
-        if (options.option_ws == true) {
+        if (options.option_ws.value == true) {
             // SSL or plain
             ws = new WebSocket(((location.protocol == 'https:') ? 'wss' : 'ws') + '://point.im/ws');
             console.log('WebSocket created: %O', ws);
@@ -285,7 +290,7 @@ $(document).ready(function() {
             console.debug('Comments view mode: %s', treeSwitch);
 
             // Error handler
-            ws.onerror = function (err) {
+            ws.onerror = function(err) {
                 console.error('WebSocket error: %O', err);
             };
 
@@ -306,7 +311,7 @@ $(document).ready(function() {
                                     console.debug(wsMessage);
 
                                     // Check option
-                                    if (options.option_ws_comments != true) {
+                                    if (options.option_ws_comments.value != true) {
                                         console.log('Comments processing disabled');
                                         console.groupEnd();
                                         break;
@@ -418,13 +423,13 @@ $(document).ready(function() {
                                         $commentTemplate.before($anchor);
 
                                         // Fading out highlight if needed
-                                        if (options.option_ws_comments_color_fadeout == true) {
+                                        if (options.option_ws_comments_color_fadeout.value == true) {
                                             console.log('Fading out the highlight');
                                             $commentTemplate.children('.pp-highlight').fadeOut(20000);
                                         }
 
                                         // Desktop notifications
-                                        if (options.option_ws_comments_notifications == true) {
+                                        if (options.option_ws_comments_notifications.value == true) {
                                             console.log('Showing desktop notification');
                                             chrome.extension.sendMessage({
                                                 type: 'showNotification',
@@ -480,11 +485,11 @@ $(document).ready(function() {
             };
         }
         // Font size
-        if ((options.option_enlarge_font == true) && (options.option_enlarge_font_size !== undefined)) {
-            $('body').css('font-size', (options.option_enlarge_font_size / 100) + 'em');
+        if ((options.option_enlarge_font.value == true) && (options.option_enlarge_font_size.value !== undefined)) {
+            $('body').css('font-size', (options.option_enlarge_font_size.value / 100) + 'em');
         }
         // @ before username
-        if (options.option_at_before_username == true) {
+        if (options.option_at_before_username.value == true) {
             chrome.extension.sendMessage({
                 type: 'injectCSSFile',
                 file: 'css/modules/at_before_username.css'
@@ -492,15 +497,15 @@ $(document).ready(function() {
         }
 
         // Hightlight post with new comments
-        if (options.option_other_hightlight_post_comments == true) {
+        if (options.option_other_hightlight_post_comments.value == true) {
             mark_unread_post();
         }
         // Show recommendation count and unique commentators count
-        if (options.option_other_show_recommendation_count == true) {
+        if (options.option_other_show_recommendation_count.value == true) {
             set_posts_count_label();
         }
         // `Space` key scroll handler
-        if (options.option_other_scroll_space_key == true){
+        if (options.option_other_scroll_space_key.value == true){
             set_space_key_skip_handler();
         }
 
diff --git a/chrome_point_plus/manifest.json b/chrome_point_plus/manifest.json
index 6e24aef..5b5e7a0 100644
--- a/chrome_point_plus/manifest.json
+++ b/chrome_point_plus/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Point+",
-    "version": "1.14.2",
+    "version": "1.15.0",
     "default_locale": "ru",
     "author": "__MSG_ext_author__",
     "homepage_url": "https://bitbucket.org/skobkin/chrome_point_plus",
diff --git a/chrome_point_plus/options.html b/chrome_point_plus/options.html
index 6589ae5..629fe36 100644
--- a/chrome_point_plus/options.html
+++ b/chrome_point_plus/options.html
@@ -18,156 +18,156 @@
             
             <div id="tabs-content">
                 <div class="tab-content" id="media">
-                    <div class="option">
-                        <input type="checkbox" id="option-fancybox"><label for="option-fancybox" data-i18n="option_fancybox"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-fancybox"><label for="option-fancybox" data-i18n="option_fancybox"></label>
                         
-                        <div class="option">
-                            <input type="checkbox" id="option-fancybox-images"><label for="option-fancybox-images" data-i18n="option_fancybox_images"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-fancybox-images"><label for="option-fancybox-images" data-i18n="option_fancybox_images"></label>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-fancybox-videos"><label for="option-fancybox-videos" data-i18n="option_fancybox_videos"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-fancybox-videos"><label for="option-fancybox-videos" data-i18n="option_fancybox_videos"></label>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-fancybox-posts"><label for="option-fancybox-posts" data-i18n="option_fancybox_posts"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-fancybox-posts"><label for="option-fancybox-posts" data-i18n="option_fancybox_posts"></label>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-fancybox-bind-images-to-one-flow"><label for="option-fancybox-bind-images-to-one-flow" data-i18n="option_fancybox_bind_images_to_one_flow"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-fancybox-bind-images-to-one-flow"><label for="option-fancybox-bind-images-to-one-flow" data-i18n="option_fancybox_bind_images_to_one_flow"></label>
                         </div>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-images-load-original"><label for="option-images-load-original" data-i18n="option_images_load_original"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-images-load-original"><label for="option-images-load-original" data-i18n="option_images_load_original"></label>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-embedding"><label for="option-embedding" data-i18n="option_embedding"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-embedding"><label for="option-embedding" data-i18n="option_embedding"></label>
                         
-                        <div class="option">
-                            <input type="checkbox" id="option-images-load-booru"><label for="option-images-load-booru" data-i18n="option_images_load_booru"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-images-load-booru"><label for="option-images-load-booru" data-i18n="option_images_load_booru"></label>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-videos-parse-webm"><label for="option-videos-parse-webm" data-i18n="option_videos_parse_webm"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-videos-parse-webm"><label for="option-videos-parse-webm" data-i18n="option_videos_parse_webm"></label>
 
-                            <div class="option">
-                                <input type="checkbox" id="option-videos-parse-all-videos"><label for="option-videos-parse-all-videos" data-i18n="option_videos_parse_all_videos"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-videos-parse-all-videos"><label for="option-videos-parse-all-videos" data-i18n="option_videos_parse_all_videos"></label>
                             </div>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-embedding-soundcloud"><label for="option-embedding-soundcloud" data-i18n="option_embedding_soundcloud"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-embedding-soundcloud"><label for="option-embedding-soundcloud" data-i18n="option_embedding_soundcloud"></label>
                             
-                            <div class="option">
-                                <input type="checkbox" id="option-embedding-soundcloud-orig-link"><label for="option-embedding-soundcloud-orig-link" data-i18n="option_embedding_soundcloud_orig_link"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-embedding-soundcloud-orig-link"><label for="option-embedding-soundcloud-orig-link" data-i18n="option_embedding_soundcloud_orig_link"></label>
                             </div>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-embedding-pleercom"><label for="option-embedding-pleercom" data-i18n="option_embedding_pleercom"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-embedding-pleercom"><label for="option-embedding-pleercom" data-i18n="option_embedding_pleercom"></label>
 
-                            <div class="option">
-                                <input type="checkbox" id="option-embedding-pleercom-nokita-server"><label for="option-embedding-pleercom-nokita-server" data-i18n="option_embedding_pleercom_nokita_server"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-embedding-pleercom-nokita-server"><label for="option-embedding-pleercom-nokita-server" data-i18n="option_embedding_pleercom_nokita_server"></label>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="option">
-                        <input type="checkbox" id="option-nsfw"><label for="option-nsfw" data-i18n="option_nsfw"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-nsfw"><label for="option-nsfw" data-i18n="option_nsfw"></label>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-nsfw-hide-posts"><label for="option-nsfw-hide-posts" data-i18n="option_nsfw_hide_posts"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-nsfw-hide-posts"><label for="option-nsfw-hide-posts" data-i18n="option_nsfw_hide_posts"></label>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-nsfw-blur-posts-images"><label for="option-nsfw-blur-posts-images" data-i18n="option_nsfw_blur_posts_images"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-nsfw-blur-posts-images"><label for="option-nsfw-blur-posts-images" data-i18n="option_nsfw_blur_posts_images"></label>
 
-                            <div class="option">
-                                <input type="checkbox" id="option-nsfw-blur-posts-entire"><label for="option-nsfw-blur-posts-entire" data-i18n="option_nsfw_blur_posts_entire"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-nsfw-blur-posts-entire"><label for="option-nsfw-blur-posts-entire" data-i18n="option_nsfw_blur_posts_entire"></label>
                             </div>
                         </div>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-nsfw-blur-comments-images"><label for="option-nsfw-blur-comments-images" data-i18n="option_nsfw_blur_comments_images"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-nsfw-blur-comments-images"><label for="option-nsfw-blur-comments-images" data-i18n="option_nsfw_blur_comments_images"></label>
 
-                            <div class="option">
-                                <input type="checkbox" id="option-nsfw-blur-comments-entire"><label for="option-nsfw-blur-comments-entire" data-i18n="option_nsfw_blur_comments_entire"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-nsfw-blur-comments-entire"><label for="option-nsfw-blur-comments-entire" data-i18n="option_nsfw_blur_comments_entire"></label>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="tab-content" id="other">
-                    <div class="option">
-                        <input type="checkbox" id="option-ctrl-enter" disabled="disabled"><label for="option-ctrl-enter" data-i18n="option_ctrl_enter"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-ctrl-enter" disabled="disabled"><label for="option-ctrl-enter" data-i18n="option_ctrl_enter"></label>
                     </div>
                     
-                    <div class="option">
-                        <input type="checkbox" id="option-fluid-layout"><label for="option-fluid-layout" data-i18n="option_fluid_layout"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-fluid-layout"><label for="option-fluid-layout" data-i18n="option_fluid_layout"></label>
                     </div>
                     
-                    <div class="option">
-                        <input type="checkbox" id="option-visual-editor-post"><label for="option-visual-editor-post" data-i18n="option_visual_editor_post"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-visual-editor-post"><label for="option-visual-editor-post" data-i18n="option_visual_editor_post"></label>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-search-with-google"><label for="option-search-with-google" data-i18n="option_search_with_google"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-search-with-google"><label for="option-search-with-google" data-i18n="option_search_with_google"></label>
                     </div>
                     
-                    <div class="option">
-                        <input type="checkbox" id="option-enlarge-font"><label for="option-enlarge-font" data-i18n="option_enlarge_font"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-enlarge-font"><label for="option-enlarge-font" data-i18n="option_enlarge_font"></label>
                         
-                        <div class="option">
-                            <input name="pp-font-size" id="option-enlarge-font-85" type="radio" value="85" checked="checked"><label for="option-enlarge-font-85">0.85em</label>
-                            <input name="pp-font-size" id="option-enlarge-font-100" type="radio" value="100"><label for="option-enlarge-font-100">1em</label>
-                            <input name="pp-font-size" id="option-enlarge-font-110" type="radio" value="110"><label for="option-enlarge-font-110">1.1em</label>
+                        <div class="option-node">
+                            <input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-85" value="85" checked="checked"><label for="option-enlarge-font-size-85">0.85em</label>
+                            <input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-100" value="100"><label for="option-enlarge-font-size-100">1em</label>
+                            <input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-110" value="110"><label for="option-enlarge-font-size-110">1.1em</label>
                         </div>
                     </div>
                     
-                    <div class="option">
-                        <input type="checkbox" id="option-at-before-username"><label for="option-at-before-username" data-i18n="option_at_before_username"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-at-before-username"><label for="option-at-before-username" data-i18n="option_at_before_username"></label>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-other-hightlight-post-comments"><label for="option-other-hightlight-post-comments" data-i18n="option_other_hightlight_post_comments"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-other-hightlight-post-comments"><label for="option-other-hightlight-post-comments" data-i18n="option_other_hightlight_post_comments"></label>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-other-show-recommendation-count"><label for="option-other-show-recommendation-count" data-i18n="option_other_show_recommendation_count"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-other-show-recommendation-count"><label for="option-other-show-recommendation-count" data-i18n="option_other_show_recommendation_count"></label>
                     </div>
 
-                    <div class="option">
-                        <input type="checkbox" id="option-other-scroll-space-key"><label for="option-other-scroll-space-key" data-i18n="option_other_scroll_space_key"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-other-scroll-space-key"><label for="option-other-scroll-space-key" data-i18n="option_other_scroll_space_key"></label>
                     </div>
                 </div>
                 
                 <div class="tab-content" id="websocket">
-                    <div class="option">
-                        <input type="checkbox" id="option-ws"><label for="option-ws" data-i18n="option_ws"></label>
+                    <div class="option-node">
+                        <input type="checkbox" class="option-boolean" id="option-ws"><label for="option-ws" data-i18n="option_ws"></label>
 
-                        <div class="option">
-                            <input type="checkbox" id="option-ws-comments"><label for="option-ws-comments" data-i18n="option_ws_comments"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-ws-comments"><label for="option-ws-comments" data-i18n="option_ws_comments"></label>
                             
-                            <div class="option">
-                                <input type="checkbox" id="option-ws-comments-color-fadeout"><label for="option-ws-comments-color-fadeout" data-i18n="option_ws_comments_color_fadeout"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-ws-comments-color-fadeout"><label for="option-ws-comments-color-fadeout" data-i18n="option_ws_comments_color_fadeout"></label>
                             </div>
                             
-                            <div class="option">
-                                <input type="checkbox" id="option-ws-comments-notifications"><label for="option-ws-comments-notifications" data-i18n="option_ws_comments_notifications"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-ws-comments-notifications"><label for="option-ws-comments-notifications" data-i18n="option_ws_comments_notifications"></label>
                             </div>
                         </div>
                         
-                        <div class="option">
-                            <input type="checkbox" id="option-ws-feeds" disabled><label for="option-ws-feeds" data-i18n="option_ws_feeds"></label>
+                        <div class="option-node">
+                            <input type="checkbox" class="option-boolean" id="option-ws-feeds" disabled><label for="option-ws-feeds" data-i18n="option_ws_feeds"></label>
                             
-                            <div class="option">
-                                <input type="checkbox" id="option-ws-feeds-subscriptions"><label for="option-ws-feeds-subscriptions" data-i18n="option_ws_feeds_subscriptions"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-ws-feeds-subscriptions"><label for="option-ws-feeds-subscriptions" data-i18n="option_ws_feeds_subscriptions"></label>
                             </div>
                             
-                            <div class="option">
-                                <input type="checkbox" id="option-ws-feeds-blogs"><label for="option-ws-feeds-blogs" data-i18n="option_ws_feeds_blogs"></label>
+                            <div class="option-node">
+                                <input type="checkbox" class="option-boolean" id="option-ws-feeds-blogs"><label for="option-ws-feeds-blogs" data-i18n="option_ws_feeds_blogs"></label>
                             </div>
                         </div>
                     </div>