diff --git a/src/server/pause.js b/src/server/pause.js index 3cfb1d5c..e5cd1360 100644 --- a/src/server/pause.js +++ b/src/server/pause.js @@ -43,7 +43,6 @@ const controls = ` #d2l-test-controls #run { display: flex; gap: 0.65em; - flex-wrap: wrap; align-items: center; } @@ -60,13 +59,31 @@ const controls = ` box-shadow: none; } - #d2l-test-controls #test-name { - font-size: 0.9em; + #d2l-test-controls #title { flex: 1; + text-align: left; white-space: nowrap; + margin: 0 0.5em; + overflow: hidden; + } + + #d2l-test-controls #test-name .title-sep { + -webkit-user-select: none; + user-select: none; + } + + #d2l-test-controls #root-name { + font-size: .7em; + overflow: hidden; + text-overflow: ellipsis; + color: #999; + line-height: 1; + } + + #d2l-test-controls #test-name { + font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; - text-align: left; } #d2l-test-controls button { @@ -129,7 +146,10 @@ const controls = ` @@ -153,6 +173,7 @@ const runBtn = document.querySelector('#run-button'); runBtn.addEventListener('click', run); const testName = document.querySelector('#test-name'); +const rootName = document.querySelector('#root-name'); /* eslint-disable no-undef, no-invalid-this */ let currentTest, focusEl = runBtn; @@ -166,7 +187,9 @@ beforeEach(async function() { setTimeout(async() => { await fixture; - testName.innerText = currentTest.fullTitle(); + const titlePath = currentTest.titlePath(); + testName.innerHTML = testName.title = titlePath.slice(1).join(' > '); + rootName.innerText = titlePath[0]; if (test.pause) { runBtn.disabled = false;