Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-22 10:27:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1896652 - [devtools] Fix layout glitch in storage table and variable view. r=devtools-reviewers,ochameau.

Browse Source 
The plain class that was removed in Bug 1896330 was set
on a few elements in the variable view, the table and
the chart widgets, as well as in the inspector breadcrumb.
This patch removes the plain class and adjust styling
where it's needed.

Differential Revision: https://phabricator.services.mozilla.com/D210316
This commit is contained in:
Nicolas Chevobbe 2024-05-15 15:56:15 +00:00
parent d000b70f42
commit 5f747ddda4
5 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
devtools/client/inspector/breadcrumbs.js
View File

@ -469,16 +469,16 @@ HTMLBreadcrumbs.prototype = {
*/
prettyPrintNodeAsXHTML(node) {
const tagLabel = this.doc.createElementNS(NS_XHTML, "span");
tagLabel.className = "breadcrumbs-widget-item-tag plain";
tagLabel.className = "breadcrumbs-widget-item-tag";
const idLabel = this.doc.createElementNS(NS_XHTML, "span");
idLabel.className = "breadcrumbs-widget-item-id plain";
idLabel.className = "breadcrumbs-widget-item-id";
const classesLabel = this.doc.createElementNS(NS_XHTML, "span");
classesLabel.className = "breadcrumbs-widget-item-classes plain";
classesLabel.className = "breadcrumbs-widget-item-classes";
const pseudosLabel = this.doc.createElementNS(NS_XHTML, "span");
pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes plain";
pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes";
let tagText = node.isShadowRoot ? SHADOW_ROOT_TAGNAME : node.displayName;
if (node.isMarkerPseudoElement) {

10
devtools/client/shared/widgets/Chart.js vendored
View File

@ -422,12 +422,12 @@ function createTableChart(document, { title, data, strings, totals, header }) {
const proxy = new TableChart(container);
const titleNode = document.createElement("span");
titleNode.className = "plain table-chart-title";
titleNode.className = "table-chart-title";
titleNode.textContent = title;
container.appendChild(titleNode);
const tableNode = document.createElement("table");
tableNode.className = "plain table-chart-grid";
tableNode.className = "table-chart-grid";
container.appendChild(tableNode);
const headerNode = document.createElement("thead");
@ -441,7 +441,7 @@ function createTableChart(document, { title, data, strings, totals, header }) {
for (const [key, value] of Object.entries(header)) {
const headerLabelNode = document.createElement("th");
headerLabelNode.className = "plain table-chart-row-label";
headerLabelNode.className = "table-chart-row-label";
headerLabelNode.setAttribute("name", key);
headerLabelNode.textContent = value;
if (key == "count") {
@ -466,7 +466,7 @@ function createTableChart(document, { title, data, strings, totals, header }) {
const index = data.indexOf(rowInfo);
const stringified = strings[key] ? strings[key](value, index) : value;
const labelNode = document.createElement("td");
labelNode.className = "plain table-chart-row-label";
labelNode.className = "table-chart-row-label";
labelNode.setAttribute("name", key);
labelNode.textContent = stringified;
rowNode.appendChild(labelNode);
@ -484,7 +484,7 @@ function createTableChart(document, { title, data, strings, totals, header }) {
const total = data.reduce((acc, e) => acc + e[key], 0);
const stringified = value ? value(total || 0) : total;
const labelNode = document.createElement("span");
labelNode.className = "plain table-chart-summary-label";
labelNode.className = "table-chart-summary-label";
labelNode.setAttribute("name", key);
labelNode.textContent = stringified;
totalsNode.appendChild(labelNode);

4
devtools/client/shared/widgets/TableWidget.js
View File

@ -108,7 +108,7 @@ function TableWidget(node, options = {}) {
// Prepare placeholder
this.placeholder = this.document.createElement("div");
this.placeholder.className = "plain table-widget-empty-text";
this.placeholder.className = "table-widget-empty-text";
this._parent.appendChild(this.placeholder);
this.setPlaceholder(this.emptyText);
@ -1657,7 +1657,7 @@ function Cell(column, item, nextCell) {
this.wrapTextInElements = column.wrapTextInElements;
this.label = document.createXULElement("label");
this.label.setAttribute("crop", "end");
this.label.className = "plain table-widget-cell";
this.label.className = "table-widget-cell";
if (nextCell) {
column.column.insertBefore(this.label, nextCell.label);

9
devtools/client/shared/widgets/widgets.css
View File

@ -18,6 +18,10 @@
overflow-x: hidden;
overflow-y: auto;
direction: ltr;
label {
margin: 0;
}
}
.variables-view-element-details:not([open]) {
@ -74,6 +78,11 @@
}
/* Table Widget */
.table-widget-body label {
margin: 0;
}
.table-widget-body > .devtools-side-splitter:last-child {
display: none;
}

23
devtools/client/storage/VariablesView.sys.mjs
View File

@ -1859,7 +1859,7 @@ Scope.prototype = {
arrow.className = "arrow theme-twisty";
const name = (this._name = document.createXULElement("label"));
name.className = "plain name";
name.className = "name";
if (l10nId) {
document.l10n.setAttributes(name, l10nId);
} else {
@ -2628,11 +2628,11 @@ Variable.prototype = extend(Scope.prototype, {
const separatorLabel = (this._separatorLabel =
document.createXULElement("label"));
separatorLabel.className = "plain separator";
separatorLabel.className = "separator";
separatorLabel.setAttribute("value", this.separatorStr + " ");
const valueLabel = (this._valueLabel = document.createXULElement("label"));
valueLabel.className = "plain value";
valueLabel.className = "value";
valueLabel.setAttribute("flex", "1");
valueLabel.setAttribute("crop", "center");
@ -2690,7 +2690,7 @@ Variable.prototype = extend(Scope.prototype, {
if ((ownerView.eval && this.getter) || this.setter) {
const editNode = (this._editNode =
this.document.createXULElement("toolbarbutton"));
editNode.className = "plain variables-view-edit";
editNode.className = "variables-view-edit";
editNode.addEventListener("mousedown", this._onEdit.bind(this));
this._title.insertBefore(editNode, this._spacer);
}
@ -2698,7 +2698,7 @@ Variable.prototype = extend(Scope.prototype, {
if (ownerView.delete) {
const deleteNode = (this._deleteNode =
this.document.createXULElement("toolbarbutton"));
deleteNode.className = "plain variables-view-delete";
deleteNode.className = "variables-view-delete";
deleteNode.addEventListener("click", this._onDelete.bind(this));
this._title.appendChild(deleteNode);
}
@ -2706,7 +2706,7 @@ Variable.prototype = extend(Scope.prototype, {
if (ownerView.new) {
const addPropertyNode = (this._addPropertyNode =
this.document.createXULElement("toolbarbutton"));
addPropertyNode.className = "plain variables-view-add-property";
addPropertyNode.className = "variables-view-add-property";
addPropertyNode.addEventListener(
"mousedown",
this._onAddProperty.bind(this)
@ -2729,22 +2729,21 @@ Variable.prototype = extend(Scope.prototype, {
if (!descriptor.writable && !ownerView.getter && !ownerView.setter) {
const nonWritableIcon = this.document.createXULElement("hbox");
nonWritableIcon.className =
"plain variable-or-property-non-writable-icon";
nonWritableIcon.className = "variable-or-property-non-writable-icon";
nonWritableIcon.setAttribute("optional-visibility", "");
this._title.appendChild(nonWritableIcon);
}
if (descriptor.value && typeof descriptor.value == "object") {
if (descriptor.value.frozen) {
const frozenLabel = this.document.createXULElement("label");
frozenLabel.className = "plain variable-or-property-frozen-label";
frozenLabel.className = "variable-or-property-frozen-label";
frozenLabel.setAttribute("optional-visibility", "");
frozenLabel.setAttribute("value", "F");
this._title.appendChild(frozenLabel);
}
if (descriptor.value.sealed) {
const sealedLabel = this.document.createXULElement("label");
sealedLabel.className = "plain variable-or-property-sealed-label";
sealedLabel.className = "variable-or-property-sealed-label";
sealedLabel.setAttribute("optional-visibility", "");
sealedLabel.setAttribute("value", "S");
this._title.appendChild(sealedLabel);
@ -2752,7 +2751,7 @@ Variable.prototype = extend(Scope.prototype, {
if (!descriptor.value.extensible) {
const nonExtensibleLabel = this.document.createXULElement("label");
nonExtensibleLabel.className =
"plain variable-or-property-non-extensible-label";
"variable-or-property-non-extensible-label";
nonExtensibleLabel.setAttribute("optional-visibility", "");
nonExtensibleLabel.setAttribute("value", "N");
this._title.appendChild(nonExtensibleLabel);
@ -2865,7 +2864,7 @@ Variable.prototype = extend(Scope.prototype, {
// Add a button to open the node in the inspector
this._openInspectorNode = this.document.createXULElement("toolbarbutton");
this._openInspectorNode.className = "plain variables-view-open-inspector";
this._openInspectorNode.className = "variables-view-open-inspector";
this._openInspectorNode.addEventListener(
"mousedown",
this.openNodeInInspector