Bug 1317795 - Fix broken alignment of in-content UI checkboxes. r?jaws
MozReview-Commit-ID: 4JpOSYu3BZS
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -615,17 +615,17 @@
button.setAttribute("autofocus", "true");
parent.appendChild(button);
}
</script>
<!-- UI for option to report certificate errors to Mozilla. Removed on
init for other error types .-->
<div id="certificateErrorReporting">
- <p>
+ <p class="toggle-container-with-text">
<input type="checkbox" id="automaticallyReportInFuture" />
<label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
</p>
</div>
<div id="advancedPanelContainer">
<div id="weakCryptoAdvancedPanel" class="advanced-panel">
<div id="weakCryptoAdvancedDescription">
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -177,17 +177,17 @@ button {
}
.addons-options {
flex: 1;
}
.addons-debugging-label {
display: inline-block;
- margin: 0 5px 5px 0;
+ margin-inline-end: 1ch;
}
.error-page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
--- a/devtools/client/aboutdebugging/components/addons/controls.js
+++ b/devtools/client/aboutdebugging/components/addons/controls.js
@@ -65,17 +65,17 @@ module.exports = createClass({
});
},
render() {
let { debugDisabled } = this.props;
return dom.div({ className: "addons-top" },
dom.div({ className: "addons-controls" },
- dom.div({ className: "addons-options" },
+ dom.div({ className: "addons-options toggle-container-with-text" },
dom.input({
id: "enable-addon-debugging",
type: "checkbox",
checked: !debugDisabled,
onChange: this.onEnableAddonDebuggingChange,
}),
dom.label({
className: "addons-debugging-label",
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -137,34 +137,47 @@
width: 0px;
}
#subprocess-reports td {
background-color: #ebebeb;
text-align: start;
border-color: var(--in-content-table-border-dark-color);
border-spacing: 40px;
}
+ .options {
+ width: 100%;
+ }
+ .options > .toggle-container-with-text {
+ display: inline-flex;
+ }
+ .options > .toggle-container-with-text:not(:first-child) {
+ margin-inline-start: 2ch;
+ }
</style>
</head>
<body onload="go()">
<div>
<h2>Memory usage of Subprocesses</h2>
<table id="subprocess-reports">
<tr>
<th>Process ID</th>
<th title="RSS measures the pages resident in the main memory for the process">Resident Set Size</th>
<th title="USS gives a count of unshared pages, unique to the process">Unique Set Size</th>
</tr>
</table>
</div>
- <div>
- <input type="checkbox" checked="false" id="check-display-recent"></input>
- <label for="check-display-recent" id="label-display-recent">Display only the last few seconds.</label>
- <input type="checkbox" checked="true" id="check-autorefresh"></input>
- <label for="check-autorefresh">Refresh automatically</label>
+ <div class="options">
+ <div class="toggle-container-with-text">
+ <input type="checkbox" checked="false" id="check-display-recent"></input>
+ <label for="check-display-recent" id="label-display-recent">Display only the last few seconds.</label>
+ </div>
+ <div class="toggle-container-with-text">
+ <input type="checkbox" checked="true" id="check-autorefresh"></input>
+ <label for="check-autorefresh">Refresh automatically</label>
+ </div>
</div>
<div>
<h2>Performance of Add-ons</h2>
<div id="addons" class="measuring">
</div>
</div>
<div>
<h2>Performance of Web pages</h2>
--- a/toolkit/content/aboutNetworking.xhtml
+++ b/toolkit/content/aboutNetworking.xhtml
@@ -16,17 +16,17 @@
<title>&aboutNetworking.title;</title>
<link rel="stylesheet" href="chrome://mozapps/skin/aboutNetworking.css" type="text/css" />
<script type="application/javascript;version=1.7" src="chrome://global/content/aboutNetworking.js" />
</head>
<body id="body">
<div id="warning_message" class="warningBackground" hidden="true">
<div class="container">
<h1 class="title">&aboutNetworking.warning;</h1>
- <div>
+ <div class="toggle-container-with-text">
<input id="warncheck" type="checkbox" checked="yes" />
<label for="warncheck">&aboutNetworking.showNextTime;</label>
</div>
<div>
<button id="confpref" class="primary">&aboutNetworking.ok;</button>
</div>
</div>
</div>
@@ -51,17 +51,17 @@
<span class="category-name">&aboutNetworking.logging;</span>
</div>
</div>
<div class="main-content">
<div class="header">
<div id="sectionTitle" class="header-name">
&aboutNetworking.HTTP;
</div>
- <div id="refreshDiv">
+ <div id="refreshDiv" class="toggle-container-with-text">
<button id="refreshButton">&aboutNetworking.refresh;</button>
<input id="autorefcheck" type="checkbox" name="Autorefresh" />
<label for="autorefcheck">&aboutNetworking.autoRefresh;</label>
</div>
</div>
<div id="http" class="tab active">
<table>
--- a/toolkit/themes/shared/aboutNetworking.css
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -14,22 +14,22 @@ body {
height: 100%;
}
#sectionTitle {
float: left;
}
#refreshDiv {
- text-align: end;
+ justify-content: flex-end;
margin-bottom: 0.5em;
}
#refreshButton {
- vertical-align: middle;
+ margin-top: 0;
}
/** Categories **/
.category {
cursor: pointer;
/* Center category names */
display: flex;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -549,16 +549,21 @@ xul|*.checkbox-label-box {
margin-inline-start: -1px; /* negative margin for the transparent border */
padding-inline-start: 0;
}
xul|richlistitem > xul|*.checkbox-check {
margin: 3px 6px;
}
+html|*.toggle-container-with-text {
+ display: flex;
+ align-items: center;
+}
+
xul|radio {
margin-inline-start: 0;
}
xul|*.radio-check {
-moz-appearance: none;
width: 23px;
height: 23px;