mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1498185 - Implement the type and action columns in the new about:performance, r=felipe.

This commit is contained in:
Florian Quèze 2018-10-17 14:12:16 +02:00
Родитель fb38153bda
Коммит f953b97c5e
4 изменённых файлов: 116 добавлений и 16 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

71
toolkit/components/aboutperformance/content/aboutPerformance.js
Просмотреть файл

@ -614,6 +614,7 @@ var State = {
let prev = previous[id];
let host = tab.host;
let type = "tab";
let name = `${host} (${id})`;
let image = "chrome://mozapps/skin/places/defaultFavicon.svg";
let found = tabFinder.get(parseInt(id));
@ -623,16 +624,20 @@ var State = {
image = found.tab.getAttribute("image");
} else {
name = "Preloaded: " + found.tab.linkedBrowser.contentTitle;
type = "other";
}
} else if (id == 1) {
name = BRAND_NAME;
image = "chrome://branding/content/icon32.png";
type = "browser";
} else if (/^[a-f0-9]{8}(-[a-f0-9]{4}){3}-[a-f0-9]{12}$/.test(host)) {
let addon = WebExtensionPolicy.getByHostname(host);
name = `${addon.name} (${addon.id})`;
image = "chrome://mozapps/skin/extensions/extensionGeneric-16.svg";
type = "addon";
} else if (id == 0 && !tab.isWorker) {
name = "Ghost windows";
type = "other";
}
// Create a map of all the child items from the previous time we read the
@ -691,7 +696,7 @@ var State = {
durationSinceStartOfBuffer =
duration - oldest.duration - (oldest.durationFromFormerChildren || 0);
}
return ({id, name, image,
return ({id, name, image, type,
totalDispatches: dispatches, totalDuration: duration,
durationSincePrevious, dispatchesSincePrevious,
durationSinceStartOfBuffer, dispatchesSinceStartOfBuffer,
@ -1000,17 +1005,24 @@ var View = {
row.parentNode.insertBefore(this._fragment, row.nextSibling);
this._fragment = document.createDocumentFragment();
},
appendRow(name, value, tooltip, classes, image = "") {
appendRow(name, value, tooltip, type, image = "") {
let row = document.createElement("tr");
let elt = document.createElement("td");
elt.textContent = name;
if (image)
elt.style.backgroundImage = `url('${image}')`;
if (classes)
elt.classList.add(...classes);
if (!classes || !classes.includes("indent"))
if (["subframe", "tracker", "worker"].includes(type))
elt.classList.add("indent");
else
elt.classList.add("root");
if (["tracker", "worker"].includes(type))
elt.classList.add(type);
row.appendChild(elt);
elt = document.createElement("td");
elt.textContent = type;
row.appendChild(elt);
elt = document.createElement("td");
@ -1020,6 +1032,20 @@ var View = {
if (tooltip)
row.title = tooltip;
elt = document.createElement("td");
if (type == "tab") {
let img = document.createElement("img");
img.className = "action-icon close-icon";
img.title = "Close tab";
elt.appendChild(img);
} else if (type == "addon") {
let img = document.createElement("img");
img.className = "action-icon addon-icon";
img.title = "Show in add-on manager";
elt.appendChild(img);
}
row.appendChild(elt);
this._fragment.appendChild(row);
return row;
},
@ -1049,6 +1075,29 @@ var Control = {
return;
}
// Handle closing a tab.
if (target.classList.contains("close-icon")) {
let row = target.parentNode.parentNode;
let id = parseInt(row.windowId);
let found = tabFinder.get(id);
if (!found || !found.tabbrowser)
return;
let {tabbrowser, tab} = found;
tabbrowser.removeTab(tab);
while (row.nextSibling.firstChild.classList.contains("indent"))
row.nextSibling.remove();
row.remove();
return;
}
if (target.classList.contains("addon-icon")) {
let row = target.parentNode.parentNode;
let id = row.windowId;
let parentWin = window.docShell.rootTreeItem.domWindow;
parentWin.BrowserOpenAddonsMgr("addons://detail/" + encodeURIComponent(id));
return;
}
// Handle selection changes
let row = target.parentNode;
if (this.selectedRow) {
@ -1110,14 +1159,14 @@ var Control = {
this._openItems = new Set();
let counters = this._sortCounters(State.getCounters());
for (let {id, name, image, totalDispatches, dispatchesSincePrevious,
for (let {id, name, image, type, totalDispatches, dispatchesSincePrevious,
totalDuration, durationSincePrevious, children} of counters) {
let row =
View.appendRow(name,
this._formatEnergyImpact(dispatchesSincePrevious, durationSincePrevious),
this._formatTooltip(totalDispatches, totalDuration,
dispatchesSincePrevious, durationSincePrevious),
null, image);
type, image);
row.windowId = id;
if (id == selectedId) {
row.setAttribute("selected", "true");
@ -1155,18 +1204,18 @@ var Control = {
children.sort((a, b) => b.dispatchesSincePrevious - a.dispatchesSincePrevious);
for (let row of children) {
let host = row.host.replace(/^blob:https?:\/\//, "");
let classes = ["indent"];
let type = "subframe";
if (State.isTracker(host))
classes.push("tracking");
type = "tracker";
if (row.isWorker)
classes.push("worker");
type = "worker";
View.appendRow(row.host,
this._formatEnergyImpact(row.dispatchesSincePrevious,
row.durationSincePrevious),
this._formatTooltip(row.dispatchCount, row.duration,
row.dispatchesSincePrevious,
row.durationSincePrevious),
classes);
type);
}
},
_computeEnergyImpact(dispatches, duration) {

56
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
Просмотреть файл

@ -135,7 +135,51 @@
width: 100%;
}
#dispatch-table td:nth-child(2) {
width: 10em;
width: 8em;
}
#dispatch-table td:nth-child(3) {
width: 12em;
}
#dispatch-table td:nth-child(4) {
width: 20px;
}
/* Show action icons on selected or hovered rows */
tr:-moz-any([selected], :hover) > td > .action-icon {
padding: 1px 10px;
-moz-context-properties: fill, fill-opacity;
fill-opacity: 0;
background-repeat: no-repeat;
background-position: center;
fill: currentColor;
}
.addon-icon {
background-image: url("chrome://global/skin/icons/shortcut.svg");
background-size: 16px;
}
.close-icon {
background-image: url("chrome://global/skin/icons/close.svg");
background-size: 24px;
}
.action-icon {
position: relative;
}
/* action icon background */
.action-icon::before {
background-color: currentColor;
opacity: 0;
height: 200%;
position: absolute;
top: -50%;
left: -3px;
padding-left: 13px;
padding-right: 13px;
}
.action-icon:hover::before {
opacity: 0.1;
}
.action-icon:hover:active::before {
opacity: 0.2;
}
#dispatch-table > tbody {
@ -157,11 +201,11 @@
min-height: 2em;
color: var(--in-content-text-color);
max-width: 70vw;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#dispatch-tbody > tr > td:first-child {
text-overflow: ellipsis;
padding-inline-start: 32px;
background-repeat: no-repeat;
background-size: 16px 16px;
@ -188,13 +232,13 @@
padding-inline-start: 88px;
background-position: 62px;
}
#dispatch-tbody > tr > td.tracking {
background-image: url(chrome://browser/skin/controlcenter/trackers.svg);
#dispatch-tbody > tr > td.tracker {
background-image: url("chrome://browser/skin/controlcenter/trackers.svg");
-moz-context-properties: fill;
fill: rgb(224, 41, 29);
}
#dispatch-tbody > tr > td.worker {
background-image: url(chrome://devtools/skin/images/debugging-workers.svg);
background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
-moz-context-properties: fill;
fill: #808080;
}
@ -239,7 +283,9 @@
<thead id="dispatch-thead">
<tr>
<td>Name</td>
<td>Type</td>
<td>Energy Impact</td>
<td></td><!-- actions -->
</tr>
</thead>
<tbody id="dispatch-tbody"></tbody>

4
toolkit/themes/shared/icons/shortcut.svg Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" d="M11 2H5a1 1 0 0 0 0 2h3.59L6.05 6.54a7 7 0 0 0-2 5V13a1 1 0 0 0 2 0v-1.51A5 5 0 0 1 7.46 8L10 5.41V9a1 1 0 0 0 2 0V3a1 1 0 0 0-1-1z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 442 B

1
toolkit/themes/shared/jar.inc.mn
Просмотреть файл

@ -40,6 +40,7 @@ toolkit.jar:
skin/classic/global/icons/loading.png (../../shared/icons/loading.png)
skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png)
skin/classic/global/icons/resizer.svg (../../shared/icons/resizer.svg)
skin/classic/global/icons/shortcut.svg (../../shared/icons/shortcut.svg)
skin/classic/global/icons/spinner-arrow-down.svg (../../shared/icons/spinner-arrow-down.svg)
skin/classic/global/icons/spinner-arrow-up.svg (../../shared/icons/spinner-arrow-up.svg)
skin/classic/global/icons/twisty-collapsed.svg (../../shared/icons/twisty-collapsed.svg)