added a scrollbox for each app logs

vscode-appdaemon/tests/logUi.test.js

@@ -25,7 +25,8 @@ test('English interface, latest timestamps, sorting and separate initialization
  assert.match(d.querySelector('[data-app="alpha"] .last-age').title,/10:00:10/);
  assert.match(d.querySelector('[data-app="alpha"] summary .last-log').textContent,/ : Température déjà disponible$/);
  const summary=d.querySelector('[data-app="alpha"] summary');
- assert.deepEqual([...summary.children].map(child=>child.className),['app-label','badge INFO','badge WARNING','badge ERROR','last-log']);
+ assert.deepEqual([...summary.children].slice(0,4).map(child=>child.className),['app-label','badge INFO','badge WARNING','badge ERROR']);
+ assert.ok(summary.children[4].classList.contains('last-log'));
  assert.equal(summary.querySelector('.app-label .last-log'),null);
  d.getElementById('sort').value='oldest';d.getElementById('sort').dispatchEvent(new dom.window.Event('input'));
  assert.equal(d.querySelector('[data-app]').dataset.app,'alpha');
@@ -122,6 +123,35 @@ test('pulses an app when a new log arrives and refreshes its last-log age',async
  dom.window.close();
 });
 
+test('expanded logs follow new events at the bottom and keep position while reading history',async()=>{
+ const {dom,d,entries,send}=setup();
+ Object.defineProperty(dom.window.HTMLElement.prototype,'scrollHeight',{configurable:true,get(){return this.classList.contains('rows') ? this.children.length*100 : 0;}});
+ Object.defineProperty(dom.window.HTMLElement.prototype,'clientHeight',{configurable:true,get(){return this.classList.contains('rows') ? 100 : 0;}});
+ const app=d.querySelector('[data-app="alpha"]');app.open=true;app.dispatchEvent(new dom.window.Event('toggle'));
+ const rows=()=>d.querySelector('[data-app="alpha"] .rows');
+ assert.equal(rows().scrollTop,rows().scrollHeight);
+ const first={...entries[3],event_id:'new-tail',time:entries[3].time+1000,message:'Newest'};
+ send([...entries,first]);
+ assert.equal(rows().scrollTop,rows().scrollHeight);
+ rows().scrollTop=20;
+ const second={...entries[3],event_id:'new-tail-2',time:entries[3].time+2000,message:'Newer'};
+ send([...entries,first,second]);
+ assert.equal(rows().scrollTop,20);
+ assert.match(rows().textContent,/Newer/);
+ dom.window.close();
+});
+
+test('the newest log stays at the bottom when older groups are omitted',()=>{
+ const {dom,d,entries,send}=setup();
+ const base=entries[3];
+ send(Array.from({length:152},(_,index)=>({...base,event_id:`event-${index}`,time:base.time+index*1000,message:`Message ${index}`})));
+ const app=d.querySelector('[data-app="alpha"]');app.open=true;app.dispatchEvent(new dom.window.Event('toggle'));
+ const rows=app.querySelector('.rows');
+ assert.ok(rows.firstElementChild.classList.contains('more'));
+ assert.match(rows.lastElementChild.textContent,/Message 151/);
+ dom.window.close();
+});
+
 test('distinguishes log lines from supplemental records when configured',()=>{
  const {dom,d,entries,send}=setup();
  const trace={...entries[3],event_id:'trace-evaluation',kind:'evaluation',message:'Condition was evaluated'};