2020-05-16 23:24:51 +02:00
|
|
|
import {settingsCookie} from "../0globals";
|
|
|
|
import BDV2 from "./v2";
|
|
|
|
import DOM from "./domtools";
|
2020-06-12 21:51:54 +02:00
|
|
|
import Utils from "./utils";
|
2020-05-16 23:24:51 +02:00
|
|
|
|
|
|
|
export default new class DevMode {
|
|
|
|
constructor() {
|
|
|
|
this.debugListener = this.debugListener.bind(this);
|
|
|
|
this.copySelectorListener = this.copySelectorListener.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
start() {
|
|
|
|
this.startDebugListener();
|
|
|
|
if (settingsCookie["fork-dm-1"]) this.startCopySelector();
|
|
|
|
}
|
|
|
|
|
|
|
|
stop() {
|
|
|
|
this.stopDebugListener();
|
|
|
|
this.stopCopySelector();
|
|
|
|
}
|
|
|
|
|
|
|
|
startDebugListener() {
|
|
|
|
this.stopDebugListener();
|
|
|
|
document.addEventListener("keydown", this.debugListener);
|
|
|
|
}
|
|
|
|
|
|
|
|
stopDebugListener() {
|
|
|
|
document.removeEventListener("keydown", this.debugListener);
|
|
|
|
}
|
|
|
|
|
|
|
|
startCopySelector() {
|
|
|
|
this.stopCopySelector();
|
|
|
|
document.addEventListener("contextmenu", this.copySelectorListener);
|
|
|
|
}
|
|
|
|
|
|
|
|
stopCopySelector() {
|
|
|
|
document.removeEventListener("contextmenu", this.copySelectorListener);
|
|
|
|
}
|
|
|
|
|
|
|
|
debugListener(e) {
|
|
|
|
if (e.which === 119 || e.which == 118) {//F8
|
|
|
|
console.log("%c[%cDevMode%c] %cBreak/Resume", "color: red;", "color: #303030; font-weight:700;", "color:red;", "");
|
|
|
|
debugger; // eslint-disable-line no-debugger
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
copySelectorListener(e) {
|
|
|
|
try{
|
|
|
|
e.stopPropagation();
|
|
|
|
const selector = this.getSelector(e.target);
|
|
|
|
|
|
|
|
let [
|
2020-06-12 21:51:54 +02:00
|
|
|
classLayer,
|
2020-05-16 23:24:51 +02:00
|
|
|
classItems
|
|
|
|
] = [
|
2020-06-12 21:51:54 +02:00
|
|
|
BDModules.get((e) => e.layer && typeof e.layer === "string" && e.disabledPointerEvents)[0],
|
|
|
|
BDModules.get((e) => e.menu)[0]
|
2020-05-16 23:24:51 +02:00
|
|
|
]
|
|
|
|
|
|
|
|
function attach() {
|
2020-06-12 21:51:54 +02:00
|
|
|
if(!classItems || !classLayer.layer)return console.log(classItems, classLayer.layer)
|
|
|
|
|
|
|
|
let cm = DOM.query("."+Utils.removeDa(classItems.menu));
|
2020-05-16 23:24:51 +02:00
|
|
|
if (!cm) {
|
2020-06-12 21:51:54 +02:00
|
|
|
const container = DOM.query("#app-mount > ."+Utils.removeDa(classLayer.layerContainer));
|
|
|
|
const cmWrap = DOM.createElement(`<div class="${classLayer.layer}">`);
|
|
|
|
cm = DOM.createElement(`<div class="${classItems.menu} ${classItems.styleFlexible} ${classItems.accommodateScrollbar} bd-context-menu" style=""></div>`);
|
2020-05-16 23:24:51 +02:00
|
|
|
cmWrap.append(cm);
|
|
|
|
container.append(cmWrap);
|
|
|
|
cmWrap.style.top = e.clientY + "px";
|
|
|
|
cmWrap.style.left = e.clientX + "px";
|
2020-06-12 21:51:54 +02:00
|
|
|
cmWrap.setAttribute("role", "menu")
|
|
|
|
cmWrap.setAttribute("tabindex", "-1")
|
|
|
|
cmWrap.id = "bd-copy-selector-context"
|
|
|
|
cmWrap.setAttribute("aria-label", "Copy Selector Actions")
|
|
|
|
|
|
|
|
const scrollerClasses = BDModules.get((e) => e.scrollerWrap)[0]
|
|
|
|
const scrollerWrap = DOM.createElement(`<div class="${scrollerClasses.scrollerWrap} ${scrollerClasses.scrollerThemed} ${scrollerClasses.themeGhostHairline}"></div>`)
|
|
|
|
const scroller = DOM.createElement(`<div class="${BDModules.get(e => e.scroller)[0].scroller} ${classItems.scroller}"></div>`)
|
|
|
|
scrollerWrap.append(scroller)
|
|
|
|
cm.append(scrollerWrap)
|
|
|
|
|
2020-05-16 23:24:51 +02:00
|
|
|
const removeCM = function(e) {
|
|
|
|
if (e.keyCode && e.keyCode !== 27) return;
|
|
|
|
cmWrap.remove();
|
|
|
|
document.removeEventListener("click", removeCM);
|
|
|
|
document.removeEventListener("contextmenu", removeCM);
|
|
|
|
document.removeEventListener("keyup", removeCM);
|
|
|
|
};
|
|
|
|
document.addEventListener("click", removeCM);
|
|
|
|
document.addEventListener("contextmenu", removeCM);
|
|
|
|
document.addEventListener("keyup", removeCM);
|
|
|
|
}
|
2020-06-12 21:51:54 +02:00
|
|
|
const cmWrap = cm.parentElement
|
|
|
|
|
|
|
|
const scroller = cm.childNodes[0].childNodes[0]
|
|
|
|
const cmg = DOM.createElement(`<div role="group"></div>`);
|
|
|
|
/**
|
|
|
|
* @type {HTMLElement}
|
|
|
|
*/
|
|
|
|
const cmi = DOM.createElement(`<div class="${classItems.item} ${classItems.labelContainer} ${classItems.colorDefault}" role="menuitem" id="bd-copy-selector-item-cm"></div>`);
|
2020-05-16 23:24:51 +02:00
|
|
|
cmi.append(DOM.createElement(`<div class="${classItems.label}">Copy Selector</div>`));
|
|
|
|
cmi.addEventListener("click", () => {
|
|
|
|
BDV2.NativeModule.copy(selector);
|
2020-06-12 21:51:54 +02:00
|
|
|
cmWrap.style.display = "none"
|
2020-05-16 23:24:51 +02:00
|
|
|
});
|
2020-06-12 21:51:54 +02:00
|
|
|
cmi.addEventListener("mouseover", (e) => {
|
|
|
|
let elements = DOM.queryAll("div[role=menuitem]."+Utils.removeDa(classItems.focused))
|
|
|
|
elements && elements.forEach(elem => elem.classList.remove(classItems.focused))
|
|
|
|
cmi.classList.add(classItems.focused)
|
|
|
|
})
|
|
|
|
cmi.addEventListener("mouseout", (e) => {
|
|
|
|
cmi.classList.remove(classItems.focused)
|
|
|
|
})
|
2020-05-16 23:24:51 +02:00
|
|
|
cmg.append(cmi);
|
2020-06-12 21:51:54 +02:00
|
|
|
if(scroller.childNodes.length){ // apend a separator
|
|
|
|
const separator = DOM.createElement(`<div role="separator" class="${classItems.separator}"></div>`)
|
|
|
|
scroller.append(separator)
|
|
|
|
}
|
|
|
|
scroller.append(cmg);
|
2020-05-16 23:24:51 +02:00
|
|
|
if(cmWrap.clientHeight < cmWrap.scrollHeight){
|
|
|
|
console.log("overflowing "+cmWrap.style.top)
|
|
|
|
cmWrap.style.top = (cmWrap.style.top - cmg.clientHeight) + "px";
|
|
|
|
console.log("overflowing"+cmWrap.style.top)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-18 20:34:26 +02:00
|
|
|
setTimeout(attach, 1);
|
2020-05-16 23:24:51 +02:00
|
|
|
}catch(e){
|
|
|
|
console.error(e)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getSelector(element) {
|
|
|
|
if (element.id) return `#${element.id}`;
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {HTMLElement} el
|
|
|
|
*/
|
|
|
|
function fullPath(el){
|
|
|
|
var names = [];
|
|
|
|
while (el.parentNode){
|
|
|
|
if (el.id){
|
|
|
|
names.unshift('#'+el.id);
|
|
|
|
break;
|
|
|
|
}else{
|
|
|
|
if (el==el.ownerDocument.documentElement) names.unshift(el.tagName.toLowerCase()+Array.from(el.classList.entries()).map(e => "."+e).join(""));
|
|
|
|
else{
|
|
|
|
for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
|
|
|
|
names.unshift(el.tagName.toLowerCase()+(el.className || "").split(" ").map(e => "."+e).join("")+":nth-child("+c+")");
|
|
|
|
}
|
|
|
|
el=el.parentNode;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return names.join(" > ");
|
|
|
|
}
|
|
|
|
return fullPath(element)
|
|
|
|
/*
|
|
|
|
const rules = this.getRules(element);
|
|
|
|
const latestRule = rules[rules.length - 1];
|
|
|
|
if (latestRule) return latestRule.selectorText;
|
|
|
|
else if (element.classList.length) return `.${Array.from(element.classList).join(".")}`;
|
|
|
|
return `.${Array.from(element.parentElement.classList).join(".")}`;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
getRules(element, css = element.ownerDocument.styleSheets) {
|
|
|
|
//if (window.getMatchedCSSRules) return window.getMatchedCSSRules(element);
|
|
|
|
const sheets = [...css].filter(s => !s.href || !s.href.includes("BetterDiscordApp"));
|
|
|
|
const rules = sheets.map(s => [...(s.cssRules || [])]).flat();
|
|
|
|
const elementRules = rules.filter(r => r && r.selectorText && element.matches(r.selectorText) && r.style.length && r.selectorText.split(", ").length < 8 && !r.selectorText.split(", ").includes("*"));
|
|
|
|
return elementRules;
|
|
|
|
}
|
|
|
|
};
|