Use classes rather than location attributes

spec/panel-container-element-spec.coffee

@@ -34,8 +34,8 @@ describe "PanelContainerElement", ->
     element = container.getView()
     jasmineContent.appendChild(element)
 
-  it 'has a location attribute with value from the model', ->
+  it 'has a location class with value from the model', ->
-    expect(element.getAttribute('location')).toBe 'left'
+    expect(element).toHaveClass 'left'
 
   it 'removes the element when the container is destroyed', ->
     expect(element.parentNode).toBe jasmineContent
@@ -50,7 +50,7 @@ describe "PanelContainerElement", ->
         panel1 = new Panel({viewRegistry, item: new TestPanelContainerItem()})
         container.addPanel(panel1)
         expect(element.childNodes.length).toBe 1
-        expect(element.childNodes[0].getAttribute('location')).toBe 'left'
+        expect(element.childNodes[0]).toHaveClass 'left'
 
         expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
 
@@ -79,7 +79,7 @@ describe "PanelContainerElement", ->
         panel1 = new Panel({viewRegistry, item: new TestPanelContainerItem(), className: 'one'})
         container.addPanel(panel1)
         expect(element.childNodes.length).toBe 1
-        expect(element.childNodes[0].getAttribute('location')).toBe 'bottom'
+        expect(element.childNodes[0]).toHaveClass 'bottom'
         expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
         expect(panel1.getView()).toHaveClass 'one'
 

spec/workspace-view-spec.coffee

@@ -277,15 +277,15 @@ describe "WorkspaceView", ->
       workspaceElement = atom.views.getView(atom.workspace)
 
     it 'inserts panel container elements in the correct places in the DOM', ->
-      leftContainer = workspaceElement.querySelector('atom-panel-container[location="left"]')
+      leftContainer = workspaceElement.querySelector('atom-panel-container.left')
-      rightContainer = workspaceElement.querySelector('atom-panel-container[location="right"]')
+      rightContainer = workspaceElement.querySelector('atom-panel-container.right')
       expect(leftContainer.nextSibling).toBe workspaceElement.verticalAxis
       expect(rightContainer.previousSibling).toBe workspaceElement.verticalAxis
 
-      topContainer = workspaceElement.querySelector('atom-panel-container[location="top"]')
+      topContainer = workspaceElement.querySelector('atom-panel-container.top')
-      bottomContainer = workspaceElement.querySelector('atom-panel-container[location="bottom"]')
+      bottomContainer = workspaceElement.querySelector('atom-panel-container.bottom')
       expect(topContainer.nextSibling).toBe workspaceElement.paneContainer
       expect(bottomContainer.previousSibling).toBe workspaceElement.paneContainer
 
-      modalContainer = workspaceElement.querySelector('atom-panel-container[location="modal"]')
+      modalContainer = workspaceElement.querySelector('atom-panel-container.modal')
       expect(modalContainer.parentNode).toBe workspaceElement

src/panel-container-element.coffee

@@ -10,12 +10,11 @@ class PanelContainerElement extends HTMLElement
     @subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
     @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
-
+    @classList.add(@model.getLocation())
-    @setAttribute('location', @model.getLocation())
 
   panelAdded: ({panel, index}) ->
     panelElement = panel.getView()
-    panelElement.setAttribute('location', @model.getLocation())
+    panelElement.classList.add(@model.getLocation())
     if index >= @childNodes.length
       @appendChild(panelElement)
     else

static/panels.less

@@ -44,8 +44,8 @@
 
 // Tool panels
 
-atom-panel-container[location="left"],
+atom-panel-container.left,
-atom-panel-container[location="right"] {
+atom-panel-container.right {
   display: -webkit-flex;
   -webkit-flex-direction: row;
   -webkit-align-items: stretch;
@@ -59,10 +59,10 @@ atom-panel {
   display: block;
 }
 
-atom-panel[location="top"],
+atom-panel.top,
-atom-panel[location="bottom"],
+atom-panel.bottom,
-atom-panel[location="left"],
+atom-panel.left,
-atom-panel[location="right"] {
+atom-panel.right {
   background-color: @tool-panel-background-color;
 }
 
@@ -75,7 +75,7 @@ atom-panel[location="right"] {
 // Modal panels
 
 .overlay, // deprecated .overlay
-atom-panel[location="modal"] {
+atom-panel.modal {
   position: absolute;
   left: 50%;
   width: 500px;
@@ -117,7 +117,7 @@ atom-panel[location="modal"] {
 
 // deprecated: from-top, from-bottom
 .overlay.from-top,
-atom-panel[location="modal"] {
+atom-panel.modal {
   top: 0;
   border-top: none;
   border-top-left-radius: 0;