Use the gutter without enabling linenumbers

#1

It would be nice to still keep the gutter (git diff, …) when linenumbers are disabled.

"hide line numbers"
I can't fold my code
I can't fold my code
#2

You can add this code to your styles.less file

.editor .gutter {
  .line-numbers {
    width: 2px;
    min-width: 2px;
    overflow: hidden;
    .line-number {
      width: 100px;
    }
  }
}
#3

Nice! Exactly what I was looking for.
Thanks!

#4

this does the same as the “show line numbers” option?
hides everything in gutter not just line numbers it seems :frowning:

#5

Opened a bug to change the behavior of the setting:

#6

Any pointers on updating this now that views are using Shadow DOM? I tried changing .editor .gutter to :host .gutter but I haven’t been able to regain this functionality on my own.

#7

If it is in your styles.less file, it should be atom-text-editor::shadow .gutter. I would recommend the following to ensure that it works until the transition to the Shadow DOM is complete:

.editor .gutter, atom-text-editor::shadow .gutter {
  .line-numbers {
    width: 2px;
    min-width: 2px;
    overflow: hidden;
    .line-number {
      width: 100px;
    }
  }
}

The reason why it is not ::host is because the styles.less is loaded outside the Shadow DOM, so you need to pierce inwards.

#8

Ohhhh, that makes sense. (Scoping in CSS? You kids these days…)

Thank you for explaining. :smile:

#9

But don’t style sheets work inside of shadow doms also? You can use :shadow.

#10

Yes, style sheets can be loaded either inside or outside of a Shadow DOM. If you want a style loaded outside a Shadow DOM to affect the contents of a Shadow DOM, you use the :shadow thing, like in my example.

I have stumbled across one instance where this doesn’t work though, as documented here:

For CSS animations that you want available inside a Shadow DOM, for now the stylesheet containing the animation declaration must be loaded inside the Shadow DOM. Which is fine for syntax themes … not so much for experimentation using styles.less.

#11

I’m not sure what this means. Do you put a style tag inside the shadow template? You often hear that all style tags should go in the html head section but that may be outdated advice now.

#12

Yes. If you look at the DOM in v0.165.0 that’s exactly what you’ll see:

9708e5873db54e6a.png975×98

Notice the filename of my syntax theme used as source-path.

#13

AFAIK this is one of the purpose of shadow DOM, that way you can avoid styles pollution between a component and the page that host it. Basically, all the styles loaded into the shadow DOM doesn’t leak outside of it, except when you use the :host selector, and all styles defined outside the shadow DOM doesn’t affect it except when you use the :shadow selector.

Some resources on the matter:

http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ (without this text the link preview is kinda weird)

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

Stylesheet and shadow DOM
Shadow DOM syntax theme question
#14

If I’m understanding correctly, the new .gutter (using Shadow DOM) doesn’t inherit rulesets from outside itself (like, in this case, those declared in styles.less).

The ::shadow psuedo-element bypasses that encapsulation.

This is different behavior than we’re used to (declaring CSS in the head of an HTML document) because in that case, all the CSS essentially belonged to the global scope of the document.

That’s one reason why you have all these naming conventions and things for organizing CSS (like BEM, OOCSS, and SMACSS).

#15

Unfortuntately this still doesn’t allow use of the gutters, I can’t click on the code-fold arrow as it gets hidden with this code. Is that what you guys meant by hiding line numbers but still using the gutter?

#16

The code was originally written a year ago. A lot has changed in that time, I’m not surprised if it doesn’t work exactly as designed anymore.

Some CSS expert want to take a crack at debugging and/or updating it?

#17

How about this?

.editor .gutter, atom-text-editor::shadow .gutter {
	.line-numbers {
		text-indent: 999em;
		width: 23px;
		overflow: hidden;
		position: relative;
		.icon-right {
			position: absolute;
			left: 0;
			text-indent: 0;
		}
	}
}
#18

Perfect, thank you that fixed it!

#19

For anyone finding this (fantastic) snippet after the 1.0 release, replace .editor with atom-text-editor to avoid a deprecation warning.

#20

You can use my package until “show line numbers” behavior will be fixed

Under the hood postcasio’s code:

atom-text-editor,
atom-text-editor::shadow {
  .line-numbers {
    text-indent: 999em;
    width: 23px;
    overflow: hidden;
    position: relative;

    .icon-right {
      position: absolute;
      left: 0;
      text-indent: 0;
    }
  }
}