diff --git a/BetterDiscordApp/src/modules/devMode.js b/BetterDiscordApp/src/modules/devMode.js index db8a4c9..1118d63 100644 --- a/BetterDiscordApp/src/modules/devMode.js +++ b/BetterDiscordApp/src/modules/devMode.js @@ -1,6 +1,7 @@ import {settingsCookie} from "../0globals"; import BDV2 from "./v2"; import DOM from "./domtools"; +import Utils from "./utils"; export default new class DevMode { constructor() { @@ -51,24 +52,36 @@ export default new class DevMode { const selector = this.getSelector(e.target); let [ - classNameLayer, + classLayer, classItems ] = [ - BDModules.get((e) => e.layer && typeof e.layer === "string" && e.disabledPointerEvents)[0].layer, - BDModules.get((e) => e.contextMenu)[0], + BDModules.get((e) => e.layer && typeof e.layer === "string" && e.disabledPointerEvents)[0], + BDModules.get((e) => e.menu)[0] ] function attach() { - let cm = DOM.query("."+classItems.contextMenu.split(" ")[0]); + if(!classItems || !classLayer.layer)return console.log(classItems, classLayer.layer) + + let cm = DOM.query("."+Utils.removeDa(classItems.menu)); if (!cm) { - const container = DOM.query("#app-mount"); - const cmWrap = DOM.createElement(`
`); - cm = DOM.createElement(`
`); + const container = DOM.query("#app-mount > ."+Utils.removeDa(classLayer.layerContainer)); + const cmWrap = DOM.createElement(`
`); + cm = DOM.createElement(`
`); cmWrap.append(cm); container.append(cmWrap); cmWrap.style.top = e.clientY + "px"; cmWrap.style.left = e.clientX + "px"; - cmWrap.style.zIndex = "1002"; + 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(`
`) + const scroller = DOM.createElement(`
`) + scrollerWrap.append(scroller) + cm.append(scrollerWrap) + const removeCM = function(e) { if (e.keyCode && e.keyCode !== 27) return; cmWrap.remove(); @@ -80,17 +93,33 @@ export default new class DevMode { document.addEventListener("contextmenu", removeCM); document.addEventListener("keyup", removeCM); } - const cmWrap = DOM.query("."+classNameLayer.split(" ")[0]) - - const cmg = DOM.createElement(`
`); - const cmi = DOM.createElement(`
`); + const cmWrap = cm.parentElement + + const scroller = cm.childNodes[0].childNodes[0] + const cmg = DOM.createElement(`
`); + /** + * @type {HTMLElement} + */ + const cmi = DOM.createElement(``); cmi.append(DOM.createElement(`
Copy Selector
`)); cmi.addEventListener("click", () => { BDV2.NativeModule.copy(selector); - cm.style.display = "none"; + cmWrap.style.display = "none" }); + 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) + }) cmg.append(cmi); - cm.append(cmg); + if(scroller.childNodes.length){ // apend a separator + const separator = DOM.createElement(``) + scroller.append(separator) + } + scroller.append(cmg); if(cmWrap.clientHeight < cmWrap.scrollHeight){ console.log("overflowing "+cmWrap.style.top) cmWrap.style.top = (cmWrap.style.top - cmg.clientHeight) + "px";