Merge pull request #4 from nikrolls/more-themes

Added remainder of themes based on Ace Cloud Editor

src/js/content.js

@@ -17,12 +17,9 @@ port.onMessage.addListener(function(message) {
       const themeName = themes[message[1]] ? message[1] : themes.default;
       switchToTheme(themes[themeName]);
 
-      if (themeName === 'dawn') {
-        document.getElementById('buttonLight').classList.add('selected');
-        document.getElementById('buttonDark').classList.remove('selected');
-      } else if (themeName === 'monokai') {
-        document.getElementById('buttonLight').classList.remove('selected');
-        document.getElementById('buttonDark').classList.add('selected');
+      const themeSelectOption = document.getElementById('themeSelect').querySelector(`[value="${themeName}"]`);
+      if (themeSelectOption) {
+        themeSelectOption.selected = true;
       }
 
       break;
@@ -119,22 +116,60 @@ function configureThemeOptionBar() {
   themeBar.id = 'themeOptionBar';
   themeBar.classList.add('optionBar');
 
-  const buttonLight = document.createElement('button');
-  const buttonDark = document.createElement('button');
-  buttonLight.id = 'buttonLight';
-  buttonLight.innerText = 'Light';
-  buttonDark.id = 'buttonDark';
-  buttonDark.innerText = 'Dark';
-
-  buttonLight.addEventListener('click', () => {
-    port.postMessage({type: 'UPDATE STORED THEME', theme: 'dawn'});
-  });
-  buttonDark.addEventListener('click', () => {
-    port.postMessage({type: 'UPDATE STORED THEME', theme: 'monokai'});
+  const label = document.createElement('label');
+  const select = document.createElement('select');
+  label.innerText = 'Theme: ';
+  select.id = 'themeSelect';
+  select.innerHTML = `
+    <optgroup label="Light">
+      <option value="chrome">Chrome</option>
+      <option value="clouds">Clouds</option>
+      <option value="crimsonEditor">Crimson Editor</option>
+      <option value="dawn">Dawn</option>
+      <option value="dreamweaver">Dreamweaver</option>
+      <option value="eclipse">Eclipse</option>
+      <option value="github">GitHub</option>
+      <option value="iplastic">iPlastic</option>
+      <option value="katzenMilch">KatzenMilch</option>
+      <option value="kurior">Kuroir</option>
+      <option value="solarizedLight">Solarized Light</option>
+      <option value="sqlServer">SQL Server</option>
+      <option value="textmate">TextMate</option>
+      <option value="tomorrow">Tomorrow</option>
+      <option value="xcode">XCode</option>
+    </optgroup>
+    <optgroup label="Dark">
+      <option value="ambiance">Ambiance</option>
+      <option value="chaos">Chaos</option>
+      <option value="cloudsMidnight">Clouds Midnight</option>
+      <option value="cobalt">Cobalt</option>
+      <option value="gob">Gob</option>
+      <option value="gruvbox">Gruvbox</option>
+      <option value="idleFingers">idle Fingers</option>
+      <option value="krTheme">krTheme</option>
+      <option value="merbivore">Merbivore</option>
+      <option value="merbivoreSoft">Merbivore Soft</option>
+      <option value="monoIndustrial">Mono Industrial</option>
+      <option value="monokai">Monokai</option>
+      <option value="pastelOnDark">Pastel on dark</option>
+      <option value="solarizedDark">Solarized Dark</option>
+      <option value="terminal">Terminal</option>
+      <option value="tomorrowNight">Tomorrow Night</option>
+      <option value="tomorrowNightBlue">Tomorrow Night Blue</option>
+      <option value="tomorrowNightBright">Tomorrow Night Bright</option>
+      <option value="tomorrowNightEighties">Tomorrow Night ’80s</option>
+      <option value="twilight">Twilight</option>
+      <option value="vibrantInk">Vibrant Ink</option>
+    </optgroup>
+  `;
+
+  select.addEventListener('change', () => {
+    port.postMessage({type: 'UPDATE STORED THEME', theme: select.value});
+    select.blur();
   });
 
-  themeBar.appendChild(buttonLight);
-  themeBar.appendChild(buttonDark);
+  label.appendChild(select);
+  themeBar.appendChild(label);
   document.body.insertBefore(themeBar, pre);
 }
 
@@ -222,7 +257,7 @@ function collapse(elements) {
       // Add CSS that targets it
       jfStyleEl.insertAdjacentHTML(
         'beforeend',
-        `\n#keyValueOrValue${lastKeyValueOrValueIdGiven}.collapsed:after{color: #aaa; content:" // ${comment}"}`
+        `\n#keyValueOrValue${lastKeyValueOrValueIdGiven}.collapsed:after{content:" // ${comment}"}`
       );
     }
   }

src/js/lib/dom-builder.js

@@ -78,11 +78,8 @@ function getKeyValueOrValueDom(value, keyName) {
     keyValueOrValue.classList.add('objectProperty');
     // Create a span for the key name
     const keySpan = templates.key();
-    keySpan.textContent = JSON.stringify(keyName).slice(1, -1); // remove quotes
-    // Add it to keyValueOrValue, with quote marks
-    keyValueOrValue.appendChild(templates.doubleQuoteText());
+    keySpan.textContent = JSON.stringify(keyName);
     keyValueOrValue.appendChild(keySpan);
-    keyValueOrValue.appendChild(templates.doubleQuoteText());
     // Also add ": " (colon and non-breaking space)
     keyValueOrValue.appendChild(templates.colonAndSpace());
   }

src/js/lib/theme.js

@@ -1,6 +1,40 @@
 export const themes = {
-  dawn: require('../../sass/dawn.scss'),
-  monokai: require('../../sass/monokai.scss'),
+  ambiance: require('../../sass/themes/ambiance.scss'),
+  chaos: require('../../sass/themes/chaos.scss'),
+  clouds: require('../../sass/themes/clouds.scss'),
+  cloudsMidnight: require('../../sass/themes/clouds-midnight.scss'),
+  chrome: require('../../sass/themes/chrome.scss'),
+  cobalt: require('../../sass/themes/cobalt.scss'),
+  crimsonEditor: require('../../sass/themes/crimson-editor.scss'),
+  dawn: require('../../sass/themes/dawn.scss'),
+  dreamweaver: require('../../sass/themes/dreamweaver.scss'),
+  eclipse: require('../../sass/themes/eclipse.scss'),
+  github: require('../../sass/themes/github.scss'),
+  gob: require('../../sass/themes/gob.scss'),
+  gruvbox: require('../../sass/themes/gruvbox.scss'),
+  idleFingers: require('../../sass/themes/idle-fingers.scss'),
+  iplastic: require('../../sass/themes/iplastic.scss'),
+  katzenMilch: require('../../sass/themes/katzen-milch.scss'),
+  krTheme: require('../../sass/themes/kr-theme.scss'),
+  kurior: require('../../sass/themes/kurior.scss'),
+  merbivore: require('../../sass/themes/merbivore.scss'),
+  merbivoreSoft: require('../../sass/themes/merbivore-soft.scss'),
+  monoIndustrial: require('../../sass/themes/mono-industrial.scss'),
+  monokai: require('../../sass/themes/monokai.scss'),
+  pastelOnDark: require('../../sass/themes/pastel-on-dark.scss'),
+  solarizedDark: require('../../sass/themes/solarized-dark.scss'),
+  solarizedLight: require('../../sass/themes/solarized-light.scss'),
+  sqlServer: require('../../sass/themes/sql-server.scss'),
+  terminal: require('../../sass/themes/terminal.scss'),
+  textmate: require('../../sass/themes/textmate.scss'),
+  tomorrow: require('../../sass/themes/tomorrow.scss'),
+  tomorrowNight: require('../../sass/themes/tomorrow-night.scss'),
+  tomorrowNightBlue: require('../../sass/themes/tomorrow-night-blue.scss'),
+  tomorrowNightBright: require('../../sass/themes/tomorrow-night-bright.scss'),
+  tomorrowNightEighties: require('../../sass/themes/tomorrow-night-eighties.scss'),
+  twilight: require('../../sass/themes/twilight.scss'),
+  vibrantInk: require('../../sass/themes/vibrant-ink.scss'),
+  xcode: require('../../sass/themes/xcode.scss'),
   default: 'dawn'
 };
 

src/manifest.json

@@ -5,7 +5,8 @@
   "description": "Makes JSON easy to read. Open source.",
   "homepage_url": "https://github.com/nikrolls/json-formatter",
   "author": "Nik Rolls, Callum Locke",
-  "minimum_edge_version": "38",
+  "minimum_edge_version": "40",
+  "minimum_chrome_version": "21",
   "icons": {
        "128": "icons/128.png",
        "32": "icons/32.png"

src/sass/content.scss

@@ -10,16 +10,17 @@ body {
 }
 
 #themeOptionBar {
-  right: 11.5rem;
+  right: 11.3rem;
 }
 
 .optionBar {
   user-select: none;
   display: block;
   position: absolute;
   top: 0.7rem;
+  font: 13px "Lucida Grande", "Segoe UI", "Tahoma";
 
-  button {
+  button, select {
     border-radius: 0.1rem;
     box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.1);
     user-select: none;
@@ -33,20 +34,22 @@ body {
     position: relative;
     z-index: 10;
     display: inline-block;
-    width: 5rem;
+    height: 1.5rem;
     text-shadow: 0.05rem 0.05rem rgba(255, 255, 255, 0.3);
 
-    &:last-child {
-      margin-left: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:first-child {
-      margin-right: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: none;
+    &:not(:only-child) {
+      &:last-child {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:first-child {
+        margin-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: none;
+      }
     }
 
     &:hover {
@@ -72,6 +75,18 @@ body {
       outline: 0;
     }
   }
+
+  button {
+    width: 5rem;
+  }
+
+  select {
+    width: 9.1rem;
+
+    &::-ms-expand {
+      background: none;
+    }
+  }
 }
 
 #jsonpOpener,
@@ -150,7 +165,7 @@ pre {
     opacity: 0.5;
   }
 
-  /* .e that are *inside* the children of a collapsed one */
+  /* .expanders that are *inside* the children of a collapsed one */
   .collapsed .keyValueOrValue & {
     display: none;
   }

src/sass/themes/_base.scss

@@ -0,0 +1,17 @@
+body {}
+
+::selection {}
+
+.key {}
+
+.number {}
+
+.string {}
+
+.bool {}
+
+.null {}
+
+.brace {}
+
+.collapsed:after {}

src/sass/themes/ambiance.scss

@@ -0,0 +1,33 @@
+body {
+  background-color: #202020;
+  color: #e6e1dc;
+}
+
+::selection {
+  background-color: transparentize(#ddf0ff, 0.80);
+}
+
+.key {
+  color: #9999cc;
+}
+
+.number {
+  color: #78Cf8a;
+}
+
+.string {
+  color: #8f9d6a;
+}
+
+.bool, .null {
+  color: #cf7Ea9;
+}
+
+.brace {
+  color: #24c2c7;
+}
+
+.collapsed:after {
+  font-style: italic;
+  color: #555;
+}