1// Copyright (c) 2012 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5// Store CSS data in the "local" storage area.
6//
7// Usually we try to store settings in the "sync" area since a lot of the time
8// it will be a better user experience for settings to automatically sync
9// between browsers.
10//
11// However, "sync" is expensive with a strict quota (both in storage space and
12// bandwidth) so data that may be as large and updated as frequently as the CSS
13// may not be suitable.
14var storage = chrome.storage.local;
15
16// Get at the DOM controls used in the sample.
17var resetButton = document.querySelector('button.reset');
18var submitButton = document.querySelector('button.submit');
19var textarea = document.querySelector('textarea');
20
21// Load any CSS that may have previously been saved.
22loadChanges();
23
24submitButton.addEventListener('click', saveChanges);
25resetButton.addEventListener('click', reset);
26
27function saveChanges() {
28  // Get the current CSS snippet from the form.
29  var cssCode = textarea.value;
30  // Check that there's some code there.
31  if (!cssCode) {
32    message('Error: No CSS specified');
33    return;
34  }
35  // Save it using the Chrome extension storage API.
36  storage.set({'css': cssCode}, function() {
37    // Notify that we saved.
38    message('Settings saved');
39  });
40}
41
42function loadChanges() {
43  storage.get('css', function(items) {
44    // To avoid checking items.css we could specify storage.get({css: ''}) to
45    // return a default value of '' if there is no css value yet.
46    if (items.css) {
47      textarea.value = items.css;
48      message('Loaded saved CSS.');
49    }
50  });
51}
52
53function reset() {
54  // Remove the saved value from storage. storage.clear would achieve the same
55  // thing.
56  storage.remove('css', function(items) {
57    message('Reset stored CSS');
58  });
59  // Refresh the text area.
60  textarea.value = '';
61}
62
63function message(msg) {
64  var message = document.querySelector('.message');
65  message.innerText = msg;
66  setTimeout(function() {
67    message.innerText = '';
68  }, 3000);
69}
70