More updates to itb (wip)
This commit is contained in:
@@ -205,4 +205,4 @@ function analyzePageContent() {
|
||||
viewport: getViewportInfo(),
|
||||
content: body ? processElements(body) : []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
208
tools/itb/js/dom_analyzer.js.orig
Normal file
208
tools/itb/js/dom_analyzer.js.orig
Normal file
@@ -0,0 +1,208 @@
|
||||
// Helper function to check if element is clickable
|
||||
function isClickable(element) {
|
||||
// Check tag name
|
||||
if (element.tagName === 'BUTTON' ||
|
||||
element.tagName === 'A' ||
|
||||
(element.tagName === 'INPUT' && element.type === 'submit')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check ARIA role
|
||||
if (element.getAttribute('role') === 'button') {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check for click handlers
|
||||
if (element.onclick ||
|
||||
element.getAttribute('onclick') ||
|
||||
element.getAttribute('ng-click') ||
|
||||
element.getAttribute('v-on:click')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check computed style
|
||||
const style = window.getComputedStyle(element);
|
||||
if (style.cursor === 'pointer') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Helper function to check if element is an input
|
||||
function isInputElement(element) {
|
||||
const inputTags = ['INPUT', 'TEXTAREA', 'SELECT'];
|
||||
if (inputTags.includes(element.tagName)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (element.getAttribute('contenteditable') === 'true') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (element.getAttribute('role') === 'textbox' ||
|
||||
element.getAttribute('role') === 'combobox') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Helper function to check if element is scrollable
|
||||
function isScrollable(element) {
|
||||
const style = window.getComputedStyle(element);
|
||||
|
||||
// Check for scroll overflow
|
||||
if (style.overflow === 'auto' ||
|
||||
style.overflow === 'scroll' ||
|
||||
style.overflowY === 'auto' ||
|
||||
style.overflowY === 'scroll' ||
|
||||
style.overflowX === 'auto' ||
|
||||
style.overflowX === 'scroll') {
|
||||
|
||||
// Verify element has scrollable content
|
||||
return element.scrollHeight > element.clientHeight ||
|
||||
element.scrollWidth > element.clientWidth;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Helper function to check if element is actually visible
|
||||
function isElementVisible(element) {
|
||||
const style = window.getComputedStyle(element);
|
||||
|
||||
// Special handling for fixed position elements
|
||||
if (style.position === 'fixed') {
|
||||
// Fixed elements are always considered visible if they have dimensions
|
||||
if (element.offsetWidth > 0 && element.offsetHeight > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// For non-fixed elements, check offsetParent
|
||||
if (!element.offsetParent && element !== document.body) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (style.display === 'none' ||
|
||||
style.visibility === 'hidden' ||
|
||||
style.opacity === '0') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.width === 0 || rect.height === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// For non-fixed elements, check viewport boundaries
|
||||
if (style.position !== 'fixed') {
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
if (rect.right < 0 ||
|
||||
rect.bottom < 0 ||
|
||||
rect.left > viewportWidth ||
|
||||
rect.top > viewportHeight) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Helper function to get element text
|
||||
function getElementText(element) {
|
||||
// Only process direct text nodes
|
||||
const textNodes = Array.from(element.childNodes)
|
||||
.filter(node => node.nodeType === Node.TEXT_NODE);
|
||||
|
||||
if (textNodes.length === 0) return '';
|
||||
|
||||
return textNodes
|
||||
.map(node => node.textContent.trim())
|
||||
.filter(text => text.length > 0)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
function processElements(element) {
|
||||
if (!element || !isElementVisible(element)) return [];
|
||||
|
||||
const rect = element.getBoundingClientRect();
|
||||
const styles = window.getComputedStyle(element);
|
||||
const isFixed = styles.position === 'fixed';
|
||||
|
||||
// Get element base info
|
||||
const elementInfo = {
|
||||
tag: element.tagName.toLowerCase(),
|
||||
x: Math.round(isFixed ? rect.left : rect.left + window.pageXOffset),
|
||||
y: Math.round(isFixed ? rect.top : rect.top + window.pageYOffset),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
interactions: [],
|
||||
fixed: isFixed
|
||||
};
|
||||
|
||||
// Add ID or suggested click coordinates for any interactive element
|
||||
if (isClickable(element) || isInputElement(element)) {
|
||||
const id = element.id;
|
||||
if (id) {
|
||||
elementInfo.id = id;
|
||||
} else {
|
||||
// Only add suggested click if there's no ID
|
||||
elementInfo.suggestedClick = {
|
||||
x: Math.round(elementInfo.x + elementInfo.width / 2),
|
||||
y: Math.round(elementInfo.y + elementInfo.height / 2)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Add text only if this isn't going to be an interactive element
|
||||
const isInteractive = isClickable(element) || isInputElement(element);
|
||||
if (!isInteractive) {
|
||||
elementInfo.text = getElementText(element);
|
||||
}
|
||||
|
||||
// Add interactions
|
||||
if (isClickable(element)) {
|
||||
elementInfo.interactions.push('click');
|
||||
elementInfo.buttonText = getElementText(element);
|
||||
}
|
||||
|
||||
if (isInputElement(element)) {
|
||||
const inputType = element.getAttribute('type') || 'text';
|
||||
elementInfo.interactions.push(`input:${inputType}`);
|
||||
|
||||
const placeholder = element.getAttribute('placeholder');
|
||||
if (placeholder) {
|
||||
elementInfo.placeholder = placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
if (isScrollable(element)) {
|
||||
elementInfo.interactions.push('scroll');
|
||||
}
|
||||
|
||||
// Special handling for images
|
||||
if (element.tagName === 'IMG') {
|
||||
elementInfo.src = element.src;
|
||||
elementInfo.alt = element.alt;
|
||||
}
|
||||
|
||||
// Process children
|
||||
elementInfo.children = Array.from(element.children)
|
||||
.map(child => processElements(child))
|
||||
.flat()
|
||||
.filter(child => child !== null);
|
||||
|
||||
return elementInfo;
|
||||
}
|
||||
|
||||
function analyzePageContent() {
|
||||
const body = document.body;
|
||||
return {
|
||||
viewport: getViewportInfo(),
|
||||
content: body ? processElements(body) : []
|
||||
};
|
||||
}
|
||||
178
tools/itb/js/dom_analyzer.js.patch
Normal file
178
tools/itb/js/dom_analyzer.js.patch
Normal file
@@ -0,0 +1,178 @@
|
||||
136,137c136,137
|
||||
< // Get element base info
|
||||
< const elementInfo = {
|
||||
---
|
||||
> // Get element base info
|
||||
> const elementInfo = {
|
||||
140c140
|
||||
< y: Math.round(isFixed ? rect.top : rect.top + window.pageYOffset),
|
||||
---
|
||||
> y: Math.round(isFixed ? rect.top : rect.top + window.pageYOffset),
|
||||
141c141
|
||||
< width: Math.round(rect.width),
|
||||
---
|
||||
> width: Math.round(rect.width),
|
||||
142c142
|
||||
< height: Math.round(rect.height),
|
||||
---
|
||||
> height: Math.round(rect.height),
|
||||
143c143
|
||||
< interactions: [],
|
||||
---
|
||||
> interactions: [],
|
||||
144c144
|
||||
< fixed: isFixed
|
||||
---
|
||||
> fixed: isFixed
|
||||
148c148
|
||||
< if (isClickable(element) || isInputElement(element)) {
|
||||
---
|
||||
> if (isClickable(element) || isInputElement(element)) {
|
||||
150c150
|
||||
< const id = element.id;
|
||||
---
|
||||
> const id = element.id;
|
||||
151c151
|
||||
< if (id) {
|
||||
---
|
||||
> if (id) {
|
||||
152c152
|
||||
< elementInfo.id = id;
|
||||
---
|
||||
> elementInfo.id = id;
|
||||
153c153
|
||||
< } else {
|
||||
---
|
||||
> } else {
|
||||
154c154
|
||||
< // Only add suggested click if there's no ID
|
||||
---
|
||||
> // Only add suggested click if there's no ID
|
||||
155c155
|
||||
< elementInfo.suggestedClick = {
|
||||
---
|
||||
> elementInfo.suggestedClick = {
|
||||
156c156
|
||||
< x: Math.round(elementInfo.x + elementInfo.width / 2),
|
||||
---
|
||||
> x: Math.round(elementInfo.x + elementInfo.width / 2),
|
||||
157c157
|
||||
< y: Math.round(elementInfo.y + elementInfo.height / 2)
|
||||
---
|
||||
> y: Math.round(elementInfo.y + elementInfo.height / 2)
|
||||
158c158
|
||||
< };
|
||||
---
|
||||
> };
|
||||
161c161
|
||||
< const isInteractive = isClickable(element) || isInputElement(element);
|
||||
---
|
||||
> const isInteractive = isClickable(element) || isInputElement(element);
|
||||
163c163
|
||||
< if (!isInteractive) {
|
||||
---
|
||||
> if (!isInteractive) {
|
||||
164c164
|
||||
< elementInfo.text = getElementText(element);
|
||||
---
|
||||
> elementInfo.text = getElementText(element);
|
||||
166c166
|
||||
< }
|
||||
---
|
||||
> }
|
||||
168c168
|
||||
< if (isClickable(element)) {
|
||||
---
|
||||
> if (isClickable(element)) {
|
||||
169c169
|
||||
< elementInfo.interactions.push('click');
|
||||
---
|
||||
> elementInfo.interactions.push('click');
|
||||
170c170
|
||||
< elementInfo.buttonText = getElementText(element);
|
||||
---
|
||||
> elementInfo.buttonText = getElementText(element);
|
||||
172c172
|
||||
< }
|
||||
---
|
||||
> }
|
||||
173c173
|
||||
< if (isInputElement(element)) {
|
||||
---
|
||||
> if (isInputElement(element)) {
|
||||
174c174
|
||||
< const inputType = element.getAttribute('type') || 'text';
|
||||
---
|
||||
> const inputType = element.getAttribute('type') || 'text';
|
||||
175c175
|
||||
< elementInfo.interactions.push(`input:${inputType}`);
|
||||
---
|
||||
> elementInfo.interactions.push(`input:${inputType}`);
|
||||
177c177
|
||||
< const placeholder = element.getAttribute('placeholder');
|
||||
---
|
||||
> const placeholder = element.getAttribute('placeholder');
|
||||
178c178
|
||||
< if (placeholder) {
|
||||
---
|
||||
> if (placeholder) {
|
||||
179c179
|
||||
< elementInfo.placeholder = placeholder;
|
||||
---
|
||||
> elementInfo.placeholder = placeholder;
|
||||
180c180
|
||||
< }
|
||||
---
|
||||
> }
|
||||
182c182
|
||||
< }
|
||||
---
|
||||
> }
|
||||
183c183
|
||||
< if (isScrollable(element)) {
|
||||
---
|
||||
> if (isScrollable(element)) {
|
||||
184c184
|
||||
< elementInfo.interactions.push('scroll');
|
||||
---
|
||||
> elementInfo.interactions.push('scroll');
|
||||
186c186
|
||||
< }
|
||||
---
|
||||
> }
|
||||
188c188
|
||||
< if (element.tagName === 'IMG') {
|
||||
---
|
||||
> if (element.tagName === 'IMG') {
|
||||
189c189
|
||||
< elementInfo.src = element.src;
|
||||
---
|
||||
> elementInfo.src = element.src;
|
||||
190c190
|
||||
< elementInfo.alt = element.alt;
|
||||
---
|
||||
> elementInfo.alt = element.alt;
|
||||
192c192
|
||||
< }
|
||||
---
|
||||
> }
|
||||
194c194
|
||||
< elementInfo.children = Array.from(element.children)
|
||||
---
|
||||
> elementInfo.children = Array.from(element.children)
|
||||
195c195
|
||||
< .map(child => processElements(child))
|
||||
---
|
||||
> .map(child => processElements(child))
|
||||
196c196
|
||||
< .flat()
|
||||
---
|
||||
> .flat()
|
||||
197c197
|
||||
< .filter(child => child !== null);
|
||||
---
|
||||
> .filter(child => child !== null);
|
||||
199c199
|
||||
< return elementInfo;
|
||||
---
|
||||
> return elementInfo;
|
||||
27
tools/itb/js/dom_analyzer.js.rej
Normal file
27
tools/itb/js/dom_analyzer.js.rej
Normal file
@@ -0,0 +1,27 @@
|
||||
*** /dev/null
|
||||
--- /dev/null
|
||||
***************
|
||||
*** 140
|
||||
- y: Math.round(isFixed ? rect.top : rect.top + window.pageYOffset),
|
||||
--- 140 -----
|
||||
+ y: Math.round(isFixed ? rect.top : rect.top + window.pageYOffset),
|
||||
***************
|
||||
*** 141
|
||||
- width: Math.round(rect.width),
|
||||
--- 141 -----
|
||||
+ width: Math.round(rect.width),
|
||||
***************
|
||||
*** 142
|
||||
- height: Math.round(rect.height),
|
||||
--- 142 -----
|
||||
+ height: Math.round(rect.height),
|
||||
***************
|
||||
*** 143
|
||||
- interactions: [],
|
||||
--- 143 -----
|
||||
+ interactions: [],
|
||||
***************
|
||||
*** 144
|
||||
- fixed: isFixed
|
||||
--- 144 -----
|
||||
+ fixed: isFixed
|
||||
Reference in New Issue
Block a user