(core) Update UI for formula and column label/id in the right-side panel.

Summary:
- Update styling of label, id, and "derived ID from label" checkbox.
- Implement a label which shows 'Data Column' vs 'Formula Column' vs 'Empty Column',
  and a dropdown with column actions (such as Clear/Convert)
- Implement new formula display in the side-panel, and open the standard
  FormulaEditor when clicked.
- Remove old FieldConfigTab, of which now very little would be used.
- Fix up remaining code that relied on it (RefSelect)

Test Plan: Fixed old tests, added new browser cases, and a case for a new helper function.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2757

app/client/ui/CodeHighlight.ts

@@ -0,0 +1,73 @@
+import {colors, vars} from 'app/client/ui2018/cssVars';
+import * as ace from 'brace';
+import {BindableValue, dom, DomElementArg, styled, subscribeElem} from 'grainjs';
+
+// tslint:disable:no-var-requires
+require('brace/ext/static_highlight');
+require("brace/mode/python");
+require("brace/theme/chrome");
+
+export interface ICodeOptions {
+  placeholder?: string;
+  maxLines?: number;
+}
+
+export function buildHighlightedCode(
+  code: BindableValue<string>, options: ICodeOptions, ...args: DomElementArg[]
+): HTMLElement {
+  const highlighter = ace.acequire('ace/ext/static_highlight');
+  const PythonMode = ace.acequire('ace/mode/python').Mode;
+  const theme = ace.acequire('ace/theme/chrome');
+  const mode = new PythonMode();
+
+  return cssHighlightedCode(
+    dom('div',
+      elem => subscribeElem(elem, code, (codeText) => {
+        if (codeText) {
+          if (options.maxLines) {
+            // If requested, trim to maxLines, and add an ellipsis at the end.
+            // (Long lines are also truncated with an ellpsis via text-overflow style.)
+            const lines = codeText.split(/\n/);
+            if (lines.length > options.maxLines) {
+              codeText = lines.slice(0, options.maxLines).join("\n") + " \u2026";  // Ellipsis
+            }
+          }
+          elem.innerHTML = highlighter.render(codeText, mode, theme, 1, true).html;
+        } else {
+          elem.textContent = options.placeholder || '';
+        }
+      }),
+    ),
+    ...args,
+  );
+}
+
+// Use a monospace font, a subset of what ACE editor seems to use.
+export const cssCodeBlock = styled('div', `
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: ${vars.smallFontSize};
+  background-color: ${colors.light};
+  &[disabled], &.disabled {
+    background-color: ${colors.mediumGreyOpaque};
+  }
+`);
+
+const cssHighlightedCode = styled(cssCodeBlock, `
+  position: relative;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid ${colors.darkGrey};
+  border-radius: 3px;
+  min-height: 28px;
+  padding: 5px 6px;
+  color: ${colors.slate};
+
+  &.disabled, &.disabled .ace-chrome {
+    background-color: ${colors.mediumGreyOpaque};
+  }
+  & .ace_line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`);