kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: recorder toolbar polish (#33983)

This commit is contained in:
Pavel Feldman 2024-12-13 16:10:45 -08:00 committed by GitHub
parent 369f4b76b3
commit cbc809edc7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/playwright-core/src/server/injected/highlight.css
View File

@ -149,21 +149,24 @@ x-pw-tools-list {
x-pw-tool-item {
pointer-events: auto;
cursor: pointer;
height: 28px;
width: 28px;
border-radius: 3px;
}
x-pw-tool-item:not(.disabled) {
cursor: pointer;
}
x-pw-tool-item:not(.disabled):hover {
background-color: hsl(0, 0%, 86%);
}
x-pw-tool-item.active {
x-pw-tool-item.toggled {
background-color: rgba(138, 202, 228, 0.5);
}
x-pw-tool-item.active:not(.disabled):hover {
x-pw-tool-item.toggled:not(.disabled):hover {
background-color: #8acae4c4;
}
@ -179,18 +182,22 @@ x-pw-tool-item.disabled > x-div {
cursor: default;
}
x-pw-tool-item.record.active {
x-pw-tool-item.record.toggled {
background-color: transparent;
}
x-pw-tool-item.record.active:hover {
x-pw-tool-item.record.toggled:not(.disabled):hover {
background-color: hsl(0, 0%, 86%);
}
x-pw-tool-item.record.active > x-div {
x-pw-tool-item.record.toggled > x-div {
background-color: #a1260d;
}
x-pw-tool-item.record.disabled.toggled > x-div {
opacity: 0.8;
}
x-pw-tool-item.accept > x-div {
background-color: #388a34;
}

16
packages/playwright-core/src/server/injected/recorder/recorder.ts
View File

@ -883,9 +883,13 @@ class Overlay {
this._dragState = { offsetX: this._offsetX, dragStart: { x: (event as MouseEvent).clientX, y: 0 } };
}),
addEventListener(this._recordToggle, 'click', () => {
if (this._recordToggle.classList.contains('disabled'))
return;
this._recorder.setMode(this._recorder.state.mode === 'none' || this._recorder.state.mode === 'standby' || this._recorder.state.mode === 'inspecting' ? 'recording' : 'standby');
}),
addEventListener(this._pickLocatorToggle, 'click', () => {
if (this._pickLocatorToggle.classList.contains('disabled'))
return;
const newMode: Record<Mode, Mode> = {
'inspecting': 'standby',
'none': 'inspecting',
@ -929,15 +933,15 @@ class Overlay {
}
setUIState(state: UIState) {
this._recordToggle.classList.toggle('active', state.mode === 'recording' || state.mode === 'assertingText' || state.mode === 'assertingVisibility' || state.mode === 'assertingValue' || state.mode === 'recording-inspecting');
this._pickLocatorToggle.classList.toggle('active', state.mode === 'inspecting' || state.mode === 'recording-inspecting');
this._assertVisibilityToggle.classList.toggle('active', state.mode === 'assertingVisibility');
this._recordToggle.classList.toggle('toggled', state.mode === 'recording' || state.mode === 'assertingText' || state.mode === 'assertingVisibility' || state.mode === 'assertingValue' || state.mode === 'assertingSnapshot' || state.mode === 'recording-inspecting');
this._pickLocatorToggle.classList.toggle('toggled', state.mode === 'inspecting' || state.mode === 'recording-inspecting');
this._assertVisibilityToggle.classList.toggle('toggled', state.mode === 'assertingVisibility');
this._assertVisibilityToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting');
this._assertTextToggle.classList.toggle('active', state.mode === 'assertingText');
this._assertTextToggle.classList.toggle('toggled', state.mode === 'assertingText');
this._assertTextToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting');
this._assertValuesToggle.classList.toggle('active', state.mode === 'assertingValue');
this._assertValuesToggle.classList.toggle('toggled', state.mode === 'assertingValue');
this._assertValuesToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting');
this._assertSnapshotToggle.classList.toggle('active', state.mode === 'assertingSnapshot');
this._assertSnapshotToggle.classList.toggle('toggled', state.mode === 'assertingSnapshot');
this._assertSnapshotToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting');
if (this._offsetX !== state.overlay.offsetX) {
this._offsetX = state.overlay.offsetX;