Update setting editor styling.

packages/apputils-extension/src/settingeditor.ts

@@ -56,10 +56,15 @@ const PLUGIN_FIELDSET_CLASS = 'jp-PluginFieldset';
  */
 const PLUGIN_LIST_CLASS = 'jp-PluginList';
 
+/**
+ * The class name added to all plugin list icons.
+ */
+const PLUGIN_ICON_CLASS = 'jp-PluginList-icon';
+
 /**
  * The class name added to selected items.
  */
-const SELECTED_CLASS = 'jp-mode-selected';
+const SELECTED_CLASS = 'jp-mod-selected';
 
 
 /**
@@ -522,9 +527,11 @@ namespace Private {
   export
   function createListItem(plugin: ISettingRegistry.IPlugin, annotations: ISettingRegistry.IPluginAnnotations): HTMLLIElement {
     const annotation = annotations && annotations.annotation;
-    const caption = annotation && annotation.caption || '';
+    const caption = annotation && annotation.caption || plugin.id;
     const className = annotation && annotation.className || '';
-    const iconClass = annotation && annotation.iconClass || '';
+    const iconClass = `${PLUGIN_ICON_CLASS} ${
+      annotation && annotation.iconClass || ''
+    }`;
     const iconLabel = annotation && annotation.iconLabel || '';
     const label = (annotation && annotation.label) || plugin.id;
 
@@ -541,11 +548,9 @@ namespace Private {
   export
   function populateFieldset(node: HTMLElement, plugin: ISettingRegistry.IPlugin, annotations: ISettingRegistry.IPluginAnnotations): void {
     const label = annotations && annotations.annotation &&
-      annotations.annotation.label || plugin.id;
-    const legend = document.createElement('legend');
+      `${annotations.annotation.label} (${plugin.id})` || plugin.id;
 
-    legend.appendChild(document.createTextNode(label));
-    node.appendChild(legend);
+    node.appendChild(VirtualDOM.realize(h.legend(label)));
   }
 
   /**

packages/apputils-extension/style/settingeditor.css

@@ -6,14 +6,41 @@
 #setting-editor.jp-SettingEditor {
   background-color: var(--md-grey-200);
   outline: none;
-  padding: 3px;
 }
 
 
 #setting-editor.jp-SettingEditor ul.jp-PluginList {
+  background-color: var(--md-grey-300);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
   list-style-type: none;
   margin: 0;
-  padding: 2px;
+  padding: 0;
+}
+
+
+#setting-editor.jp-SettingEditor ul.jp-PluginList li {
+  padding: 2px 0 5px 5px;
+}
+
+
+#setting-editor.jp-SettingEditor ul.jp-PluginList li:hover {
+  background-color: var(--md-grey-200);
+}
+
+
+#setting-editor.jp-SettingEditor ul.jp-PluginList li.jp-mod-selected {
+  background-color: var(--md-grey-200);
+}
+
+
+#setting-editor.jp-SettingEditor .jp-PluginList-icon {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  margin-right: 3px;
+  position: relative;
+  top: 3px;
 }
 
 

packages/codemirror-extension/src/index.ts

@@ -86,7 +86,11 @@ function activateEditorCommands(app: JupyterLab, tracker: IEditorTracker, mainMe
   let matchBrackets = false;
 
   // Annotate the plugin settings.
-  registry.annotate(id, '', { label: 'CodeMirror' });
+  registry.annotate(id, '', {
+    iconClass: 'jp-ImageTextEditor',
+    iconLabel: 'CodeMirror',
+    label: 'CodeMirror'
+  });
   registry.annotate(id, 'keyMap', { label: 'Key Map' });
   registry.annotate(id, 'matchBrackets', { label: 'Match Brackets' });
   registry.annotate(id, 'theme', { label: 'Theme' });

packages/theming/style/icons.css

@@ -23,20 +23,22 @@
   background-image: url(icons/md/chat.svg);
 }
 
+
 .jp-CloseIcon {
   background-image: url(icons/md/close.svg);
 }
 
-.jp-CutIcon {
-  background-image: url(icons/md/cut.svg);
-}
-
 
 .jp-CopyIcon {
   background-image: url(icons/md/copy.svg);
 }
 
 
+.jp-CutIcon {
+  background-image: url(icons/md/cut.svg);
+}
+
+
 .jp-DownCaretIcon {
   background-image: url(icons/md/down_caret.svg);
 }