show_react/popup.js at master · daverau-optimizely/show_react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
updateUI();

// Buttons
document.getElementById('off').onclick = function(e){
  setSave('off');
  updateUI();
}
document.getElementById('borders').onclick = function(e){
  setSave('borders');
  updateUI();
}
document.getElementById('outlines').onclick = function(e){
  setSave('outlines');
  updateUI();
}

function updateUI() {
  let setting = localStorage.getItem('show_react');
  if (setting === null) {
    setSave('off');
    setting = 'off';
  }
  updateButtons(setting);
  updateBadge(setting);
  injectBodyClass(setting);
}

function setSave(val) {
  localStorage.setItem('show_react',val);
}

// Add/remove target tab body class
function injectBodyClass(borderType) {
  if (typeof chrome.tabs !== 'undefined') {
    if ( borderType === 'borders' ) {
      chrome.tabs.executeScript({
        code: 'document.body.classList.add("react-borders"); document.body.classList.remove("react-outlines");'
      });
    } else if ( borderType === 'outlines' ) {
      chrome.tabs.executeScript({
        code: 'document.body.classList.add("react-outlines"); document.body.classList.remove("react-borders");'
      });
    } else {
      chrome.tabs.executeScript({
        code: 'document.body.classList.remove("react-outlines"); document.body.classList.remove("react-borders");'
      });
    }
  }
}

// Button highlight
function updateButtons(val) {
  document.getElementById('off').classList.remove('oui-button--highlight');
  document.getElementById('outlines').classList.remove('oui-button--highlight');
  document.getElementById('borders').classList.remove('oui-button--highlight');
  document.getElementById( val ).classList.add('oui-button--highlight');
}

// Toggle pink checkmark that works across tabs
function updateBadge(val) {
  if (typeof chrome.browserAction !== 'undefined') {
    if ( val !== 'off' ) {
      chrome.browserAction.setBadgeText({
        text: '✓'
      });
      chrome.browserAction.setBadgeBackgroundColor({
        color: '#FF69B4'
      });
    } else {
      chrome.browserAction.setBadgeText({
        text: ''
      });
      chrome.browserAction.setBadgeBackgroundColor({
        color: ''
      });
    }
  }
}