Skip to content

perf: Mutation observation metrics #271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Mar 11, 2019
Merged

perf: Mutation observation metrics #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
02e9ece
Show mutation info in DevTools
matatk Feb 15, 2019
d25e914
Show mutation info in DevTools in a definition list
matatk Feb 15, 2019
3da110c
Provide a callback to pauseHandler to update the DevTools GUI
matatk Feb 15, 2019
680a486
Rename the mutations message; remove one debug logging statement
matatk Feb 15, 2019
04a2bb2
DevTools requests mutation and pause info when it opens
matatk Feb 15, 2019
3638f2c
Mutation info counters should be reset when a refresh is triggered
matatk Feb 15, 2019
f9414af
Remove Logger
matatk Feb 15, 2019
961cdb1
Only send mutation messages when DevTools panel is open
matatk Feb 21, 2019
7f57d12
Factor out MutationStatsReporter
matatk Feb 22, 2019
2ec18ac
Remove console logging
matatk Feb 22, 2019
4e707d6
Content script getting DevTools state; Test page
matatk Feb 22, 2019
973eaf9
Cancel scheduled task if possible; Logging; Typo
matatk Feb 22, 2019
46ab8be
Revert to previous PauseHandler behaviour; Re-write MSR for consistency
matatk Feb 22, 2019
766f73a
More logging
matatk Feb 23, 2019
1469567
Style the mutation observation station
matatk Mar 5, 2019
a7169d4
DRY build script
matatk Mar 7, 2019
ecbda8b
Ensure all scans and mutation-scans are counted
matatk Mar 7, 2019
352f770
Ensure whole number durations on Chrome
matatk Mar 7, 2019
5e7cc17
Ensure that the DevTools reload warning looks good in landscape
matatk Mar 7, 2019
696fd9c
Localise the mutation info display
matatk Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 27 additions & 14 deletions scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,17 +244,29 @@ async function flattenCode(browser) {
}


function removeUIstuff(htmlFile) {
function removeStuff(name, string, file) {
const re = `<!-- ${string} -->[\\s\\S]*?<!-- \\/${string} -->\\s*`
doReplace(
htmlFile,
/<!-- ui -->[\s\S]*?<!-- \/ui -->\s*/g,
file,
new RegExp(re, 'g'),
'',
'Removed UI stuff')
`Removed ${name} stuff`)
}


function removeUIstuff(file) {
removeStuff('UI', 'ui', file)
}


function removeDevToolsStuff(file) {
removeStuff('DevTools', 'devtools', file)
}


