Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui-mode): disconnected error styling (#28681)

Browse source 
Fixes https://github.com/microsoft/playwright/issues/28679
Fixes https://github.com/microsoft/playwright/issues/28680
This commit is contained in:
Max Schmitt 2023-12-18 17:32:57 +01:00 committed by GitHub
parent ea4bb715f3
commit 696237205a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/trace-viewer/src/ui/uiModeView.css
View file

@ -74,13 +74,25 @@
} }
.ui-mode .disconnected { .ui-mode .disconnected {
display: flex;
align-items: center;
justify-content: center;
flex: auto;
flex-direction: column;
background-color: var(--vscode-editor-background);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
z-index: 1000; z-index: 1000;
background-color: rgba(0, 0, 0, 0.5); line-height: 24px;
}
.disconnected .title {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
} }
.status-line { .status-line {

4
packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -207,9 +207,9 @@ export const UIModeView: React.FC<{}> = ({
<button className='button secondary' onClick={closeInstallDialog}>Dismiss</button> <button className='button secondary' onClick={closeInstallDialog}>Dismiss</button>
</div> </div>
</dialog>} </dialog>}
{isDisconnected && <div className='drop-target'> {isDisconnected && <div className='disconnected'>
<div className='title'>UI Mode disconnected</div> <div className='title'>UI Mode disconnected</div>
<div><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div> <div><a href='#' onClick={() => window.location.href = '/'}>Reload the page</a> to reconnect</div>
</div>} </div>}
<SplitView sidebarSize={250} minSidebarSize={150} orientation='horizontal' sidebarIsFirst={true} settingName='testListSidebar'> <SplitView sidebarSize={250} minSidebarSize={150} orientation='horizontal' sidebarIsFirst={true} settingName='testListSidebar'>
<div className='vbox'> <div className='vbox'>