Merge pull request atom#22751 from atom/use-custom-element-on-pane-element

Use custom element on pane-element

Author: sadick254

packages/about/spec/about-spec.js

@@ -43,6 +43,7 @@ describe('About', () => {
   describe('when the Atom version number is clicked', () => {
     it('copies the version number to the clipboard', async () => {
       await atom.workspace.open('atom://about');
+      jasmine.attachToDOM(workspaceElement);
 
       let aboutElement = workspaceElement.querySelector('.about');
       let versionContainer = aboutElement.querySelector('.atom');
@@ -67,6 +68,7 @@ describe('About', () => {
   describe('when the Electron version number is clicked', () => {
     it('copies the version number to the clipboard', async () => {
       await atom.workspace.open('atom://about');
+      jasmine.attachToDOM(workspaceElement);
 
       let aboutElement = workspaceElement.querySelector('.about');
       let versionContainer = aboutElement.querySelector('.electron');
@@ -78,6 +80,7 @@ describe('About', () => {
   describe('when the Chrome version number is clicked', () => {
     it('copies the version number to the clipboard', async () => {
       await atom.workspace.open('atom://about');
+      jasmine.attachToDOM(workspaceElement);
 
       let aboutElement = workspaceElement.querySelector('.about');
       let versionContainer = aboutElement.querySelector('.chrome');
@@ -89,6 +92,7 @@ describe('About', () => {
   describe('when the Node version number is clicked', () => {
     it('copies the version number to the clipboard', async () => {
       await atom.workspace.open('atom://about');
+      jasmine.attachToDOM(workspaceElement);
 
       let aboutElement = workspaceElement.querySelector('.about');
       let versionContainer = aboutElement.querySelector('.node');

packages/about/spec/about-status-bar-spec.js

@@ -22,6 +22,7 @@ describe('the status bar', () => {
 
     await atom.packages.activatePackage('status-bar');
     await atom.workspace.open('sample.js');
+    jasmine.attachToDOM(workspaceElement);
   });
 
   afterEach(async () => {

packages/go-to-line/spec/go-to-line-spec.js

@@ -77,7 +77,7 @@ describe('GoToLine', () => {
       const rowsPerPage = editor.getRowsPerPage();
       const currentRow = editor.getCursorBufferPosition().row;
       expect(editor.getFirstVisibleScreenRow()).toBe(
-        currentRow - Math.ceil(rowsPerPage / 2)
+        Math.ceil(currentRow - rowsPerPage / 2)
       );
       expect(editor.getLastVisibleScreenRow()).toBe(
         currentRow + Math.floor(rowsPerPage / 2)

src/pane-element.js

@@ -2,15 +2,17 @@ const path = require('path');
 const { CompositeDisposable } = require('event-kit');
 
 class PaneElement extends HTMLElement {
-  createdCallback() {
+  constructor() {
+    super();
     this.attached = false;
     this.subscriptions = new CompositeDisposable();
     this.inlineDisplayStyles = new WeakMap();
-    this.initializeContent();
     this.subscribeToDOMEvents();
+    this.itemViews = document.createElement('div');
   }
 
-  attachedCallback() {
+  connectedCallback() {
+    this.initializeContent();
     this.attached = true;
     if (this.model.isFocused()) {
       this.focus();
@@ -24,7 +26,6 @@ class PaneElement extends HTMLElement {
   initializeContent() {
     this.setAttribute('class', 'pane');
     this.setAttribute('tabindex', -1);
-    this.itemViews = document.createElement('div');
     this.appendChild(this.itemViews);
     this.itemViews.setAttribute('class', 'item-views');
   }
@@ -148,6 +149,7 @@ class PaneElement extends HTMLElement {
         });
       }
     }
+
     if (!this.itemViews.contains(itemView)) {
       this.itemViews.appendChild(itemView);
     }
@@ -213,6 +215,12 @@ class PaneElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-pane', {
-  prototype: PaneElement.prototype
-});
+function createPaneElement() {
+  return document.createElement('atom-pane');
+}
+
+window.customElements.define('atom-pane', PaneElement);
+
+module.exports = {
+  createPaneElement
+};

src/pane.js

@@ -2,7 +2,7 @@ const Grim = require('grim');
 const { CompositeDisposable, Emitter } = require('event-kit');
 const PaneAxis = require('./pane-axis');
 const TextEditor = require('./text-editor');
-const PaneElement = require('./pane-element');
+const { createPaneElement } = require('./pane-element');
 
 let nextInstanceId = 1;
 
@@ -98,7 +98,7 @@ module.exports = class Pane {
 
   getElement() {
     if (!this.element) {
-      this.element = new PaneElement().initialize(this, {
+      this.element = createPaneElement().initialize(this, {
         views: this.viewRegistry,
         applicationDelegate: this.applicationDelegate
       });