Ember.js: Quest: Document Solutions to "Titlebar Problem"

[ef4]

RFC 143 included discussion around properly configuring text editors so that it's easy for developers to distinguish filenames within a typical Ember app, even though those names necessarily have some repetition. The canonical example is that files like these:

src/components/date-picker/component.js
src/components/list-paginator/component.js

should be readily distinguishable despite sharing a common ending.

This quest issue exists so that people can chime in on what (if anything) is required to make all the popular editors do this nicely.

Editors

• [x] Atom
• [x] Brackets
• [x] Chocolat
• [ ] Chrome Dev Tools
• [x] Emacs
• [x] JetBrains
• [x] Sublime text
• [ ] Vim
• [x] Visual Studio Code

Please suggest others as long as you actually use them to work on Ember apps.

Solutions

Atom (@locks)

No configuration required:

Brackets (@locks)

No configuration required:

Emacs

The out-of-the-box behavior since Emacs 24.4 for the two example files is that they appear as component.js<date-picker> and component.js<list-paginator>. So no configuration is required.

To see all the options for customizing this behavior, see M-x customize-group uniquify.

Visual Studio Code (taken from @tomdale comment on RFC 143)

No configuration required:

JetBrains family (PHPStorm, WebStorm, IntelliJ, RubyMine)

For the JetBrains family of IDEs make sure to uncheck the "Small labels in editor tabs" setting under Preferences > Appearance & Behavior > Appearance:

This will add the parent directory to the tab label (as soon as there is ambiguity):

Tested with PHPStorm 2016, but should probably apply to the whole familiy of IDEs (WebStorm, IntelliJ, RubyMine etc.)

Sublime Text (@locks)

No configuration required:

Chocolat (@locks)

No configuration required:

[DingoEatingFuzz]

Here's what it looks like in the chrome sources tab:

[ef4]

Ugh, yes, chrome dev tools. Added that to the list.

[rtm]

To my knowledge this problem is unsolvable in Chrome dev tools, which is a place where lots of folks spend quite a bit of their time.

even though those names necessarily have some repetition

to be precise, "even though those names have been designed in such a way as to have extensive repetition".

[simonihmig]

For the JetBrains family of IDEs make sure to uncheck the "Small labels in editor tabs" setting under Preferences > Appearance & Behavior > Appearance:

This will add the parent directory to the tab label (as soon as there is ambiguity):

Tested with PHPStorm 2016, but should probably apply to the whole familiy of IDEs (WebStorm, IntelliJ, RubyMine etc.)

[rtm]

Whereas most of these techniques do solve the basic problem, it remains the case that substantial title bar real estate is being wasted by the meaningless and semantically vacuous "component" part of the title.

[workmanw]

@ef4 For Atom you've noted, _"No configuration required"_ . But I'm using Atom 1.10.2 and I do not see this behavior. Do you have an atom package installed?

[workmanw]

You might consider adding the IntelliJ IDE Editor suite to this list (WebStorm, PyCharm, RubyMine, etc). I know some full stack engineers, even work with a few, who prefer to use these IDEs.

Addressed by @simonihmig.

[pichfl]

I work with Sublime Text 3 on Mac OS X and it shows the folder name in both sidebar and tabs if two files with the same filename are open.

[dgeb]

Whereas most of these techniques do solve the basic problem, it remains the case that substantial title bar real estate is being wasted by the meaningless and semantically vacuous "component" part of the title.

@rtm type is not meaningless when distinguishing between a component, a model, and a route that share a common name.

[locks]

@workmanw I was the one that added Atom. I just tried it out on a clean environment and I see the same disambiguating behaviour. Reach me in #topic-editors.

[locks]

@pichfl thank you for the report, I didn't notice it and added my own screenshot. glad to see confirmation :)

[dfreeman]

One (weird) pain point with Atom is that it only disambiguates tabs with the same name when they're in the same pane.

