mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 985597 - Use the AnonymousContent Document API for the highlighters; r=miker r=Gijs
--HG-- rename : browser/themes/shared/devtools/highlighter.inc.css => browser/themes/shared/devtools/highlighter.css
This commit is contained in:
Patrick Brosset
parent
d15b4c194e
commit
2235c1fc3d
@ -787,9 +787,6 @@ statuspanel[inactive][previoustype=overLink] {
|
||||
max-width: 32em;
|
||||
}
|
||||
|
||||
/* highlighter */
|
||||
%include highlighter.css
|
||||
|
||||
/* gcli */
|
||||
|
||||
html|*#gcli-tooltip-frame,
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
/* 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/. */
|
||||
|
||||
.highlighter-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Box model highlighter
|
||||
*/
|
||||
svg|svg.box-model-root[hidden],
|
||||
svg|line.box-model-guide-top[hidden],
|
||||
svg|line.box-model-guide-right[hidden],
|
||||
svg|line.box-model-guide-left[hidden],
|
||||
svg|line.box-model-guide-bottom[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Node Infobar
|
||||
*/
|
||||
.highlighter-nodeinfobar-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-positioner {
|
||||
position: absolute;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-positioner[hidden] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-id,
|
||||
html|*.highlighter-nodeinfobar-classes,
|
||||
html|*.highlighter-nodeinfobar-pseudo-classes,
|
||||
html|*.highlighter-nodeinfobar-dimensions,
|
||||
html|*.highlighter-nodeinfobar-tagname {
|
||||
-moz-user-select: text;
|
||||
-moz-user-focus: normal;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-positioner[position="top"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-bottom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-positioner[position="bottom"]:not([hide-arrow]) > .highlighter-nodeinfobar-arrow-top {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-positioner[disabled] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-tagname {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
/*
|
||||
* Css transform highlighter
|
||||
*/
|
||||
svg|svg.css-transform-root[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -10,11 +10,20 @@
|
||||
* ALL need to match an error in order for that error not to cause a test
|
||||
* failure. */
|
||||
const kWhitelist = [
|
||||
{sourceName: /cleopatra.*(tree|ui)\.css/i}, /* Cleopatra is imported as-is, see bug 1004421 */
|
||||
{sourceName: /codemirror\.css/i}, /* CodeMirror is imported as-is, see bug 1004423 */
|
||||
{sourceName: /web\/viewer\.css/i, errorMessage: /Unknown pseudo-class.*(fullscreen|selection)/i }, /* PDFjs is futureproofing its pseudoselectors, and those rules are dropped. */
|
||||
{sourceName: /aboutaccounts\/(main|normalize)\.css/i}, /* Tracked in bug 1004428 */
|
||||
{sourceName: /loop\/.*sdk-content\/.*\.css$/i /* TokBox SDK assets, see bug 1032469 */}
|
||||
// Cleopatra is imported as-is, see bug 1004421.
|
||||
{sourceName: /cleopatra.*(tree|ui)\.css/i},
|
||||
// CodeMirror is imported as-is, see bug 1004423.
|
||||
{sourceName: /codemirror\.css/i},
|
||||
// PDFjs is futureproofing its pseudoselectors, and those rules are dropped.
|
||||
{sourceName: /web\/viewer\.css/i,
|
||||
errorMessage: /Unknown pseudo-class.*(fullscreen|selection)/i},
|
||||
// Tracked in bug 1004428.
|
||||
{sourceName: /aboutaccounts\/(main|normalize)\.css/i},
|
||||
// TokBox SDK assets, see bug 1032469.
|
||||
{sourceName: /loop\/.*sdk-content\/.*\.css$/i},
|
||||
// Highlighter CSS uses chrome-only pseudo-class, see bug 985597.
|
||||
{sourceName: /highlighter\.css/i,
|
||||
errorMessage: /Unknown pseudo-class.*moz-native-anonymous/i}
|
||||
];
|
||||
|
||||
let moduleLocation = gTestPath.replace(/\/[^\/]*$/i, "/parsingTestHelpers.jsm");
|
||||
|
||||
@ -2055,7 +2055,6 @@ toolbarbutton.chevron > .toolbarbutton-icon {
|
||||
}
|
||||
|
||||
%include ../shared/devtools/responsivedesign.inc.css
|
||||
%include ../shared/devtools/highlighter.inc.css
|
||||
%include ../shared/devtools/commandline.inc.css
|
||||
%include ../shared/plugin-doorhanger.inc.css
|
||||
%include ../shared/badcontent-doorhanger.inc.css
|
||||
|
||||
@ -243,6 +243,7 @@ browser.jar:
|
||||
skin/classic/browser/devtools/webconsole.png (../shared/devtools/images/webconsole.png)
|
||||
skin/classic/browser/devtools/webconsole@2x.png (../shared/devtools/images/webconsole@2x.png)
|
||||
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
||||
skin/classic/browser/devtools/highlighter.css (../shared/devtools/highlighter.css)
|
||||
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
|
||||
skin/classic/browser/devtools/editor-error.png (../shared/devtools/images/editor-error.png)
|
||||
skin/classic/browser/devtools/editor-breakpoint.png (../shared/devtools/images/editor-breakpoint.png)
|
||||
|
||||
@ -4385,7 +4385,6 @@ menulist.translate-infobar-element > .menulist-dropmarker {
|
||||
}
|
||||
|
||||
%include ../shared/devtools/responsivedesign.inc.css
|
||||
%include ../shared/devtools/highlighter.inc.css
|
||||
%include ../shared/devtools/commandline.inc.css
|
||||
%include ../shared/plugin-doorhanger.inc.css
|
||||
%include ../shared/badcontent-doorhanger.inc.css
|
||||
|
||||
@ -360,6 +360,7 @@ browser.jar:
|
||||
skin/classic/browser/devtools/alerticon-warning@2x.png (../shared/devtools/images/alerticon-warning@2x.png)
|
||||
* skin/classic/browser/devtools/ruleview.css (../shared/devtools/ruleview.css)
|
||||
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
||||
skin/classic/browser/devtools/highlighter.css (../shared/devtools/highlighter.css)
|
||||
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
|
||||
skin/classic/browser/devtools/editor-error.png (../shared/devtools/images/editor-error.png)
|
||||
skin/classic/browser/devtools/editor-breakpoint.png (../shared/devtools/images/editor-breakpoint.png)
|
||||
|
||||
172
browser/themes/shared/devtools/highlighter.css
Normal file
172
browser/themes/shared/devtools/highlighter.css
Normal file
@ -0,0 +1,172 @@
|
||||
/* 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/. */
|
||||
|
||||
/*
|
||||
The :-moz-native-anonymous selector prefix prevents the styles defined here
|
||||
from impacting web content.
|
||||
Indeed, this pseudo-class is only available to chrome code.
|
||||
This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
|
||||
pseudo-class is important.
|
||||
Having bug 1086532 fixed would make it possible to load this stylesheet in a
|
||||
<style scoped> node instead, directly in the native anonymous container
|
||||
element.
|
||||
*/
|
||||
|
||||
:-moz-native-anonymous .highlighter-container {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .highlighter-container [hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Box model highlighter */
|
||||
|
||||
:-moz-native-anonymous .box-model-container {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-content {
|
||||
fill: #80d4ff;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-padding {
|
||||
fill: #66cc52;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-border {
|
||||
fill: #ffe431;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-margin {
|
||||
fill: #d89b28;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-content,
|
||||
:-moz-native-anonymous .box-model-padding,
|
||||
:-moz-native-anonymous .box-model-border,
|
||||
:-moz-native-anonymous .box-model-margin {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-guide-top,
|
||||
:-moz-native-anonymous .box-model-guide-right,
|
||||
:-moz-native-anonymous .box-model-guide-bottom,
|
||||
:-moz-native-anonymous .box-model-guide-left {
|
||||
stroke: #08C;
|
||||
stroke-dasharray: 5 3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar */
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-container {
|
||||
position: absolute;
|
||||
max-width: 95%;
|
||||
|
||||
font: message-box;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar {
|
||||
position: relative;
|
||||
|
||||
/* Centering the nodeinfobar in the container */
|
||||
left: -50%;
|
||||
|
||||
padding: 5px;
|
||||
min-width: 75px;
|
||||
|
||||
border-radius: 3px;
|
||||
background: hsl(214,13%,24%) no-repeat padding-box;
|
||||
|
||||
color: hsl(216,33%,97%);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
|
||||
content: "";
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
left: calc(50% - 14px);
|
||||
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 14px solid hsl(210,2%,22%);
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-container[position="top"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
|
||||
border-bottom: 0;
|
||||
top: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
|
||||
border-top: 0;
|
||||
bottom: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Text container */
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
text-align: center;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-tagname {
|
||||
color: hsl(285,100%,75%);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-id {
|
||||
color: hsl(103,46%,54%);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-classes,
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-pseudo-classes {
|
||||
color: hsl(200,74%,57%);
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .box-model-nodeinfobar-dimensions {
|
||||
color: hsl(210,30%,85%);
|
||||
-moz-border-start: 1px solid #5a6169;
|
||||
-moz-margin-start: 6px;
|
||||
-moz-padding-start: 6px;
|
||||
}
|
||||
|
||||
/* Css transform highlighter */
|
||||
|
||||
:-moz-native-anonymous .css-transform-transformed {
|
||||
fill: #80d4ff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .css-transform-untransformed {
|
||||
fill: #66cc52;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
:-moz-native-anonymous .css-transform-transformed,
|
||||
:-moz-native-anonymous .css-transform-untransformed,
|
||||
:-moz-native-anonymous .css-transform-line {
|
||||
stroke: #08C;
|
||||
stroke-dasharray: 5 3;
|
||||
stroke-width: 2;
|
||||
}
|
||||
@ -1,133 +0,0 @@
|
||||
%if 0
|
||||
/* 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/. */
|
||||
%endif
|
||||
|
||||
/* Box model highlighter */
|
||||
|
||||
svg|g.box-model-container {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
svg|polygon.box-model-content {
|
||||
fill: #80d4ff;
|
||||
}
|
||||
|
||||
svg|polygon.box-model-padding {
|
||||
fill: #66cc52;
|
||||
}
|
||||
|
||||
svg|polygon.box-model-border {
|
||||
fill: #ffe431;
|
||||
}
|
||||
|
||||
svg|polygon.box-model-margin {
|
||||
fill: #d89b28;
|
||||
}
|
||||
|
||||
svg|polygon.box-model-content,
|
||||
svg|polygon.box-model-padding,
|
||||
svg|polygon.box-model-border,
|
||||
svg|polygon.box-model-margin {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
svg|line.box-model-guide-top,
|
||||
svg|line.box-model-guide-right,
|
||||
svg|line.box-model-guide-bottom,
|
||||
svg|line.box-model-guide-left {
|
||||
stroke: #08C;
|
||||
stroke-dasharray: 5 3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar */
|
||||
|
||||
.highlighter-nodeinfobar {
|
||||
color: hsl(216,33%,97%);
|
||||
border-radius: 3px;
|
||||
background: hsl(214,13%,24%) no-repeat padding-box;
|
||||
padding: 5px;
|
||||
/* Avoid cases where the infobar is smaller than the arrow, when the text is
|
||||
short */
|
||||
min-width: 75px;
|
||||
/* Avoid a shadow with lightweight themes - Bug 1037908 */
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar - text */
|
||||
|
||||
.highlighter-nodeinfobar-text {
|
||||
text-align: center;
|
||||
/* 100% - size of the buttons and margins */
|
||||
max-width: calc(100% - 2 * (26px + 6px));
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-tagname {
|
||||
color: hsl(285,100%,75%);
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-id {
|
||||
color: hsl(103,46%,54%);
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-classes,
|
||||
html|*.highlighter-nodeinfobar-pseudo-classes {
|
||||
color: hsl(200,74%,57%);
|
||||
}
|
||||
|
||||
html|*.highlighter-nodeinfobar-dimensions {
|
||||
color: hsl(210,30%,85%);
|
||||
-moz-border-start: 1px solid #5a6169;
|
||||
-moz-margin-start: 6px;
|
||||
-moz-padding-start: 6px;
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar - box & arrow */
|
||||
|
||||
.highlighter-nodeinfobar-arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-moz-margin-start: calc(50% - 7px);
|
||||
transform: rotate(-45deg);
|
||||
background-clip: padding-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-arrow-top {
|
||||
margin-bottom: -8px;
|
||||
margin-top: 8px;
|
||||
background-image: linear-gradient(to top right, transparent 50%, hsl(210,2%,22%) 50%);
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-arrow-bottom {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 8px;
|
||||
background-image: linear-gradient(to bottom left, transparent 50%, hsl(210,2%,22%) 50%);
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
/* Css transform highlighter */
|
||||
|
||||
svg|polygon.css-transform-transformed {
|
||||
fill: #80d4ff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
svg|polygon.css-transform-untransformed {
|
||||
fill: #66cc52;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
svg|polygon.css-transform-transformed,
|
||||
svg|polygon.css-transform-untransformed,
|
||||
svg|line.css-transform-line {
|
||||
stroke: #08C;
|
||||
stroke-dasharray: 5 3;
|
||||
stroke-width: 2;
|
||||
}
|
||||
@ -2676,7 +2676,6 @@ notification[value="translation"] {
|
||||
}
|
||||
|
||||
%include ../shared/devtools/responsivedesign.inc.css
|
||||
%include ../shared/devtools/highlighter.inc.css
|
||||
%include ../shared/devtools/commandline.inc.css
|
||||
%include ../shared/plugin-doorhanger.inc.css
|
||||
%include ../shared/badcontent-doorhanger.inc.css
|
||||
|
||||
@ -274,6 +274,7 @@ browser.jar:
|
||||
skin/classic/browser/devtools/command-console@2x.png (../shared/devtools/images/command-console@2x.png)
|
||||
skin/classic/browser/devtools/command-eyedropper.png (../shared/devtools/images/command-eyedropper.png)
|
||||
skin/classic/browser/devtools/command-eyedropper@2x.png (../shared/devtools/images/command-eyedropper@2x.png)
|
||||
skin/classic/browser/devtools/highlighter.css (../shared/devtools/highlighter.css)
|
||||
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
|
||||
skin/classic/browser/devtools/editor-error.png (../shared/devtools/images/editor-error.png)
|
||||
skin/classic/browser/devtools/editor-breakpoint.png (../shared/devtools/images/editor-breakpoint.png)
|
||||
@ -709,6 +710,7 @@ browser.jar:
|
||||
skin/classic/aero/browser/devtools/alerticon-warning@2x.png (../shared/devtools/images/alerticon-warning@2x.png)
|
||||
* skin/classic/aero/browser/devtools/ruleview.css (../shared/devtools/ruleview.css)
|
||||
skin/classic/aero/browser/devtools/commandline.css (devtools/commandline.css)
|
||||
skin/classic/aero/browser/devtools/highlighter.css (../shared/devtools/highlighter.css)
|
||||
skin/classic/aero/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
|
||||
skin/classic/aero/browser/devtools/editor-error.png (../shared/devtools/images/editor-error.png)
|
||||
skin/classic/aero/browser/devtools/editor-breakpoint.png (../shared/devtools/images/editor-breakpoint.png)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user