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

chore: recorder toolbar polish (#33983)

Browse source
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 { x-pw-tool-item {
pointer-events: auto; pointer-events: auto;
cursor: pointer;
height: 28px; height: 28px;
width: 28px; width: 28px;
border-radius: 3px; border-radius: 3px;
} }
x-pw-tool-item:not(.disabled) {
cursor: pointer;
}
x-pw-tool-item:not(.disabled):hover { x-pw-tool-item:not(.disabled):hover {
background-color: hsl(0, 0%, 86%); background-color: hsl(0, 0%, 86%);
} }
x-pw-tool-item.active { x-pw-tool-item.toggled {
background-color: rgba(138, 202, 228, 0.5); 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; background-color: #8acae4c4;
} }
@ -179,18 +182,22 @@ x-pw-tool-item.disabled > x-div {
cursor: default; cursor: default;
} }
x-pw-tool-item.record.active { x-pw-tool-item.record.toggled {
background-color: transparent; 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%); 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; background-color: #a1260d;
} }
x-pw-tool-item.record.disabled.toggled > x-div {
opacity: 0.8;
}
x-pw-tool-item.accept > x-div { x-pw-tool-item.accept > x-div {
background-color: #388a34; 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 } }; this._dragState = { offsetX: this._offsetX, dragStart: { x: (event as MouseEvent).clientX, y: 0 } };
}), }),
addEventListener(this._recordToggle, 'click', () => { 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'); this._recorder.setMode(this._recorder.state.mode === 'none' || this._recorder.state.mode === 'standby' || this._recorder.state.mode === 'inspecting' ? 'recording' : 'standby');
}), }),
addEventListener(this._pickLocatorToggle, 'click', () => { addEventListener(this._pickLocatorToggle, 'click', () => {
if (this._pickLocatorToggle.classList.contains('disabled'))
return;
const newMode: Record<Mode, Mode> = { const newMode: Record<Mode, Mode> = {
'inspecting': 'standby', 'inspecting': 'standby',
'none': 'inspecting', 'none': 'inspecting',
@ -929,15 +933,15 @@ class Overlay {
} }
setUIState(state: UIState) { 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._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('active', state.mode === 'inspecting' || state.mode === 'recording-inspecting'); this._pickLocatorToggle.classList.toggle('toggled', state.mode === 'inspecting' || state.mode === 'recording-inspecting');
this._assertVisibilityToggle.classList.toggle('active', state.mode === 'assertingVisibility'); this._assertVisibilityToggle.classList.toggle('toggled', state.mode === 'assertingVisibility');
this._assertVisibilityToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting'); 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._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._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'); this._assertSnapshotToggle.classList.toggle('disabled', state.mode === 'none' || state.mode === 'standby' || state.mode === 'inspecting');
if (this._offsetX !== state.overlay.offsetX) { if (this._offsetX !== state.overlay.offsetX) {
this._offsetX = state.overlay.offsetX; this._offsetX = state.overlay.offsetX;