@jscad/web 2.5.6 → 2.5.10

package/src/ui/views/editor.js

@@ -1,212 +1,133 @@
-// ui-editor.js
-//
-// == OpenJSCAD.org, Copyright (c) 2013-2016, Licensed under MIT License
-//
-// Editor Functionality
-//
-// History:
-//   2016/06/27: 0.5.1: added local storage by Robert Starkey
-//   2016/02/02: 0.4.0: GUI refactored, functionality split up into more files, mostly done by Z3 Dev
-
-// --- Dependencies
-// gProcessor var
-// #editor element
-
-// --- Global Variables
-const ace = require('brace')
-require('brace/ext/language_tools.js')
-ace.acequire('ace/ext/language_tools')
-require('brace/mode/javascript')
-require('brace/mode/scad')
-require('brace/theme/chrome')
-require('brace/theme/monokai')
-const openscadOpenJscadParser = require('@jscad/openscad-openjscad-translator')
-
-// See http://ace.ajax.org/#nav=howto
-const setUpEditor = (element, gProcessor) => {
-  const langTools = ace.acequire('ace/ext/language_tools')
-
-  const flowCompleter = {
-    getCompletions: (editor, session, pos, prefix, callback) => {
-      // your code
-    }
-  }
-  langTools.addCompleter(flowCompleter)
-
-  let gEditor = null
-  gEditor = ace.edit(element)
-  gEditor.$blockScrolling = Infinity
-  gEditor.getSession().setMode('ace/mode/javascript')
-  gEditor.setTheme('ace/theme/monokai')
-  // gEditor.getSession().setMode("ace/mode/javascript");
-  // gEditor.setTheme("ace/theme/ambiance")
-  // gEditor.setTheme("ace/theme/chaos")
-  // gEditor.setTheme('ace/theme/chrome')
-  // gEditor.setTheme("ace/theme/clouds")
-  // gEditor.setTheme("ace/theme/cobalt")
-  // gEditor.setTheme("ace/theme/dawn") // nice
-  // gEditor.setTheme("ace/theme/dreamweaver")
-  // gEditor.setTheme("ace/theme/eclipse")
-  // gEditor.setTheme("ace/theme/github")
-  // gEditor.setTheme("ace/theme/idle_fingers")
-  // gEditor.setTheme("ace/theme/katzenmilch")
-  // gEditor.setTheme("ace/theme/kr_theme")
-  // gEditor.setTheme("ace/theme/kuroir")
-  // gEditor.setTheme("ace/theme/merbivore")
-  // gEditor.setTheme("ace/theme/mono_industrial")
-  // gEditor.setTheme("ace/theme/monokai")
-  // gEditor.setTheme("ace/theme/pastel_on_dark")
-  // gEditor.setTheme("ace/theme/solarized_dark")
-  // gEditor.setTheme("ace/theme/solarized_light")
-  // gEditor.setTheme("ace/theme/terminal")
-  // gEditor.setTheme("ace/theme/textmate")
-  // gEditor.setTheme("ace/theme/tomorrow")
-  // gEditor.setTheme("ace/theme/tomorrow_night")
-  // gEditor.setTheme("ace/theme/tomorrow_night_blue")
-  // gEditor.setTheme("ace/theme/tomorrow_night_bright")
-  // gEditor.setTheme("ace/theme/tomorrow_night_eighties")
-  // gEditor.setTheme("ace/theme/twilight")
-  // gEditor.setTheme("ace/theme/vibrant_ink")
-  // gEditor.setTheme("ace/theme/xcode")
-
-  const runExec = (editor) => {
-    let src = editor.getValue()
-    if (src.match(/^\/\/!OpenSCAD/i)) {
-      editor.getSession().setMode('ace/mode/scad')
-      // FIXME test for the global function first
-      src = openscadOpenJscadParser.parse(src)
-    } else {
-      editor.getSession().setMode('ace/mode/javascript')
-    }
-    if (gProcessor !== null) {
-      // gProcessor.setJsCad(src)
-    }
-  }
-  // enable special keystrokes
-  gEditor.commands.addCommand({
-    name: 'setJSCAD',
-    bindKey: { win: 'F5|Shift-Return', mac: 'F5|Shift-Return' },
-    exec: runExec
-  })
-  document.body.addEventListener('keydown', (evt) => {
-    if (evt.key === 'F5') {
-      evt.preventDefault()
-      runExec(gEditor)
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'viewerReset',
-    bindKey: { win: 'Ctrl-Return', mac: 'Command-Return' },
-    exec: function (editor) {
-      if (gProcessor !== null) {
-        gProcessor.viewer.resetCamera()
-      }
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'saveSource',
-    bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
-    exec: function (editor) {
-      const src = editor.getValue()
-      localStorage.editorContent = src
-      gProcessor.setStatus('saved', 'Saved source to browser storage')
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'loadSource',
-    bindKey: { win: 'Ctrl-L', mac: 'Command-L' },
-    exec: function (editor) {
-      const src = localStorage.editorContent
-      if (src && src.length) editor.setValue(src, 1)
-      gEditor.commands.exec('setJSCAD', editor)
-      gProcessor.setStatus('loaded', 'Loaded source from browser storage')
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'downloadSource',
-    bindKey: { win: 'Ctrl-Shift-S', mac: 'Command-Shift-S' },
-    exec: function (editor) {
-      const src = editor.getValue()
-      setTimeout(() => {
-        const blob = new Blob([src], { type: 'text/plain' })
-        const objectUrl = URL.createObjectURL(blob)
-        const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
-        saveLink.href = objectUrl
-        saveLink.download = 'MyDesign.jscad'
-
-        const event = new MouseEvent('click')
-        saveLink.dispatchEvent(event)
-      }, 0)
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'clearStorage',
-    bindKey: { win: 'Ctrl-Shift-\\', mac: 'Command-Shift-\\' },
-    exec: function (editor) {
-      localStorage.clear()
-      gProcessor.setStatus('cleared', 'Cleared browser storage')
-    }
-  })
-
-  return gEditor
+const html = require('nanohtml')
+
+const CodeMirror = require('codemirror')
+require('codemirror/mode/javascript/javascript')
+require('codemirror/addon/hint/javascript-hint')
+
+const editorOptions = {
+  mode: 'javascript',
+  indentUnit: 2,
+  smartIndent: false,
+  indentWithTabs: false,
+  lineNumbers: true,
+  autofocus: true
 }
 
-const putSourceInEditor = (gEditor, src, fn) => {
-  if (gEditor) {
-    gEditor.setValue(src, -1)
-    if (src.match(/^\/\/!OpenSCAD/i)) {
-      gEditor.getSession().setMode('ace/mode/scad')
-    } else {
-      gEditor.getSession().setMode('ace/mode/javascript')
-    }
+let editor
+let wrapper
+
+/*
+ * Create a file tree from the contents of the editor
+ */
+const createFileTree = (editor) => {
+  const source = editor.getValue()
+  if (source && source.length > 0) {
+    return [{ ext: 'js', fullPath: '/changes.js', mimetype: 'javascript', name: 'changes.js', source }]
   }
+  return null
 }
 
-const getSourceFromEditor = (gEditor) => {
-  if (gEditor !== null) {
-    return gEditor.getValue()
+/*
+ * Create a HTML wrapper for the editor (single instance)
+ */
+const createWrapper = (state, callbackToStream) => {
+  if (!wrapper) {
+    wrapper = html`
+    <section class='popup-menu' id='editor' key='editor' style='visibility:${state.activeTool === 'editor' ? 'visible' : 'hidden'}'>
+      <textarea></textarea>
+    </section>
+    `
+    wrapper.onkeydown = (e) => e.stopPropagation()
+    wrapper.onkeyup = (e) => e.stopPropagation()
+
+    // and add the editor
+    editor = CodeMirror.fromTextArea(wrapper.firstChild, editorOptions)
+
+    editor.setOption('extraKeys', {
+      Tab: (cm) => {
+        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
+        cm.replaceSelection(spaces)
+      }
+    })
+
+    // inject style sheet for the editor
+    const head = document.getElementsByTagName('HEAD')[0]
+    const link = document.createElement('LINK')
+    link.rel = 'stylesheet'
+    link.href = './css/codemirror.css'
+    head.appendChild(link)
   }
-  return ''
+  return wrapper
 }
-const html = require('bel')
 
+/*
+ * Create the editor wrapper for handling changes to file contents.
+ *
+ * Note: Only the contents of a single file are loaded into the editor. No projects.
+ * Note: Only the contents of javascript files are loaded into the editor. No external formats.
+ */
 const editorWrapper = (state, editorCallbackToStream) => {
-  const el = html`
-  <div id='editor' key='editor' style='visibility:${state.activeTool === 'editor' ? 'visible' : 'hidden'}' >
-  </div>`
-
-  const editor = setUpEditor(el)
-  // const snippets = '# Prototype\nsnippet proto\n  ${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {\n    ${4:// body...}\n  };\n# Function\nsnippet fun\n  function ${1?:function_name}(${2:argument}) {\n    ${3:// body...}\n  }\n# Anonymous Function\nregex /((=)\\s*|(:)\\s*|(\\()|\\b)/f/(\\))?/\nsnippet f\n  function${M1?: ${1:functionName}}($2) {\n    ${0:$TM_SELECTED_TEXT}\n  }${M2?;}${M3?,}${M4?)}\n# Immediate function\ntrigger \\(?f\\(\nendTrigger \\)?\nsnippet f(\n  (function(${1}) {\n    ${0:${TM_SELECTED_TEXT:/* code */}}\n  }(${1}));\n# if\nsnippet if\n  if (${1:true}) {\n    ${0}\n  }\n# if ... else\nsnippet ife\n  if (${1:true}) {\n    ${2}\n  } else {\n    ${0}\n  }\n# tertiary conditional\nsnippet ter\n  ${1:/* condition */} ? ${2:a} : ${3:b}\n# switch\nsnippet switch\n  switch (${1:expression}) {\n    case \'${3:case}\':\n      ${4:// code}\n      break;\n    ${5}\n    default:\n      ${2:// code}\n  }\n# case\nsnippet case\n  case \'${1:case}\':\n    ${2:// code}\n    break;\n  ${3}\n\n# while (...) {...}\nsnippet wh\n  while (${1:/* condition */}) {\n    ${0:/* code */}\n  }\n# try\nsnippet try\n  try {\n    ${0:/* code */}\n  } catch (e) {}\n# do...while\nsnippet do\n  do {\n    ${2:/* code */}\n  } while (${1:/* condition */});\n# Object Method\nsnippet :f\nregex /([,{[])|^\\s*/:f/\n  ${1:method_name}: function(${2:attribute}) {\n    ${0}\n  }${3:,}\n# setTimeout function\nsnippet setTimeout\nregex /\\b/st|timeout|setTimeo?u?t?/\n  setTimeout(function() {${3:$TM_SELECTED_TEXT}}, ${1:10});\n# Get Elements\nsnippet gett\n  getElementsBy${1:TagName}(\'${2}\')${3}\n# Get Element\nsnippet get\n  getElementBy${1:Id}(\'${2}\')${3}\n# console.log (Firebug)\nsnippet cl\n  console.log(${1});\n# return\nsnippet ret\n  return ${1:result}\n# for (property in object ) { ... }\nsnippet fori\n  for (var ${1:prop} in ${2:Things}) {\n    ${0:$2[$1]}\n  }\n# hasOwnProperty\nsnippet has\n  hasOwnProperty(${1})\n# docstring\nsnippet /**\n  /**\n   * ${1:description}\n   *\n   */\nsnippet @par\nregex /^\\s*\\*\\s*/@(para?m?)?/\n  @param {${1:type}} ${2:name} ${3:description}\nsnippet @ret\n  @return {${1:type}} ${2:description}\n# JSON.parse\nsnippet jsonp\n  JSON.parse(${1:jstr});\n# JSON.stringify\nsnippet jsons\n  JSON.stringify(${1:object});\n# self-defining function\nsnippet sdf\n  var ${1:function_name} = function(${2:argument}) {\n    ${3:// initial code ...}\n\n    $1 = function($2) {\n      ${4:// main code}\n    };\n  }\n# singleton\nsnippet sing\n  function ${1:Singleton} (${2:argument}) {\n    // the cached instance\n    var instance;\n\n    // rewrite the constructor\n    $1 = function $1($2) {\n      return instance;\n    };\n    \n    // carry over the prototype properties\n    $1.prototype = this;\n\n    // the instance\n    instance = new $1();\n\n    // reset the constructor pointer\n    instance.constructor = $1;\n\n    ${3:// code ...}\n\n    return instance;\n  }\n# class\nsnippet class\nregex /^\\s*/clas{0,2}/\n  var ${1:class} = function(${20}) {\n    $40$0\n  };\n  \n  (function() {\n    ${60:this.prop = ""}\n  }).call(${1:class}.prototype);\n  \n  exports.${1:class} = ${1:class};\n# \nsnippet for-\n  for (var ${1:i} = ${2:Things}.length; ${1:i}--; ) {\n    ${0:${2:Things}[${1:i}];}\n  }\n# for (...) {...}\nsnippet for\n  for (var ${1:i} = 0; $1 < ${2:Things}.length; $1++) {\n    ${3:$2[$1]}$0\n  }\n# for (...) {...} (Improved Native For-Loop)\nsnippet forr\n  for (var ${1:i} = ${2:Things}.length - 1; $1 >= 0; $1--) {\n    ${3:$2[$1]}$0\n  }\n\n\n#modules\nsnippet def\n  define(function(require, exports, module) {\n  "use strict";\n  var ${1/.*\\///} = require("${1}");\n  \n  $TM_SELECTED_TEXT\n  });\nsnippet req\nguard ^\\s*\n  var ${1/.*\\///} = require("${1}");\n  $0\nsnippet requ\nguard ^\\s*\n  var ${1/.*\\/(.)/\\u$1/} = require("${1}").${1/.*\\/(.)/\\u$1/};\n  $0\n'
-
-  // editor.resize(true)
-  // editor.renderer.updateFull()
-  /* ace.config.loadModule('ace/snippets/javascript', function (ba) {
-  })
-  ace.config.loadModule('ace/ext/language_tools', function () {
-    const bla = require('brace/snippets/javascript')
-    editor.insertSnippet(bli);
-  }) */
-  editor.setOptions({
-    enableBasicAutocompletion: true,
-    enableSnippets: true,
-    enableLiveAutocompletion: false
-  })
-
-  const source = `
-  const main = (params) => {
+  const el = createWrapper(state, editorCallbackToStream)
+
+  // and adjust the state
+  if (state.activeTool === 'editor') {
+    el.style.visibility = 'visible'
+    el.focus()
+
+    let compileShortcut = state.shortcuts.find((shortcut) => shortcut.args === 'reevaluate')
+    if (!compileShortcut) compileShortcut = { args: 'Shift-Enter' }
+    let key = compileShortcut.key.toUpperCase()
+    // can you say PAIN? codemirror has very specific control prefixes!
+    key = key.replace(/enter/i, 'Enter')
+    key = key.replace(/alt[+-]/i, 'Alt-')
+    key = key.replace(/cmd[+-]/i, 'Cmd-')
+    key = key.replace(/control[+-]/i, 'Ctrl-')
+    key = key.replace(/shift[+-]/i, 'Shift-')
+
+    const extraKeys = {
+      Tab: (cm) => {
+        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
+        cm.replaceSelection(spaces)
+      }
+    }
+    extraKeys[key] = (cm) => {
+      const fileTree = createFileTree(cm)
+      if (fileTree) editorCallbackToStream.callback({ type: 'read', id: 'loadRemote', data: fileTree })
+    }
+    editor.setOption('extraKeys', extraKeys)
+
+    editor.focus()
+    editor.scrollIntoView({ line: 0, ch: 0 })
+    // workaround to make content appear without clicking the editor after loading an example
+    // call the refresh in a setTimeout to force js to run it in the next global event loop
+    setTimeout(() => editor.refresh(), 0)
+  } else {
+    el.style.visibility = 'hidden'
+  }
 
+  // and adjust the contents if any
+  if (state.design && state.design.filesAndFolders) {
+    if (state.design.filesAndFolders.length === 1) {
+      const file0 = state.design.filesAndFolders[0]
+      let source = file0.source ? file0.source : ''
+      if (file0.mimetype) {
+        if (file0.mimetype.indexOf('javascript') < 0) source = '// imported from external format'
+      } else {
+        source = '// imported from project'
+      }
+      const prevsource = editor.getValue()
+      if (source !== prevsource) {
+        editor.focus()
+        editor.setValue(source)
+        editor.setCursor(0, 0)
+        editor.refresh()
+      }
+    }
   }
-  module.exports = {main}
-  `
-  // state.design.source
 
-  putSourceInEditor(editor, source)
   return el
 }
 
 module.exports = {
-  editorWrapper,
-  setUpEditor,
-  putSourceInEditor,
-  getSourceFromEditor
+  editorWrapper
 }

package/src/ui/views/main.js

@@ -11,7 +11,7 @@ const dom = (state, i18n, paramsCallbacktoStream, editorCallbackToStream) => {
   const help = require('./help')(state, i18n)
 
   const io = require('./io')(state, i18n)
-  const editor = require('./editor2').editorWrapper(state, editorCallbackToStream, i18n)
+  const editor = require('./editor').editorWrapper(state, editorCallbackToStream, i18n)
   const toolBar = require('./toolbar')(state, i18n)
 
   const viewer = require('./viewer')(state, i18n)

package/src/ui/views/options.js

@@ -38,20 +38,6 @@ const options = (state, i18n) => {
     </label>
   </fieldset>
 
-  <fieldset>
-    <legend> <h3> ${i18n`Storage`} </h3> </legend>
-    <label>${i18n`settings storage path`} ${i18n`not settable`}
-      <input type='text' disabled value='${state.storage.path}' disabled />
-    </label>
-  </fieldset>
-
-  <fieldset>
-    <legend> <h3> ${i18n`File Handling`} </h3> </legend>
-    <label>${i18n`enable conversion to scripts`}
-      <input type='checkbox' checked=false id='design-convertSupportedTypes' checked=${state.design.convertSupportedTypes}/>
-    </label>
-  </fieldset>
-
   ${shortcuts}
 
 </section>`

package/src/ui/views/parameterControls.js

@@ -263,19 +263,19 @@ const createInputControl = (definition, prevValue) => {
 
   // check for required parameters
   if (!('type' in definition)) {
-    throw new Error('Parameter definition (' + definition + ") must include a 'type' parameter")
+    throw new Error(`Parameter definition (${definition.name}) must include a 'type' parameter`)
   }
   let typeData = controlList.filter((x) => definition.type === x.type)
   typeData = (typeData && typeData.length > 0) ? typeData[0] : undefined
   if (!typeData) {
-    throw new Error('Parameter definition (' + definition + ') is not known')
+    throw new Error(`Parameter definition (${definition.name}), invalid type "${definition.type}"`)
   }
 
   // validate fields
   const definitionFields = Object.keys(definition)
   typeData.required.forEach((requiredField) => {
     if (!definitionFields.includes(requiredField)) {
-      throw new Error(`Parameter definition for "${definition.name}" must include a "${requiredField}" parameter`)
+      throw new Error(`Parameter definition of type "${definition.type}" must include a "${requiredField}" parameter`)
     }
   })
 

package/src/ui/views/status.js

@@ -3,29 +3,36 @@ const html = require('nanohtml')
 // status display
 const status = (state, paramsCallbacktoStream) => {
   const status = state.status
-  const errorMessage = status.error !== undefined && status.error.message ? `${status.error.message}` : ''
-  const errorLine = status.error !== undefined && status.error.lineno ? `Line: ${status.error.lineno}` : ''
-  const errorStack = status.error !== undefined && status.error.stack ? `Stack: ${status.error.stack}` : ''
+  let errorWhere = ''
+  let errorMessage = ''
+  let errorStack = ''
+  if (status.error) {
+    if (status.error.fileName && !status.error.fileName.startsWith('blob')) {
+      // syntax errors provide file name, line, and column number
+      errorWhere = `${status.error.fileName}:${status.error.lineNumber}:${status.error.columnNumber}`
+    }
+    errorMessage = `${status.error.name}: ${status.error.message}`
+    if (status.error.stack) {
+      errorStack = status.error.stack.trim().split('\n').map((s) => html`<ul>${s}</ul>`)
+    }
+  }
 
   const statusMessage = status.error !== undefined
     ? html`<span>
-    <div>
-      ERROR: 
+    <div id='errormessage'>
+      <p>
+        ${errorWhere}
+      </p>
+      <p>
+        ${errorMessage}
+      </p>
     </div>
-    <div>
-      ${errorMessage}
-    </div>
-    <div>
-      ${errorLine}
-    </div>
-    <div>
+    <div id='stacktrace'>
       ${errorStack}
     </div>
   </span>`
     : ''
 
-  // ? `Error: ${status.error.message} line: ${status.error.lineno}, filename:${status.error.filename} stack:  ${status.error.stack}` : ''
-  // ${statusMessage}
   const busy = status.busy
   return html`
       <span id='status'>

package/src/ui/views/toolbar.js

@@ -6,13 +6,13 @@ const toolbar = (state, i18n) => {
   const helpIcon = html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12" y2="17"/></svg>`
 
   return html`<span id='toolbar'>
-        <button id='toggleOptions'>
+        <button id='toggleOptions' aria-label='options'>
           ${optionsIcon}
         </button>
-        <button id='toggleEditor'>
+        <button id='toggleEditor' aria-label='editor'>
           ${editorIcon}
         </button>
-        <button id='toggleHelp'>
+        <button id='toggleHelp' aria-label='help'>
           ${helpIcon}
         </button>
       </span>`

package/css/big.css

@@ -1,107 +0,0 @@
-/*
- * min.css for OpenJSCAD.org viewer
- */
-
-.jscad-container {
-  margin: 5px 15px 5px 5px; /* not inherited */
-  padding: 20px; /* not inherited */
-  color: Black;
-  font-weight: bold;
-  font-family: Helvetica, Arial, Sans;
-  border: thin solid black;
-  min-width: 410px;
-}
-
-#header {
-  margin: 5px; /* not inherited */
-}
-
-#viewerContext {
-  margin: 5px; /* not inherited */
-  border: thin solid gray; /* not inherited */
-  padding: 0px; /* not inherited */
-
-  background: white;
-  width:  1200px;
-  height:  900px;
-
-  top: 0px;
-  bottom: 0px;
-}
-
-canvas { 
-  margin: 0px; /* not inherited */
-  border: 0px none gray; /* not inherited */
-  padding: 0px; /* not inherited */
-
-  width: 100%;
-  height: 100%;
-
-  cursor: move; 
-}
-
-#parametersdiv {
-  margin: 5px; /* not inherited */
-  border: thin solid rgb(200,200,200);
-  border-radius: 1em;     
-  padding: 10px;
-
-  background: white;
-  opacity: 0.8;
-}
-
-#parametersdiv table {
-  margin-bottom: 5px;
-
-  text-align: left;
-  font-size: 0.8em;
-  font-weight: normal;
-}
-
-#parametersdiv th {
-  margin:  0px; /* not inherited */
-  border:  0px none gray; /* not inherited */
-  padding: 5px; /* not inherited */
-
-  font-weight: bold;
-}
-
-#parametersdiv th.caption {
-  text-decoration: underline;
-}
-
-#parametersdiv td.caption {
-  text-align: right;
-  font-weight: bold;
-}
-
-#parametersdiv td {
-  margin:  0px; /* not inherited */
-  border:  0px none gray; /* not inherited */
-  padding: 0px; /* not inherited */
-}
-
-#parametersdiv input, #parametersdiv textarea, #parametersdiv select {
-  font-size: 0.9em;
-  background: #fea;
-  border: none;
-}
-
-#updateButton {
-  margin:  5px; /* not inherited */
-  border:  thin solid Black; /* not inherited */
-  padding: 2px; /* not inherited */
-  border-radius: 4px;
-  background: white;
-
-  margin-left: 1em;
-}
-
-#tail { 
-  margin: 5px; /* not inherited */
-}
-
-#busy {
-  vertical-align: middle;
-}
-