gebrkn / copytables

Chrome extension to select and copy table cells.
MIT License
130 stars 30 forks source link

github: "Sorry, Copytables was unable to copy this table." and copied to clipboard in wrong format #13

Open cpatulea opened 4 years ago

cpatulea commented 4 years ago

https://github.com/twhitehead/notes-obd2elm327edb#extended-pids

trying to copy the table: PID#-b* | ACRONYM | DESCRIPTION | UNITS

with Copytables 0.5.9

able to select the table, Infobox appears,

right-click > Table... > Select Table table becomes blue

right-click > Table > Copy... > CSV

now Devtools console has: content.js:1 Sorry, Copytables was unable to copy this table. endCopyFailed @ content.js:1 (anonymous) @ content.js:1

but there is some data on clipboard, but wrong format:

PID#-b* ACRONYM DESCRIPTION UNITS 1104-b1 ARC Automatic Ride Control ON/OFF 1101-b0 ACCS Air Conditioning Cycling Switch ON/OFF 1102-b0 ACP A/C Head Pressure Sensor (Fan Ctrl OPEN/CLOSED ...

cpatulea commented 4 years ago

breakpoint in background page 'function copyCommand':

function o(e, t) {
    function n(t) {
        if (t.data)
            return o = d.exec(e, t.data),
            !0
    }
    var r = {
        name: "beginCopy",
        broadcast: !t,
        options: d.options(e)
    }
      , o = !0;
    t ? u.frame(r, t).then(function(e) {
        n(e),
        u.frame(o ? "endCopy" : "endCopyFailed", t)
    }) : u.allFrames(r).then(function(e) {
        e.some(n),
        u.allFrames(o ? "endCopy" : "endCopyFailed")
    })
}

Scope:

Local e: {receiver: {…}, data: {…}} this: Window Closure (o) e: "textCSV" n: ƒ n(t) o: false t: {tabId: 1362, frameId: 0} Closure a: ƒ a(e,t) d: {formats: {…}, options: ƒ, exec: ƒ} f: {numeric: ƒ, toArray: ƒ, flatten: ƒ, first: ƒ, intersect: ƒ, …} i: ƒ i(e) l: {load: ƒ, save: ƒ, setAll: ƒ, set: ƒ, val: ƒ, …} o: ƒ o(e,t) r: ƒ r(e,t) s: {updateUI: ƒ, setBadge: ƒ, updateBadge: ƒ, enumTables: ƒ, findTable: ƒ} u: {enumFrames: ƒ, background: ƒ, frame: ƒ, allFrames: ƒ, topFrame: ƒ, …} Window Global

cpatulea commented 4 years ago

M.table.prototype.initTable returns false

but it is very difficult to track down which step, due to minification

cpatulea commented 4 years ago

at this time, background page DOM contains:

cpatulea commented 4 years ago

and iframe:

cpatulea commented 4 years ago

console: 00:49:39.845 this.div 00:49:39.854 <div contenteditable=​"true">​

​ 00:49:46.169 this.div.focus() 00:49:46.179 undefined

cpatulea commented 4 years ago

fresh run, to be sure:

p.content() 00:55:59.550 ""

so I think there is some fault in copying data from target page to background page

cpatulea commented 4 years ago

ah, here is content of background page dom after this.div.innerHTML = clipboard.content();,

at this point in time: r.copyText (background.js:formatted:1578) u.table.initTable (background.js:formatted:1219) u.table.init (background.js:formatted:1213) c.exec (background.js:formatted:1073) n (background.js:formatted:850) (anonymous) (background.js:formatted:860) Promise.then (async) o (background.js:formatted:859) c.exec (background.js:formatted:895) (anonymous) (background.js:formatted:32)

<html><head></head><body><base href="https://github.com/twhitehead/notes-obd2elm327edb#extended-pids"><style type="text/css">td { min-width: 1px; }</style><div contenteditable="true"><meta charset="utf-8"><br class="Apple-interchange-newline">PID#-b*ACRONYMDESCRIPTIONUNITS1104-b1ARCAutomatic Ride ControlON/OFF1101-b0ACCSAir Conditioning Cycling SwitchON/OFF1102-b0ACPA/C Head Pressure Sensor (Fan CtrlOPEN/CLOSED1101-b1BOOBrake On/Off SwitchON/OFF1128CAT TST1Catalyst #1 Test FrequencyHz1129CAT TST2Catalyst #2 Test FrequencyHz0200DTC CNTContinuous Code CounterUnitless114EDPFEGRDifferential Pressure Feedback EGRVOLTS114DECTVEngine Coolant TemperatureVOLTS1139ECTEngine Coolant TemperatureDEG11C0EPCElectronic Pressure ControlPSI113CEGRVREGR Vacuum RegulatorPercent ON110EFPAFuel Pump ControlON/OFF110C-b0FPMFuel Pump MonitorON/OFF/%1141FUEL PW1Fuel Injector Pulse Width for Bank ... lockup modeON/OFF1169TPCTClosed Throttle PositionVOLTS0100TRIP CNTNumber of completed OBD-II trips<br class="Apple-interchange-newline"></div></body></html>
cpatulea commented 4 years ago

