Bug 1266450 - part1: move devtools tooltip styles to dedicated file;r=bgrins
Tooltip styles are scattered between common.css and panel-specific CSS
files (e.g. inspector.css). For the HTML tooltip, the panel specific CSS
files will not be applied since the tooltip container is appended to the
devtools top window.
This changeset creates a new tooltips.css file which is loaded by default
with devtools themes.
MozReview-Commit-ID: BnoRi9gLfD5
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -148,16 +148,17 @@ devtools.jar:
% skin devtools classic/1.0 %skin/
skin/devtools-browser.css (themes/devtools-browser.css)
skin/common.css (themes/common.css)
skin/splitters.css (themes/splitters.css)
skin/dark-theme.css (themes/dark-theme.css)
skin/light-theme.css (themes/light-theme.css)
skin/firebug-theme.css (themes/firebug-theme.css)
skin/toolbars.css (themes/toolbars.css)
+ skin/tooltips.css (themes/tooltips.css)
skin/variables.css (themes/variables.css)
skin/images/add.svg (themes/images/add.svg)
skin/images/filters.svg (themes/images/filters.svg)
skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
skin/images/controls.png (themes/images/controls.png)
skin/images/controls@2x.png (themes/images/controls@2x.png)
--- a/devtools/client/shared/test/browser_html_tooltip-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip-01.js
@@ -6,17 +6,17 @@
/**
* Test the HTMLTooltip show & hide methods.
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
<vbox flex="1">
<hbox id="box1" flex="1">test1</hbox>
<hbox id="box2" flex="1">test2</hbox>
<hbox id="box3" flex="1">test3</hbox>
<hbox id="box4" flex="1">test4</hbox>
</vbox>
--- a/devtools/client/shared/test/browser_html_tooltip-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip-02.js
@@ -6,17 +6,17 @@
/**
* Test the HTMLTooltip is closed when clicking outside of its container.
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
<vbox flex="1">
<hbox id="box1" flex="1">test1</hbox>
<hbox id="box2" flex="1">test2</hbox>
<hbox id="box3" flex="1">test3</hbox>
<hbox id="box4" flex="1">test4</hbox>
</vbox>
--- a/devtools/client/shared/test/browser_html_tooltip-03.js
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -6,17 +6,17 @@
/**
* Test the HTMLTooltip autofocus configuration option.
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
<vbox flex="1">
<hbox id="box1" flex="1">test1</hbox>
<hbox id="box2" flex="1">test2</hbox>
<hbox id="box3" flex="1">
<textbox id="box3-input"></textbox>
</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip-04.js
+++ b/devtools/client/shared/test/browser_html_tooltip-04.js
@@ -7,17 +7,17 @@
/**
* Test the HTMLTooltip positioning for a small tooltip element (should aways
* find a way to fit).
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
<vbox flex="1">
<hbox style="height: 10px">spacer</hbox>
<hbox id="box1" style="height: 50px">test1</hbox>
<hbox id="box2" style="height: 50px">test2</hbox>
<hbox flex="1">MIDDLE</hbox>
<hbox id="box3" style="height: 50px">test3</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip-05.js
+++ b/devtools/client/shared/test/browser_html_tooltip-05.js
@@ -7,17 +7,17 @@
/**
* Test the HTMLTooltip positioning for a huge tooltip element (can not fit in
* the viewport).
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Tooltip test">
<vbox flex="1">
<hbox id="box1" style="height: 50px">test1</hbox>
<hbox id="box2" style="height: 50px">test2</hbox>
<hbox id="box3" style="height: 50px">test3</hbox>
<hbox id="box4" style="height: 50px">test4</hbox>
</vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -15,17 +15,16 @@ const getAnchor = function (position) {
height: 10px;
position: absolute;
background: red;
${position}"></html:div>`;
};
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
<?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?>
<window class="theme-light"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Tooltip test">
<vbox flex="1" style="position: relative">
${getAnchor("top: 0; left: 0;")}
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -14,17 +14,16 @@ const getAnchor = function (position) {
return `<html:div class="anchor" style="height: 5px;
position: absolute;
background: red;
${position}"></html:div>`;
};
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
- <?xml-stylesheet href="chrome://devtools/skin/common.css"?>
<?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?>
<window class="theme-light"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Tooltip test">
<vbox flex="1" style="position: relative">
${getAnchor("top: 0; left: 0; width: 50px;")}
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -146,195 +146,16 @@
color: #222;
}
.devtools-autocomplete-listbox.firebug-theme > richlistitem > label,
.devtools-autocomplete-listbox.light-theme > richlistitem > label {
color: #666;
}
-/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
-
-.devtools-tooltip .panel-arrowcontent {
- padding: 4px;
-}
-
-.devtools-tooltip .panel-arrowcontainer {
- /* Reseting the transition used when panels are shown */
- transition: none;
- /* Panels slide up/down/left/right when they appear using a transform.
- Since we want to remove the transition, we don't need to transform anymore
- plus it can interfeer by causing mouseleave events on the underlying nodes */
- transform: none;
-}
-
-.devtools-tooltip[clamped-dimensions] {
- min-height: 100px;
- max-height: 400px;
- min-width: 100px;
- max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-min-height] {
- min-height: 0;
- max-height: 400px;
- min-width: 100px;
- max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
- min-width: 400px;
- max-width: 400px;
-}
-.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
-.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
- overflow: hidden;
-}
-.devtools-tooltip[wide] {
- max-width: 600px;
-}
-
-/* Tooltip: Simple Text */
-
-.devtools-tooltip-simple-text {
- max-width: 400px;
- margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
- padding: 8px 12px;
- white-space: pre-wrap;
-}
-
-.devtools-tooltip-simple-text:first-child {
- margin-top: -4px;
-}
-
-.devtools-tooltip-simple-text:last-child {
- margin-bottom: -4px;
-}
-
-/* Tooltip: Alert Icon */
-
-.devtools-tooltip-alert-icon {
- width: 32px;
- height: 32px;
- margin: 6px;
- margin-inline-end: 20px;
-}
-
-.devtools-tooltip-alert-icon {
- list-style-image: url("chrome://global/skin/icons/warning-32.png");
-}
-
-/* Tooltip: Variables View */
-
-.devtools-tooltip-variables-view-box {
- margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
-}
-
-.devtools-tooltip-variables-view-box .variable-or-property > .title {
- padding-inline-end: 6px;
-}
-
-/* Tooltip: Tiles */
-
-.devtools-tooltip-tiles {
- background-color: #eee;
- background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
- linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
- background-size: 20px 20px;
- background-position: 0 0, 10px 10px;
-}
-
-.devtools-tooltip-iframe {
- border: none;
- background: transparent;
-}
-
-.tooltip-container {
- display: none;
- position: fixed;
- z-index: 9999;
- display: none;
- background: transparent;
-}
-
-.tooltip-panel{
- background-color: var(--theme-tooltip-background);
-}
-
-.tooltip-visible {
- display: block;
-}
-
-.tooltip-container[type="normal"] > .tooltip-panel {
- height: 100%;
- width: 100%;
-}
-
-/* Tooltip : arrow style */
-
-.tooltip-container[type="arrow"] {
- filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
-}
-
-.tooltip-container[type="arrow"] > .tooltip-panel {
- position: absolute;
- box-sizing: border-box;
- height: calc(100% - 13px);
- width: 100%;
-
- border: 3px solid var(--theme-tooltip-border);
- border-radius: 5px;
-}
-
-.tooltip-top[type="arrow"] .tooltip-panel {
- top: 0;
-}
-
-.tooltip-bottom[type="arrow"] .tooltip-panel {
- bottom: 0;
-}
-
-.tooltip-arrow {
- position: absolute;
- height: 16px;
- width: 32px;
- overflow: hidden;
-}
-
-.tooltip-top .tooltip-arrow {
- bottom: 0;
-}
-
-.tooltip-bottom .tooltip-arrow {
- top: 0;
-}
-
-.tooltip-arrow:before {
- content: "";
- position: absolute;
- width: 21px;
- height: 21px;
- margin-left: 4px;
- background: linear-gradient(-45deg,
- var(--theme-tooltip-background) 50%, transparent 50%);
- border-color: var(--theme-tooltip-border);
- border-style: solid;
- border-width: 0px 3px 3px 0px;
- border-radius: 3px;
-}
-
-.tooltip-bottom .tooltip-arrow:before {
- margin-top: 4px;
- transform: rotate(225deg);
-}
-
-.tooltip-top .tooltip-arrow:before {
- margin-top: -12px;
- transform: rotate(45deg);
-}
-
/* links to source code, like displaying `myfile.js:45` */
.devtools-source-link {
font-family: var(--monospace-font-family);
color: var(--theme-highlight-blue);
cursor: pointer;
white-space: nowrap;
display: flex;
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,16 +1,17 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
@import url(variables.css);
@import url(common.css);
@import url(toolbars.css);
+@import url(tooltips.css);
body {
margin: 0;
}
.theme-body {
background: var(--theme-body-background);
color: var(--theme-body-color);
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,16 +1,17 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */
@import url(variables.css);
@import url(common.css);
@import url(toolbars.css);
+@import url(tooltips.css);
body {
margin: 0;
}
.theme-body {
background: var(--theme-body-background);
color: var(--theme-body-color);
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/tooltips.css
@@ -0,0 +1,184 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+
+/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
+
+.devtools-tooltip .panel-arrowcontent {
+ padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+ /* Reseting the transition used when panels are shown */
+ transition: none;
+ /* Panels slide up/down/left/right when they appear using a transform.
+ Since we want to remove the transition, we don't need to transform anymore
+ plus it can interfeer by causing mouseleave events on the underlying nodes */
+ transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+ min-height: 100px;
+ max-height: 400px;
+ min-width: 100px;
+ max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+ min-height: 0;
+ max-height: 400px;
+ min-width: 100px;
+ max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+ min-width: 400px;
+ max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+ overflow: hidden;
+}
+.devtools-tooltip[wide] {
+ max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+ max-width: 400px;
+ margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+ padding: 8px 12px;
+ white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+ margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+ margin-bottom: -4px;
+}
+
+/* Tooltip: Alert Icon */
+
+.devtools-tooltip-alert-icon {
+ width: 32px;
+ height: 32px;
+ margin: 6px;
+ margin-inline-end: 20px;
+}
+
+.devtools-tooltip-alert-icon {
+ list-style-image: url("chrome://global/skin/icons/warning-32.png");
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+ margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+ padding-inline-end: 6px;
+}
+
+/* Tooltip: Tiles */
+
+.devtools-tooltip-tiles {
+ background-color: #eee;
+ background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+ linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+ background-size: 20px 20px;
+ background-position: 0 0, 10px 10px;
+}
+
+.devtools-tooltip-iframe {
+ border: none;
+ background: transparent;
+}
+
+.tooltip-container {
+ display: none;
+ position: fixed;
+ z-index: 9999;
+ display: none;
+ background: transparent;
+}
+
+.tooltip-panel{
+ background-color: var(--theme-tooltip-background);
+}
+
+.tooltip-visible {
+ display: block;
+}
+
+.tooltip-container[type="normal"] > .tooltip-panel {
+ height: 100%;
+ width: 100%;
+}
+
+/* Tooltip : arrow style */
+
+.tooltip-container[type="arrow"] {
+ filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
+}
+
+.tooltip-container[type="arrow"] > .tooltip-panel {
+ position: absolute;
+ box-sizing: border-box;
+ height: calc(100% - 13px);
+ width: 100%;
+
+ border: 3px solid var(--theme-tooltip-border);
+ border-radius: 5px;
+}
+
+.tooltip-top[type="arrow"] .tooltip-panel {
+ top: 0;
+}
+
+.tooltip-bottom[type="arrow"] .tooltip-panel {
+ bottom: 0;
+}
+
+.tooltip-arrow {
+ position: absolute;
+ height: 16px;
+ width: 32px;
+ overflow: hidden;
+}
+
+.tooltip-top .tooltip-arrow {
+ bottom: 0;
+}
+
+.tooltip-bottom .tooltip-arrow {
+ top: 0;
+}
+
+.tooltip-arrow:before {
+ content: "";
+ position: absolute;
+ width: 21px;
+ height: 21px;
+ margin-left: 4px;
+ background: linear-gradient(-45deg,
+ var(--theme-tooltip-background) 50%, transparent 50%);
+ border-color: var(--theme-tooltip-border);
+ border-style: solid;
+ border-width: 0px 3px 3px 0px;
+ border-radius: 3px;
+}
+
+.tooltip-bottom .tooltip-arrow:before {
+ margin-top: 4px;
+ transform: rotate(225deg);
+}
+
+.tooltip-top .tooltip-arrow:before {
+ margin-top: -12px;
+ transform: rotate(45deg);
+}