mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-28 15:23:51 +00:00
Bug 1442001 - Remove the expander icon for fonts and the used-as info; r=jdescottes
MozReview-Commit-ID: Gf19Ybo74jc --HG-- extra : rebase_source : eb0bd83dd4111d8fb3200d6f2e29a1b7f5ee5c67
This commit is contained in:
Patrick Brosset
parent
822eb19c88
commit
e3ba763e10
@ -26,11 +26,9 @@ class Font extends PureComponent {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isFontExpanded: false,
|
||||
isFontFaceRuleExpanded: false,
|
||||
};
|
||||
|
||||
this.onFontToggle = this.onFontToggle.bind(this);
|
||||
this.onFontFaceRuleToggle = this.onFontFaceRuleToggle.bind(this);
|
||||
}
|
||||
|
||||
@ -40,18 +38,10 @@ class Font extends PureComponent {
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isFontExpanded: false,
|
||||
isFontFaceRuleExpanded: false,
|
||||
});
|
||||
}
|
||||
|
||||
onFontToggle(event) {
|
||||
this.setState({
|
||||
isFontExpanded: !this.state.isFontExpanded
|
||||
});
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onFontFaceRuleToggle(event) {
|
||||
this.setState({
|
||||
isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded
|
||||
@ -59,15 +49,6 @@ class Font extends PureComponent {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
renderFontCSS(cssFamilyName) {
|
||||
return dom.p(
|
||||
{
|
||||
className: "font-css-name"
|
||||
},
|
||||
`${getStr("fontinspector.usedAs")} "${cssFamilyName}"`
|
||||
);
|
||||
}
|
||||
|
||||
renderFontCSSCode(rule, ruleText) {
|
||||
if (!rule) {
|
||||
return null;
|
||||
@ -89,14 +70,13 @@ class Font extends PureComponent {
|
||||
this.renderFontCSSCodeTwisty(),
|
||||
leading,
|
||||
isFontFaceRuleExpanded ?
|
||||
null
|
||||
:
|
||||
body :
|
||||
dom.span(
|
||||
{
|
||||
className: "font-css-code-expander"
|
||||
className: "font-css-code-expander",
|
||||
onClick: this.onFontFaceRuleToggle,
|
||||
}
|
||||
),
|
||||
isFontFaceRuleExpanded ? body : null,
|
||||
trailing
|
||||
);
|
||||
}
|
||||
@ -129,29 +109,20 @@ class Font extends PureComponent {
|
||||
renderFontName(name) {
|
||||
return dom.h1(
|
||||
{
|
||||
className: "font-name",
|
||||
onClick: this.onFontToggle,
|
||||
className: "font-name"
|
||||
},
|
||||
name
|
||||
);
|
||||
}
|
||||
|
||||
renderFontTwisty() {
|
||||
let { isFontExpanded } = this.state;
|
||||
return this.renderTwisty(isFontExpanded, this.onFontToggle);
|
||||
}
|
||||
|
||||
renderFontCSSCodeTwisty() {
|
||||
let { isFontFaceRuleExpanded } = this.state;
|
||||
return this.renderTwisty(isFontFaceRuleExpanded, this.onFontFaceRuleToggle);
|
||||
}
|
||||
|
||||
renderTwisty(isExpanded, onClick) {
|
||||
let attributes = {
|
||||
className: "theme-twisty",
|
||||
onClick,
|
||||
onClick: this.onFontFaceRuleToggle,
|
||||
};
|
||||
if (isExpanded) {
|
||||
if (isFontFaceRuleExpanded) {
|
||||
attributes.open = "true";
|
||||
}
|
||||
|
||||
@ -168,7 +139,6 @@ class Font extends PureComponent {
|
||||
let { previewText } = fontOptions;
|
||||
|
||||
let {
|
||||
CSSFamilyName,
|
||||
format,
|
||||
name,
|
||||
previewUrl,
|
||||
@ -177,23 +147,14 @@ class Font extends PureComponent {
|
||||
URI,
|
||||
} = font;
|
||||
|
||||
let { isFontExpanded } = this.state;
|
||||
|
||||
return dom.li(
|
||||
{
|
||||
className: "font" + (isFontExpanded ? " expanded" : ""),
|
||||
className: "font",
|
||||
},
|
||||
this.renderFontTwisty(),
|
||||
this.renderFontName(name),
|
||||
FontPreview({ previewText, previewUrl, onPreviewFonts }),
|
||||
dom.div(
|
||||
{
|
||||
className: "font-details"
|
||||
},
|
||||
this.renderFontTypeAndURL(URI, format),
|
||||
this.renderFontCSSCode(rule, ruleText),
|
||||
this.renderFontCSS(CSSFamilyName)
|
||||
)
|
||||
this.renderFontTypeAndURL(URI, format),
|
||||
this.renderFontCSSCode(rule, ruleText)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
|
||||
const Types = require("../types");
|
||||
const { getStr } = require("../utils/l10n");
|
||||
|
||||
class FontPreview extends PureComponent {
|
||||
static get propTypes() {
|
||||
@ -85,6 +86,7 @@ class FontPreview extends PureComponent {
|
||||
className: "font-preview",
|
||||
src: previewUrl,
|
||||
onClick: this.onClick,
|
||||
title: !isFocused ? getStr("fontinspector.editPreview") : "",
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
@ -17,7 +17,6 @@ support-files =
|
||||
[browser_fontinspector.js]
|
||||
[browser_fontinspector_edit-previews.js]
|
||||
[browser_fontinspector_expand-css-code.js]
|
||||
[browser_fontinspector_expand-details.js]
|
||||
[browser_fontinspector_other-fonts.js]
|
||||
[browser_fontinspector_text-node.js]
|
||||
[browser_fontinspector_theme-change.js]
|
||||
|
||||
@ -55,12 +55,6 @@ function getFormat(fontLi) {
|
||||
return link.textContent;
|
||||
}
|
||||
|
||||
function getCSSName(fontLi) {
|
||||
let text = fontLi.querySelector(".font-css-name").textContent;
|
||||
|
||||
return text.substring(text.indexOf('"') + 1, text.lastIndexOf('"'));
|
||||
}
|
||||
|
||||
function* testBodyFonts(inspector, viewDoc) {
|
||||
let lis = getUsedFontsEls(viewDoc);
|
||||
is(lis.length, 5, "Found 5 fonts");
|
||||
@ -73,7 +67,6 @@ function* testBodyFonts(inspector, viewDoc) {
|
||||
is(isRemote(li), font.remote, "font " + i + " remote value correct");
|
||||
is(li.querySelector(".font-url").href, font.url, "font " + i + " url correct");
|
||||
is(getFormat(li), font.format, "font " + i + " format correct");
|
||||
is(getCSSName(li), font.cssName, "font " + i + " css name correct");
|
||||
}
|
||||
|
||||
// test that the bold and regular fonts have different previews
|
||||
@ -83,15 +76,12 @@ function* testBodyFonts(inspector, viewDoc) {
|
||||
|
||||
// test system font
|
||||
let localFontName = getName(lis[4]);
|
||||
let localFontCSSName = getCSSName(lis[4]);
|
||||
|
||||
// On Linux test machines, the Arial font doesn't exist.
|
||||
// The fallback is "Liberation Sans"
|
||||
ok((localFontName == "Arial") || (localFontName == "Liberation Sans"),
|
||||
"local font right font name");
|
||||
ok(!isRemote(lis[4]), "local font is local");
|
||||
ok((localFontCSSName == "Arial") || (localFontCSSName == "Liberation Sans"),
|
||||
"Arial", "local font has right css name");
|
||||
}
|
||||
|
||||
function* testDivFonts(inspector, viewDoc) {
|
||||
|
||||
@ -12,11 +12,8 @@ add_task(function* () {
|
||||
let { view } = yield openFontInspectorForURL(TEST_URI);
|
||||
let viewDoc = view.document;
|
||||
|
||||
info("Expanding the details section of the first font");
|
||||
let fontEl = getUsedFontsEls(viewDoc)[0];
|
||||
yield expandFontDetails(fontEl);
|
||||
|
||||
info("Checking that the css font-face rule is collapsed by default");
|
||||
let fontEl = getUsedFontsEls(viewDoc)[0];
|
||||
let codeEl = fontEl.querySelector(".font-css-code");
|
||||
is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
|
||||
|
||||
@ -33,4 +30,22 @@ add_task(function* () {
|
||||
yield onExpanded;
|
||||
|
||||
ok(true, "Font-face rule is now expanded");
|
||||
|
||||
info("Expanding another rule by clicking on the [...] icon instead");
|
||||
fontEl = getUsedFontsEls(viewDoc)[1];
|
||||
codeEl = fontEl.querySelector(".font-css-code");
|
||||
|
||||
onExpanded = BrowserTestUtils.waitForCondition(() => {
|
||||
return codeEl.textContent === `@font-face {
|
||||
font-family: "bar";
|
||||
font-weight: bold;
|
||||
src: url("ostrich-black.ttf");
|
||||
}`;
|
||||
}, "Waiting for the font-face rule");
|
||||
|
||||
expander = fontEl.querySelector(".font-css-code .font-css-code-expander");
|
||||
expander.click();
|
||||
yield onExpanded;
|
||||
|
||||
ok(true, "Font-face rule is now expanded too");
|
||||
});
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that fonts are collapsed by default, and can be expanded.
|
||||
|
||||
const TEST_URI = URL_ROOT + "browser_fontinspector.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { inspector, view } = yield openFontInspectorForURL(TEST_URI);
|
||||
let viewDoc = view.document;
|
||||
|
||||
info("Checking all font are collapsed by default");
|
||||
let fonts = getUsedFontsEls(viewDoc);
|
||||
checkAllFontsCollapsed(fonts);
|
||||
|
||||
info("Clicking on the first one to expand the font details");
|
||||
yield expandFontDetails(fonts[0]);
|
||||
|
||||
ok(fonts[0].querySelector(".theme-twisty").hasAttribute("open"), `Twisty is open`);
|
||||
ok(isFontDetailsVisible(fonts[0]), `Font details is shown`);
|
||||
|
||||
info("Selecting a node with different fonts and checking that all fonts are collapsed");
|
||||
yield selectNode(".black-text", inspector);
|
||||
fonts = getUsedFontsEls(viewDoc);
|
||||
checkAllFontsCollapsed(fonts);
|
||||
});
|
||||
|
||||
function checkAllFontsCollapsed(fonts) {
|
||||
fonts.forEach((el, i) => {
|
||||
let twisty = el.querySelector(".theme-twisty");
|
||||
ok(twisty, `Twisty ${i} exists`);
|
||||
ok(!twisty.hasAttribute("open"), `Twisty ${i} is closed`);
|
||||
ok(!isFontDetailsVisible(el), `Font details ${i} is hidden`);
|
||||
});
|
||||
}
|
||||
@ -88,21 +88,6 @@ function* updatePreviewText(view, text) {
|
||||
is(input.value, text, "The input now contains the correct text.");
|
||||
}
|
||||
|
||||
async function expandFontDetails(fontEl) {
|
||||
info("Expanding a font details section");
|
||||
|
||||
let onExpanded = BrowserTestUtils.waitForCondition(() => isFontDetailsVisible(fontEl),
|
||||
"Waiting for font details");
|
||||
let twisty = fontEl.querySelector(".theme-twisty");
|
||||
twisty.click();
|
||||
await onExpanded;
|
||||
}
|
||||
|
||||
function isFontDetailsVisible(fontEl) {
|
||||
return [...fontEl.querySelectorAll(".font-css-name, .font-css-code, .font-format-url")]
|
||||
.every(el => el.getBoxQuads().length);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all of the <li> elements for the fonts used on the currently selected element.
|
||||
*
|
||||
|
||||
@ -10,9 +10,6 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
* A single font.
|
||||
*/
|
||||
const font = exports.font = {
|
||||
// The name of the font family
|
||||
CSSFamilyName: PropTypes.string,
|
||||
|
||||
// The format of the font
|
||||
format: PropTypes.string,
|
||||
|
||||
|
||||
@ -5,10 +5,6 @@
|
||||
# LOCALIZATION NOTE This file contains the Font Inspector strings.
|
||||
# The Font Inspector is a panel accessible in the Inspector sidebar.
|
||||
|
||||
# LOCALIZATION NOTE (fontinspector.usedAs) This label introduces the name used to refer to
|
||||
# the font in a stylesheet.
|
||||
fontinspector.usedAs=Used as:
|
||||
|
||||
# LOCALIZATION NOTE (fontinspector.system) This label indicates that the font is a local
|
||||
# system font.
|
||||
fontinspector.system=system
|
||||
@ -23,4 +19,9 @@ fontinspector.noFontsOnSelectedElement=No fonts were found for the current eleme
|
||||
|
||||
# LOCALIZATION NOTE (fontinspector.otherFontsInPageHeader): This is the text for the
|
||||
# header of a collapsible section containing other fonts used in the page.
|
||||
fontinspector.otherFontsInPageHeader=Other fonts in page
|
||||
fontinspector.otherFontsInPageHeader=Other fonts in page
|
||||
|
||||
# LOCALIZATION NOTE (fontinspector.editPreview): This is the text that appears in a
|
||||
# tooltip on hover of a font preview string. Clicking on the string opens a text input
|
||||
# where users can type to change the preview text.
|
||||
fontinspector.editPreview=Click to edit preview
|
||||
|
||||
@ -25,22 +25,19 @@
|
||||
border: 1px solid var(--theme-splitter-color);
|
||||
border-width: 0 1px 1px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 14px auto 1fr;
|
||||
grid-template-rows: 50px;
|
||||
grid-column-gap: 10px;
|
||||
padding: 0 10px 0 5px;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#font-container .theme-twisty {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
place-self: center;
|
||||
vertical-align: text-top;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.font-preview-container {
|
||||
grid-column: 3 / -1;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center end;
|
||||
@ -61,14 +58,16 @@
|
||||
background-position-y: 45px;
|
||||
}
|
||||
|
||||
.font-preview-input {
|
||||
#font-container .font-preview-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
width: calc(100% - 5px);
|
||||
height: calc(100% - 2px);
|
||||
height: calc(100% - 10px);
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.font-preview-input::-moz-selection {
|
||||
@ -78,27 +77,20 @@
|
||||
|
||||
.font-name {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
grid-column: 2;
|
||||
place-self: center start;
|
||||
}
|
||||
|
||||
.font-details {
|
||||
grid-column: 2 / 4;
|
||||
padding-inline-end: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.font-css-code {
|
||||
direction: ltr;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
border: 1px solid var(--theme-splitter-color);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--theme-toolbar-color);
|
||||
grid-column: span 2;
|
||||
position: relative;
|
||||
offset-inline-start: -4px;
|
||||
}
|
||||
|
||||
.font-css-code-expander::before {
|
||||
@ -118,12 +110,12 @@
|
||||
|
||||
.font-format-url {
|
||||
text-transform: capitalize;
|
||||
margin-block-start: 0;
|
||||
margin-top: .2em;
|
||||
color: var(--grey-50);
|
||||
}
|
||||
|
||||
.font-url {
|
||||
margin-inline-start: 1em;
|
||||
text-transform: uppercase;
|
||||
margin-inline-start: .5em;
|
||||
text-decoration: underline;
|
||||
color: var(--theme-highlight-blue);
|
||||
background: transparent;
|
||||
@ -145,9 +137,6 @@
|
||||
fill: var(--blue-60);
|
||||
}
|
||||
|
||||
|
||||
.font:not(.expanded) .font-css-name,
|
||||
.font:not(.expanded) .font-css-code,
|
||||
.font:not(.expanded) .font-format-url {
|
||||
display: none;
|
||||
#font-container .devtools-sidepanel-no-result + .accordion {
|
||||
border-block-start: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user