ah, right, this line fails:

this.table = dom.findOne('table', this.div);

because there is no <table> in the pasted

cpatulea commented 4 years ago

on a different URL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus), I am able to successfully copy a table and here is the div content:

<div contenteditable="true"><meta charset="utf-8"><table class="standard-table" style="user-select: auto !important; margin: 0px 0px 24px; padding: 0px; border: 2px solid rgb(255, 255, 255); box-sizing: border-box; width: 893.636px; max-width: 100%; border-collapse: collapse; color: rgb(51, 51, 51); font-family: Arial, x-locale-body, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: -0.04448px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><thead style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><th scope="col" data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); border-image: initial; font-style: inherit; font-weight: 700; text-align: left; background: rgba(212, 221, 228, 0.5); font-family: x-locale-heading-primary, zillaslab, Palatino, &quot;Palatino Linotype&quot;, x-locale-heading-secondary, serif;">Specification</th><th scope="col" data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); border-image: initial; font-style: inherit; font-weight: 700; text-align: left; background: rgba(212, 221, 228, 0.5); font-family: x-locale-heading-primary, zillaslab, Palatino, &quot;Palatino Linotype&quot;, x-locale-heading-secondary, serif;">Status</th><th scope="col" data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); border-image: initial; font-style: inherit; font-weight: 700; text-align: left; background: rgba(212, 221, 228, 0.5); font-family: x-locale-heading-primary, zillaslab, Palatino, &quot;Palatino Linotype&quot;, x-locale-heading-secondary, serif;">Comment</th></tr></thead><tbody style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><a class="external" href="https://html.spec.whatwg.org/multipage/editing.html#dom-focus" hreflang="en" lang="en" rel="noopener" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;">HTML Living Standard<br style="user-select: auto !important;"><small lang="en-US" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">The definition of 'focus' in that specification.</small></a></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><span class="spec-Living" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 83, 159);">Living Standard</span></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"></td></tr><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><a class="external" href="https://www.w3.org/TR/html51/editing.html#focus()-0" hreflang="en" lang="en" rel="noopener" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;">HTML 5.1<br style="user-select: auto !important;"><small lang="en-US" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">The definition of 'focus' in that specification.</small></a></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><span class="spec-REC" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(48, 156, 64); hyphens: auto;">Recommendation</span></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"></td></tr><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><a class="external" href="https://www.w3.org/TR/html52/editing.html#dom-focus" hreflang="en" lang="en" rel="noopener" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;">HTML5<br style="user-select: auto !important;"><small lang="en-US" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">The definition of 'focus' in that specification.</small></a></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><span class="spec-REC" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(48, 156, 64); hyphens: auto;">Recommendation</span></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"></td></tr><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><a class="external" href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32130014" hreflang="en" lang="en" rel="noopener" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;">Document Object Model (DOM) Level 2 HTML Specification<br style="user-select: auto !important;"><small lang="en-US" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">The definition of 'focus' in that specification.</small></a></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><span class="spec-Obsolete" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">Obsolete</span></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.15); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"></td></tr><tr style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;"><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#method-focus" hreflang="en" lang="en" rel="noopener" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;">Document Object Model (DOM) Level 1 Specification<br style="user-select: auto !important;"><small lang="en-US" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">The definition of 'focus' in that specification.</small></a></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"><span class="spec-Obsolete" style="user-select: auto !important; margin: 0px; padding: 0px; border: 0px;">Obsolete</span></td><td data-copytables-selected="1" data-copytables-locked="1" style="user-select: auto !important; margin: 0px; padding: 6px 8px; border: 2px solid rgb(255, 255, 255); text-align: left; background-color: rgba(212, 221, 228, 0.25); box-shadow: rgba(212, 221, 228, 0.5) 0px -1px 0px 0px inset;"></td></tr></tbody></table><br class="Apple-interchange-newline"></div>
cpatulea commented 4 years ago

tried forcing " user-select: auto !important; " style on github table, still no good

cpatulea commented 4 years ago

try to copy a smaller table on the same page (first table), still doesn't work

cpatulea commented 4 years ago

it appears that without this github css, it is newly possible to copy: https://github.githubassets.com/assets/site-6759774625dbbf1de2535e444af07d7c.css

there are many references to user-select in it

cpatulea commented 4 years ago

commented out all the 'user-select' styles, still no work

cpatulea commented 4 years ago

the problem appears to be this style:

.markdown-body table {
    display: block;
}

tables with display:block are incorrectly copied to the clipboard

cpatulea commented 4 years ago

workaround for users:

right-click on table > inspect element > edit <table> > add style="display:table" > now Copytables works