[WIP] Update to Ember 2.10 and Glimmer 2

portiaui/app/components/browser-iframe.js

@@ -53,12 +53,12 @@ const BrowserIFrame = Ember.Component.extend({
         }
         BrowserIFrame.instances++;
         const ws = this.get('webSocket');
-        ws.connect();
         ws.addCommand('loadStarted', this, this.msgLoadStarted);
         ws.addCommand('metadata', this, this.msgMetadata);
         ws.addCommand('load', this, this.msgLoad);
         ws.addCommand('cookies', this, this.msgCookies);
         ws.addCommand('mutation', this, this.msgMutation);
+        ws.addCommand('save_html', this, this.noop);
     },
 
     didInsertElement() {
@@ -78,6 +78,7 @@ const BrowserIFrame = Ember.Component.extend({
         ws.removeCommand('load', this, this.msgLoad);
         ws.removeCommand('cookies', this, this.msgCookies);
         ws.removeCommand('mutation', this, this.msgMutation);
+        ws.removeCommand('save_html', this, this.noop);
         ws.close();
 
         this.setProperties({
@@ -197,6 +198,10 @@ const BrowserIFrame = Ember.Component.extend({
         }
     },
 
+    noop() {
+        return null;
+    },
+
     loadCookies(){
         let cookieId = this.get('cookieId');
         if(cookieId){

portiaui/app/components/buffered-input.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import { ensurePromise } from '../utils/promises';
+import { shortGuid } from '../utils/utils';
 
 export default Ember.Component.extend({
     tagName: '',
@@ -12,6 +13,11 @@ export default Ember.Component.extend({
     value: null,
     viewValue: null,
 
+    init() {
+        this._super(...arguments);
+        this.set('inputId', `${shortGuid()}-input`);
+    },
+
     didInsertElement() {
         if (this.get('focused')) {
             Ember.run.schedule('afterRender', () => {
@@ -24,10 +30,6 @@ export default Ember.Component.extend({
              .keypress((e) => e.which !== 13);
     },
 
-    inputId: Ember.computed('elementId', function() {
-        return this.get('elementId') + '-input';
-    }),
-
     displayedValue: Ember.computed('value', 'viewValue', 'focused', {
         get() {
             if (this.get('focused')) {

portiaui/app/components/fragment-options.js

@@ -10,6 +10,8 @@ import FixedFragmentValidations from '../validations/fixed-fragment';
 import RangeFragmentValidations from '../validations/range-fragment';
 import ListFragmentValidations  from '../validations/list-fragment';
 
+import { shortGuid } from '../utils/utils';
+
 const TOOLTIP_DEBOUNCE = 1000;
 const TOOLTIP_DELAY = 2000;
 
@@ -31,6 +33,11 @@ export default Ember.Component.extend({
         { value: 'list',  label: 'List' }
     ],
 
+    init() {
+        this._super(...arguments);
+        this.set('uniqueId', shortGuid());
+    },
+
     fragmentType: computed('fragment.type', {
         get() {
             return this.get('fragmentTypes').findBy('value', this.get('fragment.type'));

portiaui/app/components/help-icon.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { shortGuid } from '../utils/utils';
 
 export default Ember.Component.extend({
     tagName: '',
@@ -8,4 +9,9 @@ export default Ember.Component.extend({
     placement: 'right',
     icon: 'help',
     classes: 'help-icon',
+
+    init() {
+        this.set('uniqueId', shortGuid());
+        this._super(...arguments);
+    }
 });

portiaui/app/components/notification-container.js

@@ -11,25 +11,13 @@ export default Ember.Component.extend({
     banners: Ember.computed('_banners.[]', 'notificationManager.banners.[]', function() {
         const lastBanners = this.get('_banners');
         const banners = this.get('notificationManager.banners');
-        for (let banner of lastBanners) {
-            Ember.set(banner, 'fading', true);
-        }
-        for (let banner of banners) {
-            Ember.set(banner, 'fading', undefined);
-        }
         lastBanners.addObjects(banners);
         return lastBanners;
     }),
     notifications: Ember.computed('_notifications.[]', 'notificationManager.notifications.[]',
         function() {
             const lastNotifications = this.get('_notifications');
             const notifications = this.get('notificationManager.notifications');
-            for (let notification of lastNotifications) {
-                Ember.set(notification, 'fading', true);
-            }
-            for (let notification of notifications) {
-                Ember.set(notification, 'fading', undefined);
-            }
             lastNotifications.addObjects(notifications);
             return lastNotifications;
         }),
@@ -46,10 +34,12 @@ export default Ember.Component.extend({
         },
 
         fadeBanner(banner) {
+            Ember.set(banner, 'fading', true);
             this.get('_banners').removeObject(banner);
         },
 
         fadeNotification(notification) {
+            Ember.set(notification, 'fading', true);
             this.get('_notifications').removeObject(notification);
         }
     }

portiaui/app/components/save-status.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { shortGuid } from '../utils/utils';
 
 export default Ember.Component.extend({
     clock: Ember.inject.service(),
@@ -13,6 +14,7 @@ export default Ember.Component.extend({
     init() {
         this._super(...arguments);
         this.wasSaving = false;
+        this.set('uniqueId', `${shortGuid()}-saving`);
     },
 
     isSaving: Ember.computed('savingNotification.isSaving', {
@@ -39,7 +41,7 @@ export default Ember.Component.extend({
             return value;
         }
     }),
-    timeSinceLastSave: Ember.computed('clock.time', 'savingNotification.lastSaved', function() {
+    timeSinceLastSave: Ember.computed('savingNotification.lastSaved', function() {
         const current = this.get('clock.time');
         const last = this.get('savingNotification.lastSaved');
         if (!current || !last) {

portiaui/app/components/select-box.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { shortGuid } from '../utils/utils';
 
 export default Ember.Component.extend({
     tagName: '',
@@ -24,16 +25,17 @@ export default Ember.Component.extend({
         }
     }),
 
+    init() {
+        this._super(...arguments);
+        this.set('inputId', `${shortGuid()}-input`);
+    },
+
     didInsertElement() {
         if (this.get('open')) {
             Ember.run.next(this, this.setInputFocus);
         }
     },
 
-    inputId: Ember.computed('elementId', function() {
-        return this.get('elementId') + '-input';
-    }),
-
     updateInputFocus: Ember.observer('open', function() {
         Ember.run.scheduleOnce('afterRender', this, this.setInputFocus);
     }),

portiaui/app/components/tooltip-container.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import { shortGuid } from '../utils/utils';
 
 export default Ember.Component.extend({
     tagName: '',
@@ -21,6 +22,7 @@ export default Ember.Component.extend({
     init() {
         this._super();
         this.$tooltipElement = null;
+        this.set('uniqueId', `${shortGuid()}-tooltip`);
     },
 
     didInsertElement() {
@@ -40,7 +42,7 @@ export default Ember.Component.extend({
                 tooltip code will happily swallow this and insert it into the
                 DOM. Ember will keep this element updated as data changes.
              */
-            template: Ember.$(`[data-tooltip-id="${this.elementId}"]`).detach(),
+            template: Ember.$(`[data-tooltip-id="${this.get('uniqueId')}"]`).detach(),
             // title is checked for truthiness by bootstrap
             title: true,
             container: this.get('tooltipContainer'),

portiaui/app/services/web-socket.js

@@ -30,13 +30,15 @@ export default Ember.Service.extend(Ember.Evented, {
     reconnectImminent: Ember.computed.lt('secondsUntilReconnect', 2),
 
     init: function(options) {
+        this._super(...arguments);
         if(options) { this.setProperties(options); }
 
         window.addEventListener('beforeunload', () => {
             if(this.get('opened')) {
                 this.close(APPLICATION_UNLOADING_CODE);
             }
         });
+        this.connect();
     },
 
     connect: function() {
@@ -61,7 +63,9 @@ export default Ember.Service.extend(Ember.Evented, {
             clearInterval(this.heartbeat);
         }
         this.set('closed', true);
-        this.set('connecting', false);
+        if (this.get('connecting')) {
+            this.set('connecting', false);
+        }
         Ember.Logger.log('<Closed Websocket>');
         if(e.code !== APPLICATION_UNLOADING_CODE && e.code !== 1000) {
             var timeout = this._connectTimeout();
@@ -104,7 +108,9 @@ export default Ember.Service.extend(Ember.Evented, {
     _onopen() {
         Ember.Logger.log('<Opened Websocket>');
         this.set('closed', false);
-        this.set('connecting', false);
+        if (this.get('connecting')) {
+            this.set('connecting', false);
+        }
         this.set('reconnectTimeout', DEFAULT_RECONNECT_TIMEOUT);
         this.heartbeat = setInterval(function() {
             this.send({_command: 'heartbeat'});
@@ -117,15 +123,19 @@ export default Ember.Service.extend(Ember.Evented, {
             this.set('reconnectTid', null);
         }
         this.set('secondsUntilReconnect', 0);
-        this.set('connecting', true);
+        let connecting = true;
         var ws;
         try {
             ws = new WebSocket(this.get('url'));
         } catch (err) {
             Ember.Logger.log('Error connecting to server: ' + err);
+            connecting = false;
+        }
+        if (!connecting) {
             this.set('connecting', false);
             return;
         }
+        this.set('connecting', true);
         ws.onclose = this._onclose.bind(this);
         ws.onmessage = this._onmessage.bind(this);
         ws.onopen = this._onopen.bind(this);

portiaui/app/templates/components/fragment-options.hbs

@@ -1,11 +1,11 @@
 {{#if changeset.isValid}}
     {{list-item-badge value=multiplicity color=fragmentColor}}
 {{else}}
-    {{#tooltip-container toggleTooltip=toggleTooltip tooltipContainer='body' tooltipFor=(concat 'error-icon-' elementId) placement='left' as |tooltip|}}
+    {{#tooltip-container toggleTooltip=toggleTooltip tooltipContainer='body' tooltipFor=(concat 'error-icon-' uniqueId) placement='left' as |tooltip|}}
         {{#if (eq tooltip.section 'tooltip')}}
             {{changeset.error.value.validation}}
         {{else}}
-            {{icon-button id=(concat 'error-icon-' elementId) icon='error-triangle' class='fragment-error tooltip-for'}}
+            {{icon-button id=(concat 'error-icon-' uniqueId) icon='error-triangle' class='fragment-error tooltip-for'}}
         {{/if}}
     {{/tooltip-container}}
 {{/if}}

portiaui/app/templates/components/help-icon.hbs

@@ -1,7 +1,7 @@
-{{#tooltip-container tooltipClasses=tooltipClasses tooltipFor=(concat "help-icon-" elementId) tooltipContainer=tooltipContainer placement=placement as |tooltip|}}
+{{#tooltip-container tooltipClasses=tooltipClasses tooltipFor=(concat "help-icon-" uniqueId) tooltipContainer=tooltipContainer placement=placement as |tooltip|}}
     {{#if (eq tooltip.section 'tooltip')}}
         {{yield}}
     {{else}}
-        {{icon-button id=(concat "help-icon-" elementId) class=classes icon=icon}}
+        {{icon-button id=(concat "help-icon-" uniqueId) class=classes icon=icon}}
     {{/if}}
 {{/tooltip-container}}

portiaui/app/templates/components/save-status.hbs

@@ -1,8 +1,8 @@
-{{#tooltip-container tooltipFor=(concat "label-" elementId) tooltipContainer='body' as |tooltip|}}
+{{#tooltip-container tooltipFor=(concat "label-" uniqueId) tooltipContainer='body' as |tooltip|}}
     {{#if (eq tooltip.section 'tooltip')}}
         <p class="first">Every change you make is automatically saved by Portia</p>
     {{else}}
-        <span id="label-{{elementId}}" class="label label-{{labelColorClass}}">
+        <span id="label-{{uniqueId}}" class="label label-{{labelColorClass}}">
             {{#if isSaving}}
                 Saving <span>.</span><span>.</span><span>.</span>
             {{else if timeSinceLastSave}}

portiaui/app/templates/components/tooltip-container.hbs

@@ -1,5 +1,5 @@
 {{yield (hash section='body')}}
-<div class={{concat "tooltip" (if tooltipClasses (concat ' ' tooltipClasses))}} role="tooltip" data-tooltip-id="{{elementId}}">
+<div class={{concat "tooltip" (if tooltipClasses (concat ' ' tooltipClasses))}} role="tooltip" data-tooltip-id="{{uniqueId}}">
     <div class="tooltip-arrow"></div>
     <div class="tooltip-content">
         {{#if text}}

portiaui/app/templates/components/tooltip-icon.hbs

@@ -1,10 +1,10 @@
 {{#tooltip-container
-  tooltipFor=elementId
+  tooltipFor=uniqueId
   text=text
   tooltipContainer='body'
 }}
     {{icon-button
-      id=elementId
+      id=uniqueId
       icon=icon
       modifyClasses=modifyClasses
       action=(action 'onClick')

portiaui/bower.json

@@ -5,20 +5,18 @@
     "!bower.json"
   ],
   "dependencies": {
-    "ember": "~2.6.0",
-    "ember-cli-shims": "0.1.1",
-    "ember-cli-test-loader": "0.2.2",
+    "ember-cli-shims": "0.1.3",
     "ember-qunit-notifications": "0.1.0",
-    "jquery": "^2.2.0",
+    "jquery": "~3.1.1",
     "blob-polyfill": "~1.0.20150320",
-    "cookie": "~1.1.0",
+    "cookie": "~1.2.2",
     "bootstrap-sass": "~3.3.6",
-    "font-awesome": "~4.5.0",
+    "font-awesome": "~4.7.0",
     "jquery-color": "~2.1.2",
-    "moment": "~2.11.2",
-    "uri.js": "~1.16.0",
-    "fetch": "~0.10.1",
-    "es6-promise": "~3.0.2",
+    "moment": "~2.17.1",
+    "uri.js": "~1.18.4",
+    "fetch": "~2.0.1",
+    "es6-promise": "~4.0.5",
     "uri-templates": "~0.1.9",
     "css-escape": "~1.5.0",
     "animation-frame": "~0.2.4"