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

Bug 1320182 - Remove -moz-element background from breadcrumbs and use linear-gradient instead; r=jdescottes

Browse Source 
MozReview-Commit-ID: 6TNwZs0PHA4

--HG--
extra : rebase_source : 3e5a915f3f4c4ab43501e9fe2448925493725adc
This commit is contained in:
Patrick Brosset 2017-01-12 10:50:39 +01:00
parent cc44e37547
commit e0aa635c20
6 changed files with 85 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -380,16 +380,6 @@ HTMLBreadcrumbs.prototype = {
this.scroll = this.scroll.bind(this);
this.arrowScrollBox.on("overflow", this.scroll);
// These separators are used for CSS purposes only, and are positioned
// off screen, but displayed with -moz-element.
this.separators = this.doc.createElementNS(NS_XHTML, "div");
this.separators.className = "breadcrumb-separator-container";
this.separators.innerHTML =
"<div id='breadcrumb-separator-before'></div>" +
"<div id='breadcrumb-separator-after'></div>" +
"<div id='breadcrumb-separator-normal'></div>";
this.container.parentNode.appendChild(this.separators);
this.outer.addEventListener("click", this, true);
this.outer.addEventListener("mouseover", this, true);
this.outer.addEventListener("mouseout", this, true);
@ -627,14 +617,12 @@ HTMLBreadcrumbs.prototype = {
this.shortcuts.destroy();
this.empty();
this.separators.remove();
this.arrowScrollBox.off("overflow", this.scroll);
this.arrowScrollBox.destroy();
this.arrowScrollBox = null;
this.outer = null;
this.container = null;
this.separators = null;
this.nodeHierarchy = null;
this.isDestroyed = true;

1
devtools/client/jar.mn
View File

@ -169,7 +169,6 @@ devtools.jar:
skin/images/breakpoint.svg (themes/images/breakpoint.svg)
skin/webconsole.css (themes/webconsole.css)
skin/images/webconsole.svg (themes/images/webconsole.svg)
skin/images/breadcrumbs-divider@2x.png (themes/images/breadcrumbs-divider@2x.png)
skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
skin/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
skin/animationinspector.css (themes/animationinspector.css)

10
devtools/client/shared/widgets/BreadcrumbsWidget.jsm
View File

@ -49,16 +49,6 @@ this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode, aOptions = {}) {
this._list.addEventListener("underflow", this._onUnderflow.bind(this), false);
this._list.addEventListener("overflow", this._onOverflow.bind(this), false);
// These separators are used for CSS purposes only, and are positioned
// off screen, but displayed with -moz-element.
this._separators = this.document.createElement("box");
this._separators.className = "breadcrumb-separator-container";
this._separators.innerHTML =
"<box id='breadcrumb-separator-before'></box>" +
"<box id='breadcrumb-separator-after'></box>" +
"<box id='breadcrumb-separator-normal'></box>";
this._parent.appendChild(this._separators);
// This widget emits events that can be handled in a MenuContainer.
EventEmitter.decorate(this);

BIN
devtools/client/themes/images/breadcrumbs-divider@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 213 B

1
devtools/client/themes/toolbars.css
View File

@ -190,7 +190,6 @@
.devtools-tab.icon-invertable > img,
.devtools-toolbarbutton > image,
.devtools-button::before,
#breadcrumb-separator-normal,
.scrollbutton-up > .toolbarbutton-icon,
.scrollbutton-down > .toolbarbutton-icon,
#black-boxed-message-button .button-icon,

150
devtools/client/themes/widgets.css
View File

@ -189,54 +189,6 @@
transform: scaleX(-1);
}
/* The breadcrumb separator elements are used as background images with
* -moz-element, so we position them offscreen since we don't care about
* seeing the original elements.
*/
.breadcrumb-separator-container {
position: fixed;
top: -1000px;
left: -1000px;
}
#breadcrumb-separator-before,
#breadcrumb-separator-after,
#breadcrumb-separator-normal {
width: 12px;
height: 24px;
overflow: hidden;
}
#breadcrumb-separator-before,
#breadcrumb-separator-after:after {
background: var(--theme-selection-background);
}
#breadcrumb-separator-after,
#breadcrumb-separator-before:after {
background: var(--theme-body-background);
}
/* This chevron arrow cannot be replicated easily in CSS, so we are using
* a background image for it (still keeping it in a separate element so
* we can handle RTL support with a CSS transform).
*/
#breadcrumb-separator-normal {
background: url(images/breadcrumbs-divider@2x.png) no-repeat center right;
background-size: 12px 24px;
}
/* Fake a triangle by rotating a rectangle inside the elements */
#breadcrumb-separator-before:after,
#breadcrumb-separator-after:after {
content: "";
display: block;
width: 25px;
height: 24px;
transform: translateX(-18px) rotate(45deg);
-moz-box-sizing: border-box;
}
.breadcrumbs-widget-item {
background-color: transparent;
-moz-appearance: none;
@ -247,6 +199,7 @@
border: none;
outline: none;
color: hsl(210,30%,85%);
position: relative;
}
.breadcrumbs-widget-item > .button-box {
@ -259,16 +212,93 @@
border-width: 0;
}
.breadcrumbs-widget-item:not([checked]) {
background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
.breadcrumbs-widget-item::before {
content: "";
position: absolute;
top: 1px;
offset-inline-start: 0;
width: 12px;
height: 22px;
background-repeat: no-repeat;
/* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of
the arrow shape, we need the arrow edges to be at this position from the start of
the gradient line. */
--position: 66.5%;
/* The color of the thin line in the arrow-shaped separator between 2 unselected
crumbs. There is no theme variable for this, this used to be an image. */
--line-color: #ACACAC;
--background-color: var(--theme-body-background);
}
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
#debugger-toolbar .breadcrumbs-widget-item::before {
--background-color: var(--theme-toolbar-background);
}
.breadcrumbs-widget-item[checked] {
background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
.theme-dark .breadcrumbs-widget-item::before {
--line-color: #6E6E6E;
}
.breadcrumbs-widget-item:first-child::before {
/* The first crumb does not need any separator before itself */
content: unset;
}
.breadcrumbs-widget-item:dir(rtl)::before {
transform: scaleX(-1);
}
.breadcrumbs-widget-item:not([checked])::before {
background-color: var(--background-color);
background-image:
linear-gradient(45deg,
var(--background-color) 30%,
transparent),
linear-gradient(-45deg,
transparent,
var(--background-color) 70%,
var(--background-color)),
linear-gradient(45deg,
transparent var(--position),
var(--line-color) var(--position),
var(--line-color) calc(var(--position) + 1px),
transparent 0),
linear-gradient(-45deg,
transparent calc(100% - var(--position)),
var(--line-color) calc(100% - var(--position)),
var(--line-color) calc(calc(100% - var(--position)) + 1px),
transparent 0);
background-size:
100% 50%,
100% 50%,
100%,
100%;
background-position:
left bottom,
left top,
left top,
left top;
}
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before {
background-color: var(--theme-selection-background);
background-image:
linear-gradient(45deg,
transparent var(--position),
var(--background-color) 0),
linear-gradient(-45deg,
var(--background-color) calc(100% - var(--position)),
transparent 0);
background-size: unset;
}
.breadcrumbs-widget-item[checked]::before {
background-image:
linear-gradient(45deg,
transparent var(--position),
var(--theme-selection-background) 0),
linear-gradient(-45deg,
var(--theme-selection-background) calc(100% - var(--position)),
var(--background-color) 0);
}
.breadcrumbs-widget-item[checked] {
@ -291,17 +321,6 @@
background-position: center right;
}
#breadcrumb-separator-before:dir(rtl),
#breadcrumb-separator-after:dir(rtl),
#breadcrumb-separator-normal:dir(rtl) {
transform: scaleX(-1);
}
#breadcrumb-separator-before:dir(rtl):after,
#breadcrumb-separator-after:dir(rtl):after {
transform: translateX(-5px) rotate(45deg);
}
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
@ -373,6 +392,7 @@
.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
background: none;
position: relative;
left: -3px;
margin: 0 0 0 -5px;