'use babel'
export default class PackageDepsView {
  constructor(packageName, packageNames){
    this.packageName = packageName
    this.packageNames = packageNames

    this.progress = document.createElement('progress')
    this.progress.max = packageNames.length
    this.progress.value = 0
    this.progress.classList.add('display-inline')
    this.progress.style.width = '100%'

  }
  createNotification() {
    return new Promise(() => {
      setTimeout(() => {
        this.notification = atom.notifications.addInfo(`Installing ${packageName} dependencies`, {
          detail: 'Installing ' + packageNames.join(', '),
          dismissable: true
        })
        this.notificationEl = atom.views.getView(this.notification)
        this.notificationContentEl = this.notificationEl.querySelector('.detail-content')
        if (this.notificationContentEl) { // Future-proof
          this.notificationContentEl.appendChild(this.progress)
        }
      }, 20)
    })
  }
  markFinished() {
    this.progress.value++
    if (this.progress.value === this.progress.max) {
      const titleEl = this.notificationEl.querySelector('.message p')
      if (titleEl) {
        titleEl.textContent = `Installed ${this.packageName} dependencies`
      }
      this.notificationContentEl.textContent = 'Installed ' + this.packageNames.join(', ')
      this.notificationEl.classList.remove('info')
      this.notificationEl.classList.remove('icon-info')
      this.notificationEl.classList.add('success')
      this.notificationEl.classList.add('icon-check')
    }
  }
  markErrored(name, output) {
    atom.notifications.addError(`Error installing ${name}`, {detail: output})
  }
}

@@ -530,16 +530,21 @@
 lling $%7B
+this.
 packageN
@@ -599,16 +599,21 @@
 ing ' + 
+this.
 packageN

Fix a couple of reference errors