Update setting editor styling.

packages/apputils-extension/src/settingeditor.ts

@@ -226,6 +226,7 @@ class PluginList extends Widget {
   protected onUpdateRequest(msg: Message): void {
     const annotations = this.settings.annotations;
     const plugins = Private.sortPlugins(this.settings.plugins);
+
     this.node.textContent = '';
     plugins.forEach(plugin => {
       const id = plugin.id;
@@ -514,7 +515,6 @@ namespace Private {
    */
   export
   function populateFieldset(node: HTMLElement, plugin: ISettingRegistry.IPlugin, annotations: ISettingRegistry.IPluginAnnotations): void {
-    console.log('fieldset plugin', plugin);
     const heading = annotations && annotations.annotation &&
       annotations.annotation.label || plugin.id;
     const legend = document.createElement('legend');

packages/apputils-extension/style/settingeditor.css

@@ -29,12 +29,21 @@
 }
 
 
+#setting-editor.jp-SettingEditor .jp-PluginEditor .jp-JSONEditor-header {
+  height: 20px;
+}
+
+
 #setting-editor.jp-SettingEditor .jp-PluginEditor .jp-PluginFieldset {
+  border: 1px solid var(--jp-brand-color1);
   margin: 0;
   padding: 0;
 }
 
 
 #setting-editor.jp-SettingEditor .jp-PluginEditor .jp-PluginFieldset legend {
+  color: var(--jp-brand-color1);
+  font-size: 80%;
   font-weight: bold;
+  margin-left: 10px;
 }

packages/codeeditor/src/jsoneditor.ts

@@ -374,7 +374,7 @@ class JSONEditor extends Widget {
       model.value.text = 'No data!';
       this._originalValue = null;
     } else {
-      let value = JSON.stringify(content, null, 2);
+      let value = JSON.stringify(content, null, 4);
       model.value.text = value;
       this._originalValue = content;
     }
@@ -408,7 +408,7 @@ namespace JSONEditor {
     editorFactory: CodeEditor.Factory;
 
     /**
-     * The title of the editor.  Defaults to an empty string.
+     * The title of the editor. Defaults to an empty string.
      */
     title?: string;