Bug 1270395 - Simplify the markup and padding rules for the UI Tour panel. r?gijs
MozReview-Commit-ID: GW5aht56XNv
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -220,26 +220,24 @@
type="arrow"
hidden="true"
noautofocus="true"
noautohide="true"
align="start"
orient="vertical"
role="alert">
<vbox>
- <hbox pack="end">
- <toolbarbutton id="UITourTooltipClose" class="close-icon"
- tooltiptext="&uiTour.infoPanel.close;"/>
- </hbox>
<hbox id="UITourTooltipBody">
- <vbox id="UITourTooltipIconContainer">
- <image id="UITourTooltipIcon"/>
- </vbox>
+ <image id="UITourTooltipIcon"/>
<vbox flex="1">
- <label id="UITourTooltipTitle" flex="1"/>
+ <hbox id="UITourTooltipTitleContainer">
+ <label id="UITourTooltipTitle" flex="1"/>
+ <toolbarbutton id="UITourTooltipClose" class="close-icon"
+ tooltiptext="&uiTour.infoPanel.close;"/>
+ </hbox>
<description id="UITourTooltipDescription" flex="1"/>
</vbox>
</hbox>
<hbox id="UITourTooltipButtons" flex="1" align="center"/>
</vbox>
</panel>
<!-- type="default" forces frames to be created so that the panel's size can be determined -->
<panel id="UITourHighlightContainer"
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1552,27 +1552,26 @@ this.UITour = {
function showInfoPanel(aAnchorEl) {
aAnchorEl.focus();
let document = aChromeWindow.document;
let tooltip = document.getElementById("UITourTooltip");
let tooltipTitle = document.getElementById("UITourTooltipTitle");
let tooltipDesc = document.getElementById("UITourTooltipDescription");
let tooltipIcon = document.getElementById("UITourTooltipIcon");
- let tooltipIconContainer = document.getElementById("UITourTooltipIconContainer");
let tooltipButtons = document.getElementById("UITourTooltipButtons");
if (tooltip.state == "showing" || tooltip.state == "open") {
tooltip.hidePopup();
}
tooltipTitle.textContent = aTitle || "";
tooltipDesc.textContent = aDescription || "";
tooltipIcon.src = aIconURL || "";
- tooltipIconContainer.hidden = !aIconURL;
+ tooltipIcon.hidden = !aIconURL;
while (tooltipButtons.firstChild)
tooltipButtons.firstChild.remove();
for (let button of aButtons) {
let isButton = button.style != "text";
let el = document.createElement(isButton ? "button" : "label");
el.setAttribute(isButton ? "label" : "value", button.label);
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -21,42 +21,39 @@
/* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
on Linux without an X compositor where opacity is either 0 or 1. */
box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
min-height: 32px;
min-width: 32px;
}
#UITourTooltipBody {
- margin-inline-end: 14px;
- margin-inline-start: 14px;
- margin-top: -16px;
- margin-bottom: 8px;
+ -moz-box-align: start;
+}
+
+#UITourTooltipTitleContainer {
+ -moz-box-align: start;
+ margin-bottom: 10px;
}
#UITourTooltipIcon {
width: 48px;
height: 48px;
- margin-inline-start: 14px;
- margin-inline-end: 14px;
+ margin-inline-end: 10px;
}
#UITourTooltipTitle,
#UITourTooltipDescription {
max-width: 20rem;
}
#UITourTooltipTitle {
font-size: 1.45rem;
font-weight: bold;
- margin-inline-start: 0;
- /* Avoid the title overlapping the close button */
- margin-inline-end: 14px;
- margin-top: 0;
- margin-bottom: 9px;
+ margin: 0;
}
#UITourTooltipDescription {
margin-inline-start: 0;
margin-inline-end: 0;
font-size: 1.15rem;
line-height: 1.8rem;
margin-bottom: 0; /* Override global.css */
@@ -76,29 +73,34 @@
display: none;
}
#UITourTooltipButtons {
-moz-box-pack: end;
background-color: hsla(210,4%,10%,.07);
border-top: 1px solid hsla(210,4%,10%,.14);
margin: 10px -16px -16px;
- padding: 2em 15px;
+ padding: 16px;
}
#UITourTooltipButtons > label,
#UITourTooltipButtons > button {
margin: 0 15px;
}
#UITourTooltipButtons > label:first-child,
#UITourTooltipButtons > button:first-child {
margin-inline-start: 0;
}
+#UITourTooltipButtons > label:last-child,
+#UITourTooltipButtons > button:last-child {
+ margin-inline-end: 0;
+}
+
#UITourTooltipButtons > button[image] > .button-box > .button-icon {
width: 16px;
height: 16px;
margin-inline-end: 5px;
}
#UITourTooltipButtons > label,
#UITourTooltipButtons > button .button-text {