Atom Scrollbar Not Visible

Since last update, Atom's been hiding my big custom scrollbar, and after much confusion, I found issue #17002: Scrollbar disappearing/flickering when styled to increase width/height.

So for now, my ~/.atom/styles.less is a few pixels smaller but still obvious and grabbable (rest of the style sheet same as last post):

/* scroll bars should be grabbable */
.scrollbars-visible-always {
    ::-webkit-scrollbar {
        // FIXME: https://github.com/atom/atom/issues/17002
        width: 14px !important;
        height: 14px !important;
    }
    ::-webkit-scrollbar-thumb {
        // based on http://www.girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
        // reversed light direction since we have no shine element
        background-color: rgba(60, 132, 198, 0.8);
        background-image: -webkit-gradient(linear, 0% 0%, 90% 90%, from(rgba(108, 191, 255, .9)), to(rgba(28, 91, 155, 0.8)) );
        border: 1px solid blue;
        border-radius: 8px;
        border-top-color: #8ba2c1;
        border-right-color: #5890bf;
        border-bottom-color: #4f93ca;
        border-left-color: #768fa5;
        padding: 1px;
    }
}

On one hand, I'm pissed off that I have to fuck with my editor's internals for basic functionality; but on the gripping hand, it's so nice to have an editor I can fuck with the internals of.

Using Atom

"Have you tried Atom?" #RuinADateInFourWords



Have gone to the dark side temporarily: Atom handles my ES6 better than BBEdit currently. 😭

But it's not quite right, so I fix. Atom configuration is a bit of a mess, but everything-is-a-plugin is a good philosophy.

  • One Dark UI & One Dark syntax themes are OK. But for crazy-go-nuts, install ubik-neon-syntax, and atom-material-ui. Goddamn this makes me want a bottle of Jolt Cola and an Information Society CD blasting on endless repeat.
  • install logo-file-icons, garish but the more popular file-icons is bland and ugly.
  • install symbols-list, because the default symbols tool doesn't find new-style classes.
  • install eslint, because nobody writes JavaScript good, even me after 20 years of it.
  • install atom-mac-terminal, gives you an "Open in Terminal" right-click.

  • packages, linter, settings, turn off "Lint On Change", because that slows down an already slow editor.

  • packages, autocomplete-plus, settings, turn off "Show Suggestions On Keystroke". Ctrl-Space is fine. I learned to touch-type on an IBM Selectric, so I type faster than JS can autocomplete anything but a very long constant.

  • % atom ~/.atom/styles.less and add:

    /* scroll bars should be grabbable */
    .scrollbars-visible-always {
        /deep/ ::-webkit-scrollbar {
            width: 20px;
            height: 20px;
        }
    }
    
    /* turn off all that folding folderol */
    atom-text-editor.editor .icon-right {
        width: 0 !important;
    }
    
    /* make the gutters different from text so I can see indentation */
    atom-text-editor.editor .gutter {
        border-right: #222222 1px solid;
        background-color: #111111;
    }
    
    /* ubik-hackerman-syntax has overly dark functions, was #133460 */
    .theme-ubik-hackerman-syntax .syntax--entity.syntax--name.syntax--function, .theme-ubik-hackerman-syntax .syntax--support.syntax--function {
        color: #4f6db4;
        font-weight: bold;
    }
    
    /* ubik-hackerman-syntax recolors the semantic class of arguments to functions; I want types to be colored the same in or out of a function call. */
    .theme-ubik-hackerman-syntax .syntax--arguments, .theme-ubik-hackerman-syntax .syntax--meta.syntax--function-call {
        color: unset;
    }
    
  • (new 2017-06-10) % atom ~/.atom/keymap.cson (why is there no UI for keymapping?!) and add:
    # I hate editors & other long-term applications closing by instinctive Cmd-Q
    'body':
        'cmd-alt-ctrl-shift-q': 'application:quit'
        'cmd-q': 'pane:close'
    
  • (new 2017-06-10) % atom ~/.atom/snippets.cson (why is there no UI for snippets?!) and add:
    '.source.js':
        'module.exports':
            'prefix': 'me'
            'body': '''module.exports = {
                $1
            };
            '''
    

Open issues:

  • I can't find a package to get rid of tabs and only badge/color open files in the tree view.
  • Regex field is unbearably small. I often copy over to BBEdit, do a big regex there, copy back.
  • To figure out any style element to customize, you have to open developer mode ⌘⌥I and pick the element and find the exact right style from a mess of styles. A lifetime writing HTML & CSS pays off in customizing a fucking editor; if you're not me, you're probably stuck with it. BBEdit lets you customize styles right there in Preferences. At least atom-material-ui has a couple choices for accent colors.
  • I wrote this post in BBEdit. Atom has a Markdown preview, but it's awkward and far slower.