The template.hbs on the left is actually the same file as the one in the inactive tab on the right, but they have different labels :(

[simonihmig]

@rtm type is not meaningless when distinguishing between a component, a model, and a route that share a common name.

@dgeb is absolutely right. When working on components you will most often have component.js and template.hbs open at the same time, so type and name are both equally relevant!

[HeroicEric]

While there a few existing vim plugins to modify the way tabs are displayed, I didn't see any that could easily be configured to match the examples from the other editors here but I also didn't look very deeply into them so it does probably exist 😛 .

Anyway, it's straightforward to modify your tabline settings in vim to get something nice like the others here so I threw together a plugin that does it for you that people can use (or copy code from and make into their own special snowflake tabs).

[willmanduffy]

Just a note to this being solved in Atom. Here's how it looks with Seti-UI, one of the most popular Atom themes. This is with 3 files open, fullscreen on a 27" monitor.

[krisselden]

I'm not sure I would consider it solved in an editor that only did it when there is a name conflict among the files open. I think it would be nice to be able to always show the parent directory.

[locks]

I'm not sure I would consider it solved in an editor that only did it when there is a name conflict among the files open. I think it would be nice to be able to always show the parent directory.

Prior art on how to address this issue: smart-tab-name custom-title tab-foldername-index
I haven't found a setting to always enable it, but I'm not an Atom user.

[davelowensohn]

@workmanw @dfreeman @willmanduffy et al:

I've been using ember-tabs in Atom for a while now, and it solves 100% of my problems. The "No configuration required" behavior screenshotted above only kicks in when you have multiple files with the same name open, and truncates the part you care about, whereas ember-tabs leads with the component root:

It also has a handy keyboard shortcut to swap between template.hbs & component.js within a folder or subfolder.

At this point Chrome devtools is my only pain point, and it's unfortunately a big one.

[vlascik]

There's also a plugin for Jetbrains IDEs called Tabdir, https://plugins.jetbrains.com/idea/plugin/5045-tabdir , which lets you customize tabs even more (show more folders in a title, get rid of the component.js so that you can distinguish just by folder + Appearance -> File colors etc.)

[psteininger]

This may be slightly off-topic, but did anyone consider the impact of naming JS and hbs files not only on the title bar but search results? Say I have a foo-bar component and I want to type in "foo-bar" and open the template.hbs will the template.hbs show up? Or do I have to type in template.hbs and wade through a myriad of paths? Perhaps typing "foo-bar/template" would yield that with certainty, but that is a lot of typing.

Wit the above in mind would paths like these be better?

src/
  ui/
    library/   # <-- high level context
     listing/   # <-- sub-context (could have other sub-contexts)
       book-list.js
       book-list.hbs
     form/
      book-form.js
      book-form.hbs

Where the path provides "context" kind of like the idea in contexts in Phoenix Framework, though those relate to models, not UI components. I think the above naming could help both the title issue, and search/browse issue.

I would love to hear your comments

[yohanmishkin]

Hey @ef4 ! It looks like we were able to knock out most of the editors on the list. Do you think maybe we could close this out (and re-open editor-specific issues if others still need support)?

[sukima]

Here is what I use for VIM: https://github.com/sukima/vimrc/blob/master/_vimrc#L779-L833

" Custom 'tabline' {{{2
let g:ember_pod_types = {
      \"component": "C",
      \"template": "T",
      \"controller": "CN",
      \"route": "R",
      \"service": "S",
      \"model": "M"
      \}


if exists("+showtabline")
  function! TabNameFor(file)
    let isTest = v:false
    let name = fnamemodify(a:file, ':p:t')
    if name == ''
      return '[No Name]'
    endif
    let type = fnamemodify(a:file, ':p:t:r')
    if type =~ "-test$"
      let isTest = v:true
      let type = substitute(type, "-test$", "", "")
    endif
    if !has_key(g:ember_pod_types, type)
      return name
    endif
    let name = fnamemodify(a:file, ':p:h:t')
    let typeCode = g:ember_pod_types[type]
    if isTest
      let typeCode .= '-T'
    endif
    return typeCode . ':' . name
  endfunction


  function! MyTabLine()
    let s = ''
    let t = tabpagenr()
    let i = 1
    while i <= tabpagenr('$')
      let buflist = tabpagebuflist(i)
      let winnr = tabpagewinnr(i)
      let s .= '%' . i . 'T'
      let s .= (i == t ? '%1*' : '%2*')
      let s .= '[' . i . ']'
      let s .= '%*'
      let s .= (i == t ? '%#TabLineSel#' : '%#TabLine#')
      let s .= TabNameFor(bufname(buflist[winnr - 1]))
      let i = i + 1
    endwhile
    let s .= '%T%#TabLineFill#%='
    let s .= (tabpagenr('$') > 1 ? '%999XX' : 'X')
    return s
  endfunction
  set showtabline=1
  set tabline=%!MyTabLine()
endif