function copyStaticFiles(browser) {
logStep('Copying static files')

fse.copySync(srcStaticDir, pathToBuild(browser))
fs.unlinkSync(path.join(pathToBuild(browser), '.eslintrc.json'))

Expand All @@ -268,36 +280,33 @@ function copyStaticFiles(browser) {
function copyGuiFiles(browser) {
logStep('Copying root GUI HTML to create the popup and other bits')

function copyOneGuiFile(destination, doRemoveUIstuff) {
function copyOneGuiFile(destination, doUIRemove, doDevToolsRemove) {
const destHtml = path.join(pathToBuild(browser), `${destination}.html`)

fs.copyFileSync(path.join(srcAssembleDir, 'gui.html'), destHtml)

doReplace(
destHtml,
'GUIJS',
`${destination}.js`,
`Included ${destination} code`)

if (doRemoveUIstuff) {
removeUIstuff(destHtml)
}
if (doUIRemove) removeUIstuff(destHtml)
if (doDevToolsRemove) removeDevToolsStuff(destHtml)
}

copyOneGuiFile('popup', true)
copyOneGuiFile('popup', true, true)

if (browser === 'firefox' || browser === 'opera') {
copyOneGuiFile('sidebarPanel', false)
copyOneGuiFile('sidebarPanel', false, true)
}

if (browser === 'firefox' || browser === 'chrome' || browser === 'opera') {
copyOneGuiFile('devtoolsPanel', true)
copyOneGuiFile('devtoolsPanel', true, false)
}
}


function mergeMessages(browser) {
logStep('Merging messages JSON files')

const common = path.join(srcAssembleDir, 'messages.common.json')
const destinationDir = path.join(pathToBuild(browser), localeSubPath)
const destinationFile = path.join(pathToBuild(browser), messagesSubPath)
Expand All @@ -323,6 +332,7 @@ function mergeMessages(browser) {

function mergeManifest(browser) {
logStep('Merging manifest.json')

const common = path.join('..', srcAssembleDir, 'manifest.common.json')
const extra = path.join('..', srcAssembleDir, `manifest.${browser}.json`)
const commonJson = require(common)
Expand Down Expand Up @@ -399,6 +409,7 @@ function checkMessages(browser) {
// Get PNG files from the cache (which will generate them if needed)
function getPngs(converter, browser) {
logStep('Generating/copying in PNG files')

browserPngSizes[browser].forEach((size) => {
const pngPath = converter.getPngPath(size)
const basename = path.basename(pngPath)
Expand All @@ -409,6 +420,7 @@ function getPngs(converter, browser) {

function renameTestVersion(browser) {
logStep('Changing test version name in messages.json')

doReplace(
path.join(pathToBuild(browser), '**', 'messages.json'),
/"Landmark(s| Navigation via Keyboard or Pop-up)"/g,
Expand All @@ -425,6 +437,7 @@ function zipFileName(browser) {

async function makeZip(browser) {
logStep('Createing ZIP file')

const outputFileName = zipFileName(browser)
const archive = archiver(outputFileName)

Expand Down
37 changes: 36 additions & 1 deletion src/assemble/gui.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
<!-- ui -->
<link rel="stylesheet" href="sidebar.css">
<!-- /ui -->
</head>
<!-- devtools -->
<link rel="stylesheet" href="devtools.css">
<!-- /devtools -->
</head> <!-- FIXME: this gets aligned wrongly after the replace -->
<body>
<div id="content">
<h1 data-message="popupHeading"></h1>
Expand All @@ -20,6 +23,38 @@ <h1 data-message="popupHeading"></h1>
<button id="help" data-message="popupHelpButton" class="browser-style"></button>
<button id="settings" data-message="popupPreferencesButton" class="browser-style"></button>
</div>
<div id="mutation-observation-station"> <!-- only in DevTools -->
<details>
<summary><h1 data-message="statsHeading"></h1></summary>
<dl>
<dt><details>
<summary data-message="statsMutationsTerm"></summary>
<p data-message="statsMutationsDefinition"></p>
</details></dt>
<dd id="mutations">0</dd>
<dt><details>
<summary data-message="statsCheckedMutationsTerm"></summary>
<p data-message="statsCheckedMutationsDefinition"></p>
</details></dt>
<dd id="checks">0</dd>
<dt><details>
<summary data-message="statsScansTerm"></summary>
<p data-message="statsScansDefinition"></p>
</details></dt>
<dd id="scans">0</dd>
<dt><details>
<summary data-message="statsPauseTerm"></summary>
<p data-message="statsPauseDefinition"></p>
</details></dt>
<dd id="pause">&mdash;</dd>
<dt><details>
<summary data-message="statsDurationTerm"></summary>
<p data-message="statsDurationDefinition"></p>
</details></dt>
<dd id="duration">&mdash;</dd>
</dl>
</details>
</div>
<script src="GUIJS"></script>
</body>
</html>
46 changes: 45 additions & 1 deletion src/assemble/messages.common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,50 @@
},

"devToolsConnectionError": {
"message": "This DevTools frame has become disconnected, probably due to reloading the extension. You'll need to reload this frame for it to recieve landmark updates again."
"message": "Warning: This DevTools frame has become disconnected, probably due to the extension being reloaded. You'll need to reload this frame (e.g. via its context menu) for it to recieve updates again."
},

"statsHeading": {
"message": "Mutation information"
},

"statsMutationsTerm": {
"message": "Mutations:"
},

"statsMutationsDefinition": {
"message": "Total number of changes to the page."
},

"statsCheckedMutationsTerm": {
"message": "Checked Mutations:"
},

"statsCheckedMutationsDefinition": {
"message": "Mutations that Landmarks has tested to see if they are relevant."
},

"statsScansTerm": {
"message": "Scans:"
},

"statsScansDefinition": {
"message": "Number of times the page has been scanned for landmarks."
},

"statsPauseTerm": {
"message": "Pause time:"
},

"statsPauseDefinition": {
"message": "Time during which subsequent changes to the page will be ignored."
},

"statsDurationTerm": {
"message": "Last scan took:"
},

"statsDurationDefinition": {
"message": "Number of milliseconds the last landmark scan took."
}
}
24 changes: 23 additions & 1 deletion src/code/_background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,20 @@ if (BROWSER === 'firefox' || BROWSER === 'chrome' || BROWSER === 'opera') {
case 'init':
devtoolsConnections[message.tabId] = port
port.onDisconnect.addListener(function() {
browser.tabs.get(message.tabId, function(tab) {
if (isContentScriptablePage(tab.url)) {
sendDevToolsStateMessage(tab.id, false)
}
})
delete devtoolsConnections[message.tabId]
})
sendDevToolsStateMessage(message.tabId, true)
break
case 'get-landmarks':
case 'get-toggle-state':
case 'focus-landmark':
case 'toggle-all-landmarks':
case 'get-mutation-info':
// The DevTools panel can't check if it's on a scriptable
// page, so we do that here. Other GUIs check themselves.
browser.tabs.get(message.from, function(tab) {
Expand Down Expand Up @@ -85,6 +92,14 @@ if (BROWSER === 'firefox' || BROWSER === 'chrome' || BROWSER === 'opera') {
})
}

// TODO this will be neater when Edge support is removed
function sendDevToolsStateMessage(tabId, panelIsOpen) {
browser.tabs.sendMessage(tabId, {
name: 'devtools-state',
state: panelIsOpen ? 'open' : 'closed'
})
}


if (BROWSER === 'firefox' || BROWSER === 'opera') {
//
Expand Down Expand Up @@ -287,6 +302,10 @@ browser.runtime.onMessage.addListener(function(message, sender) {
})
sendToDevToolsForTab(sender.tab.id, message)
break
case 'get-devtools-state':
sendDevToolsStateMessage(sender.tab.id,
devtoolsConnections.hasOwnProperty(sender.tab.id))
break
// Splash
case 'get-commands':
browser.commands.getAll(function(commands) {
Expand All @@ -312,10 +331,13 @@ browser.runtime.onMessage.addListener(function(message, sender) {
case 'open-settings':
browser.runtime.openOptionsPage()
break
// Messages DevTools panel needs to know
// Messages that need to be passed through to DevTools only
case 'toggle-state-is':
browser.tabs.query({ active: true, currentWindow: true }, tabs => {
sendToDevToolsForTab(tabs[0].id, message)
})
break
case 'mutation-info':
sendToDevToolsForTab(sender.tab.id, message)
}
})
Loading