Repository: microsoft/playwright
File: packages/trace-viewer/src/ui/workbenchLoader.tsx (TypeScript)

Code before:
      </div>
    </div>}
    <Dialog open={showProgressDialog} isModal={true} className='progress-dialog'>
      <div className='progress-content'>
        <div className='title' role='heading' aria-level={1}>Loading Playwright Trace...</div>
        <div className='progress-wrapper'>
          <div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>
        </div>
      </div>
    </Dialog>
    {showFileUploadDropArea && <div className='drop-target'>
      <div className='processing-error' role='alert'>{processingErrorMessage}</div>
      <div className='title' role='heading' aria-level={1}>Drop Playwright Trace to load</div>
      <div>or</div>
      <button onClick={() => {
        const input = document.createElement('input');
        input.type = 'file';
        input.click();
        input.addEventListener('change', e => handleFileInputChange(e));
      }} type='button'>Select file</button>
      <div style={{ maxWidth: 400 }}>Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere,
        it opens it locally.</div>
    </div>}
    {isServer && !traceURL && <div className='drop-target'>
      <div className='title'>Select test to see the trace</div>
    </div>}
    {dragOver && <div className='drop-target'
      onDragLeave={() => { setDragOver(false); }}
      onDrop={event => handleDropEvent(event)}>
      <div className='title'>Release to analyse the Playwright Trace</div>
    </div>}
  </div>;
};

export const emptyModel = new MultiTraceModel('', []);


Review comment (suggestion):
For visibility I'd prefer Vite's `import.meta.env` functionality, but I believe that will run into build issues. Just mentioning this here as as matter of preference.

Code after:
        <div>1. Click <a href={fileForLocalModeError}>here</a> to put your trace into the download shelf</div>
        <div>2. Go to <a href='https://trace.playwright.dev'>trace.playwright.dev</a></div>
        <div>3. Drop the trace from the download shelf into the page</div>
      </div>
    </div>}
    <Dialog open={showProgressDialog} isModal={true} className='progress-dialog'>
      <div className='progress-content'>
        <div className='title' role='heading' aria-level={1}>Loading Playwright Trace...</div>
        <div className='progress-wrapper'>
          <div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>
        </div>
      </div>
    </Dialog>
    {showFileUploadDropArea && <div className='drop-target'>
      <div className='processing-error' role='alert'>{processingErrorMessage}</div>
      <div className='title' role='heading' aria-level={1}>Drop Playwright Trace to load</div>
      <div>or</div>
      <button onClick={() => {
        const input = document.createElement('input');
        input.type = 'file';
        input.click();
        input.addEventListener('change', e => handleFileInputChange(e));
      }} type='button'>Select file</button>
      <div className='info'>Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere,
        it opens it locally.</div>
      <div className='version'>Playwright v{__APP_VERSION__}</div>
    </div>}
    {isServer && !traceURL && <div className='drop-target'>
      <div className='title'>Select test to see the trace</div>
    </div>}
    {dragOver && <div className='drop-target'
      onDragLeave={() => { setDragOver(false); }}
      onDrop={event => handleDropEvent(event)}>
      <div className='title'>Release to analyse the Playwright Trace</div>
    </div>}
  </div>;
};

export const emptyModel = new MultiTraceModel('', []);