Bug 1294186 - Migrate inspector.xul from DTDs to .properties files;r=pbro
MozReview-Commit-ID: 7YE3QzqiPoG
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -26,17 +26,17 @@ const {FontInspector} = require("devtool
const {HTMLBreadcrumbs} = require("devtools/client/inspector/breadcrumbs");
const {InspectorSearch} = require("devtools/client/inspector/inspector-search");
const {MarkupView} = require("devtools/client/inspector/markup/markup");
const {RuleViewTool} = require("devtools/client/inspector/rules/rules");
const {ToolSidebar} = require("devtools/client/inspector/toolsidebar");
const {ViewHelpers} = require("devtools/client/shared/widgets/view-helpers");
const clipboardHelper = require("devtools/shared/platform/clipboard");
-const {LocalizationHelper} = require("devtools/shared/l10n");
+const {LocalizationHelper, localizeMarkup} = require("devtools/shared/l10n");
const INSPECTOR_L10N = new LocalizationHelper("devtools/locale/inspector.properties");
const TOOLBOX_L10N = new LocalizationHelper("devtools/locale/toolbox.properties");
// Sidebar dimensions
const INITIAL_SIDEBAR_SIZE = 350;
const MIN_SIDEBAR_SIZE = 50;
// If the toolbox width is smaller than given amount of pixels,
@@ -114,16 +114,19 @@ function InspectorPanel(iframeWindow, to
exports.InspectorPanel = InspectorPanel;
InspectorPanel.prototype = {
/**
* open is effectively an asynchronous constructor
*/
open: Task.async(function* () {
+ // Localize all the nodes containing a data-localization attribute.
+ localizeMarkup(this.panelDoc);
+
this._cssPropertiesLoaded = initCssProperties(this.toolbox);
yield this._cssPropertiesLoaded;
yield this.target.makeRemote();
yield this._getPageStyle();
let defaultSelection = yield this._getDefaultNodeForSelection();
return yield this._deferredOpen(defaultSelection);
}),
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -13,59 +13,52 @@
<?xml-stylesheet href="chrome://devtools/skin/animationinspector.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/components/sidebar-toggle.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabs.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabbar.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/inspector/components/side-panel.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/inspector/components/inspector-tab-panel.css" type="text/css"?>
<?xml-stylesheet href="resource://devtools/client/shared/components/splitter/split-box.css" type="text/css"?>
-<!DOCTYPE html [
- <!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
- <!ENTITY % styleinspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd"> %styleinspectorDTD;
- <!ENTITY % fontinspectorDTD SYSTEM "chrome://devtools/locale/font-inspector.dtd"> %fontinspectorDTD;
- <!ENTITY % layoutviewDTD SYSTEM "chrome://devtools/locale/layoutview.dtd"> %layoutviewDTD;
-]>
+<!DOCTYPE window>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="application/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"></script>
</head>
<body class="theme-body devtools-monospace" role="application">
<html:div class="inspector-responsive-container theme-body inspector">
<!-- Main Panel Content -->
<html:div id="inspector-main-content" class="devtools-main-content">
- <html:div id="inspector-toolbar"
- class="devtools-toolbar"
- nowindowdrag="true">
- <html:button id="inspector-element-add-button"
- title="&inspectorAddNode.label;"
- class="devtools-button" />
+ <html:div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
+ data-localization-bundle="devtools/locale/inspector.properties">
+ <html:button id="inspector-element-add-button" class="devtools-button"
+ data-localization="title=inspectorAddNode.label"/>
<html:div class="devtools-toolbar-spacer" />
<html:span id="inspector-searchlabel" />
<html:div id="inspector-search" class="devtools-searchbox has-clear-btn">
<html:input id="inspector-searchbox" class="devtools-searchinput"
type="search"
- placeholder="&inspectorSearchHTML.label3;"/>
+ data-localization="placeholder=inspectorSearchHTML.label3"/>
<html:button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></html:button>
</html:div>
<html:button id="inspector-eyedropper-toggle"
- title="&inspectorEyeDropper.label;"
+ data-localization="title=inspector.eyedropper.label"
class="devtools-button command-button-invertable" />
<html:div id="inspector-sidebar-toggle-box" />
</html:div>
<html:div id="markup-box" />
<html:div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
<html:div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
- role="group" aria-label="&inspectorBreadcrumbsGroup;" tabindex="0" />
+ role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0" />
</html:div>
</html:div>
<!-- Splitter -->
<html:div
xmlns="http://www.w3.org/1999/xhtml"
id="inspector-splitter-box">
</html:div>
@@ -75,77 +68,80 @@
<html:div
xmlns="http://www.w3.org/1999/xhtml"
id="inspector-sidebar"
hidden="true" />
</html:div>
<!-- Sidebar panel definitions -->
<html:div id="tabpanels" style="visibility:collapse">
- <html:div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel">
+ <html:div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel"
+ data-localization-bundle="devtools/locale/inspector.properties">
<html:div id="ruleview-toolbar-container" class="devtools-toolbar">
<html:div id="ruleview-toolbar">
<html:div class="devtools-searchbox has-clear-btn">
<html:input id="ruleview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
- placeholder="&filterStylesPlaceholder;"/>
+ data-localization="placeholder=inspector.filterStyles.placeholder"/>
<html:button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<html:div id="ruleview-command-toolbar">
- <html:button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></html:button>
- <html:button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></html:button>
+ <html:button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></html:button>
+ <html:button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></html:button>
</html:div>
</html:div>
<html:div id="pseudo-class-panel" hidden="true">
<html:label><html:input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</html:label>
<html:label><html:input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</html:label>
<html:label><html:input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</html:label>
</html:div>
</html:div>
<html:div id="ruleview-container" class="ruleview">
<html:div id="ruleview-container-focusable" tabindex="-1">
</html:div>
</html:div>
</html:div>
- <html:div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel">
+ <html:div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel"
+ data-localization-bundle="devtools/locale/inspector.properties">
<html:div id="computedview-toolbar" class="devtools-toolbar">
<html:div class="devtools-searchbox has-clear-btn">
<html:input id="computedview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
- placeholder="&filterStylesPlaceholder;"/>
+ data-localization="placeholder=inspector.filterStyles.placeholder"/>
<html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
- <html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
- <html:input id="browser-style-checkbox"
- type="checkbox"
- class="includebrowserstyles"
- label="&browserStylesLabel;"/>&browserStylesLabel;</html:label>
+ <html:input id="browser-style-checkbox"
+ type="checkbox"
+ class="includebrowserstyles"/>
+ <html:label id="browser-style-checkbox-label" for="browser-style-checkbox"
+ data-localization="content=inspector.browserStyles.label"/>
</html:div>
<html:div id="computedview-container">
<html:div id="computedview-container-focusable" tabindex="-1">
- <html:div id="boxmodel-wrapper" tabindex="0">
+ <html:div id="boxmodel-wrapper" tabindex="0"
+ data-localization-bundle="devtools/locale/boxmodel.properties">
<html:div id="boxmodel-header">
<html:div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></html:div>
- <html:span>&layoutViewTitle;</html:span>
+ <html:span data-localization="content=boxmodel.title"/>
</html:div>
<html:div id="boxmodel-container">
<html:div id="boxmodel-main">
- <html:span class="boxmodel-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
- <html:div id="boxmodel-margins" data-box="margin" title="&margin.tooltip;">
- <html:span class="boxmodel-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
- <html:div id="boxmodel-borders" data-box="border" title="&border.tooltip;">
- <html:span class="boxmodel-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
- <html:div id="boxmodel-padding" data-box="padding" title="&padding.tooltip;">
- <html:div id="boxmodel-content" data-box="content" title="&content.tooltip;">
+ <html:span class="boxmodel-legend" data-box="margin" data-localization="content=boxmodel.margin;title=boxmodel.margin"/>
+ <html:div id="boxmodel-margins" data-box="margin" data-localization="title=boxmodel.margin">
+ <html:span class="boxmodel-legend" data-box="border" data-localization="content=boxmodel.border;title=boxmodel.border"/>
+ <html:div id="boxmodel-borders" data-box="border" data-localization="title=boxmodel.border">
+ <html:span class="boxmodel-legend" data-box="padding" data-localization="content=boxmodel.padding;title=boxmodel.padding"/>
+ <html:div id="boxmodel-padding" data-box="padding" data-localization="title=boxmodel.padding">
+ <html:div id="boxmodel-content" data-box="content" data-localization="title=boxmodel.content">
</html:div>
</html:div>
</html:div>
</html:div>
<html:p class="boxmodel-margin boxmodel-top"><html:span data-box="margin" class="boxmodel-editable" title="margin-top"></html:span></html:p>
<html:p class="boxmodel-margin boxmodel-right"><html:span data-box="margin" class="boxmodel-editable" title="margin-right"></html:span></html:p>
<html:p class="boxmodel-margin boxmodel-bottom"><html:span data-box="margin" class="boxmodel-editable" title="margin-bottom"></html:span></html:p>
@@ -156,72 +152,76 @@
<html:p class="boxmodel-border boxmodel-bottom"><html:span data-box="border" class="boxmodel-editable" title="border-bottom"></html:span></html:p>
<html:p class="boxmodel-border boxmodel-left"><html:span data-box="border" class="boxmodel-editable" title="border-left"></html:span></html:p>
<html:p class="boxmodel-padding boxmodel-top"><html:span data-box="padding" class="boxmodel-editable" title="padding-top"></html:span></html:p>
<html:p class="boxmodel-padding boxmodel-right"><html:span data-box="padding" class="boxmodel-editable" title="padding-right"></html:span></html:p>
<html:p class="boxmodel-padding boxmodel-bottom"><html:span data-box="padding" class="boxmodel-editable" title="padding-bottom"></html:span></html:p>
<html:p class="boxmodel-padding boxmodel-left"><html:span data-box="padding" class="boxmodel-editable" title="padding-left"></html:span></html:p>
- <html:p class="boxmodel-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
+ <html:p class="boxmodel-size">
+ <html:span data-box="content" data-localization="title=boxmodel.content"></html:span>
+ </html:p>
</html:div>
<html:div id="boxmodel-info">
<html:span id="boxmodel-element-size"></html:span>
<html:section id="boxmodel-position-group">
- <html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
+ <html:button class="devtools-button" id="layout-geometry-editor"
+ data-localization="title=boxmodel.geometryButton.tooltip"></html:button>
<html:span id="boxmodel-element-position"></html:span>
</html:section>
</html:div>
<html:div style="display: none">
<html:p id="boxmodel-dummy"></html:p>
</html:div>
</html:div>
</html:div>
<html:div id="propertyContainer" class="theme-separator" tabindex="0">
</html:div>
- <html:div id="computedview-no-results" hidden="">
- &noPropertiesFound;
- </html:div>
+ <html:div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"/>
</html:div>
</html:div>
</html:div>
- <html:div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
+ <html:div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
+ data-localization-bundle="devtools/locale/font-inspector.properties">
<html:div class="devtools-toolbar">
<html:div class="devtools-searchbox">
- <html:input id="font-preview-text-input"
- class="devtools-textinput"
- type="search"
- placeholder="&previewHint;"/>
+ <html:input id="font-preview-text-input" class="devtools-textinput" type="search"
+ data-localization="placeholder=fontinspector.previewText"/>
</html:div>
- <html:label id="font-showall" class="theme-link" title="&showAllFonts;">&showAllFontsUsed;</html:label>
+ <html:label id="font-showall" class="theme-link"
+ data-localization="content=fontinspector.seeAll;
+ title=fontinspector.seeAll.tooltip"/>
</html:div>
<html:div id="font-container">
<html:ul id="all-fonts"></html:ul>
</html:div>
<html:div id="font-template">
<html:section class="font">
<html:div class="font-preview-container">
<html:img class="font-preview"></html:img>
</html:div>
<html:div class="font-info">
<html:h1 class="font-name"></html:h1>
- <html:span class="font-is-local">&system;</html:span>
- <html:span class="font-is-remote">&remote;</html:span>
+ <html:span class="font-is-local" data-localization="content=fontinspector.system"/>
+ <html:span class="font-is-remote" data-localization="content=fontinspector.remote"/>
<html:p class="font-format-url">
<html:input readonly="readonly" class="font-url"></html:input>
<html:span class="font-format"></html:span>
</html:p>
- <html:p class="font-css">&usedAs; "<html:span class="font-css-name"></html:span>"</html:p>
+ <html:p class="font-css">
+ <html:span data-localization="content=fontinspector.usedAs"/> "<html:span class="font-css-name"></html:span>"
+ </html:p>
<html:pre class="font-css-code"></html:pre>
</html:div>
</html:section>
</html:div>
</html:div>
<html:div id="sidebar-panel-animationinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:iframe class="devtools-inspector-tab-frame" />
new file mode 100644
--- /dev/null
+++ b/devtools/client/locales/en-US/boxmodel.properties
@@ -0,0 +1,37 @@
+# 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/.
+
+# LOCALIZATION NOTE : FILE This file contains the Layout View strings.
+# The Layout View is a panel displayed in the computed view tab of the Inspector sidebar.
+
+# LOCALIZATION NOTE : FILE The correct localization of this file might be to
+# keep it in English, or another language commonly spoken among web developers.
+# You want to make that choice consistent across the developer tools.
+# A good criteria is the language in which you'd find the best
+# documentation on web development on the web.
+
+# LOCALIZATION NOTE (boxmodel.title) This is the title of the box model panel and is
+# displayed as a label.
+boxmodel.title=Box Model
+
+# LOCALIZATION NOTE (boxmodel.margin) This refers to the margin in the box model and
+# might be displayed as a label or as a tooltip.
+boxmodel.margin=margin
+
+# LOCALIZATION NOTE (boxmodel.border) This refers to the border in the box model and
+# might be displayed as a label or as a tooltip.
+boxmodel.border=border
+
+# LOCALIZATION NOTE (boxmodel.padding) This refers to the padding in the box model and
+# might be displayed as a label or as a tooltip.
+boxmodel.padding=padding
+
+# LOCALIZATION NOTE (boxmodel.content) This refers to the content in the box model and
+# might be displayed as a label or as a tooltip.
+boxmodel.content=content
+
+# LOCALIZATION NOTE: (boxmodel.geometryButton.tooltip) This label is displayed as a
+# tooltip that appears when hovering over the button that allows users to edit the
+# position of an element in the page.
+boxmodel.geometryButton.tooltip=Edit position
deleted file mode 100644
--- a/devtools/client/locales/en-US/font-inspector.dtd
+++ /dev/null
@@ -1,16 +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/. -->
-
-<!-- LOCALIZATION NOTE : FILE This file contains the Font Inspector strings.
- - The Font Inspector is the panel accessible in the Inspector sidebar. -->
-
-<!ENTITY showAllFonts "See all the fonts used in the page">
-<!ENTITY showAllFontsUsed "Show all fonts used">
-<!ENTITY usedAs "Used as: ">
-<!ENTITY system "system">
-<!ENTITY remote "remote">
-
-<!-- LOCALIZATION NOTE (previewHint): This is the label shown as the
- placeholder in font inspector preview text box. -->
-<!ENTITY previewHint "Preview Text">
new file mode 100644
--- /dev/null
+++ b/devtools/client/locales/en-US/font-inspector.properties
@@ -0,0 +1,29 @@
+# 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/.
+
+# LOCALIZATION NOTE This file contains the Font Inspector strings.
+# The Font Inspector is a panel accessible in the Inspector sidebar.
+
+# LOCALIZATION NOTE (fontinspector.seeAll) This is the label of a link that will show all
+# the fonts used in the page, instead of the ones related to the inspected element.
+fontinspector.seeAll=Show all fonts used
+
+# LOCALIZATION NOTE (fontinspector.seeAll.tooltip) see fontinspector.seeAll.
+fontinspector.seeAll.tooltip=See all the fonts used in the page
+
+# 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
+
+# LOCALIZATION NOTE (fontinspector.remote) This label indicates that the font is a remote
+# font.
+fontinspector.remote=remote
+
+# LOCALIZATION NOTE (previewHint):
+# This is the label shown as the placeholder in font inspector preview text box.
+fontinspector.previewText=Preview Text
deleted file mode 100644
--- a/devtools/client/locales/en-US/inspector.dtd
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- LOCALIZATION NOTE (inspectorRemoveAttribute.label): This is the label shown in
- the inspector contextual-menu for the item that lets users delete attribute
- from current node -->
-<!ENTITY inspectorRemoveAttribute.label "Remove Attribute">
-<!ENTITY inspectorRemoveAttribute.accesskey "R">
-
-<!ENTITY inspector.selectButton.tooltip "Select element with mouse">
-
-<!-- LOCALIZATION NOTE (inspectorSearchHTML.label3): This is the label that is
- shown as the placeholder for the markup view search in the inspector. -->
-<!ENTITY inspectorSearchHTML.label3 "Search HTML">
-
-<!-- LOCALIZATION NOTE (inspectorAddNode.label): This is the label shown in
- the inspector toolbar for the button that lets users add elements to the
- DOM (as children of the currently selected element). -->
-<!ENTITY inspectorAddNode.label "Create New Node">
-<!ENTITY inspectorAddNode.accesskey "C">
-
-
-<!-- LOCALIZATION NOTE (inspectorEyeDropper.label): A string displayed as the tooltip of
- a button in the inspector which toggles the Eyedropper tool -->
-<!ENTITY inspectorEyeDropper.label "Grab a color from the page">
-
-<!-- LOCALIZATION NOTE (inspectorBreadcrumbsGroup): A string visible only to a
- screen reader and is used to label (using aria-label attribute) a container
- for inspector breadcrumbs -->
-<!ENTITY inspectorBreadcrumbsGroup "Breadcrumbs">
--- a/devtools/client/locales/en-US/inspector.properties
+++ b/devtools/client/locales/en-US/inspector.properties
@@ -308,17 +308,44 @@ inspector.sidebar.fontInspectorTitle=Fon
inspector.sidebar.ruleViewTitle=Rules
# LOCALIZATION NOTE (inspector.sidebar.computedViewTitle):
# This is the title shown in a tab in the side panel of the Inspector panel
# that corresponds to the tool displaying the list of computed CSS values
# used in the page.
inspector.sidebar.computedViewTitle=Computed
-# LOCALIZATION NOTE (inspector.sidebar.layoutViewTitle):
-# This is the title shown in a tab in the side panel of the Inspector panel
-# that corresponds to the tool displaying box model of the selected element.
-inspector.sidebar.layoutViewTitle=Box Model
-
# LOCALIZATION NOTE (inspector.sidebar.animationInspectorTitle):
# This is the title shown in a tab in the side panel of the Inspector panel
# that corresponds to the tool displaying animations defined in the page.
inspector.sidebar.animationInspectorTitle=Animations
+
+# LOCALIZATION NOTE (inspector.eyedropper.label): A string displayed as the tooltip of
+# a button in the inspector which toggles the Eyedropper tool
+inspector.eyedropper.label=Grab a color from the page
+
+# LOCALIZATION NOTE (inspector.breadcrumbs.label): A string visible only to a screen reader and
+# is used to label (using aria-label attribute) a container for inspector breadcrumbs
+inspector.breadcrumbs.label=Breadcrumbs
+
+# LOCALIZATION NOTE (inspector.browserStyles.label): This is the label for the checkbox
+# that specifies whether the styles that are not from the user's stylesheet should be
+# displayed or not.
+inspector.browserStyles.label=Browser styles
+
+# LOCALIZATION NOTE (inspector.filterStyles.placeholder): This is the placeholder that
+# goes in the search box when no search term has been entered.
+inspector.filterStyles.placeholder=Filter Styles
+
+# LOCALIZATION NOTE (inspector.addRule.tooltip): This is the tooltip shown when
+# hovering the `Add new rule` button in the rules view toolbar. This should
+# match ruleView.contextmenu.addNewRule in styleinspector.properties
+inspector.addRule.tooltip=Add new rule
+
+# LOCALIZATION NOTE (inspector.togglePseudo.tooltip): This is the tooltip
+# shown when hovering over the `Toggle Pseudo Class Panel` button in the
+# rule view toolbar.
+inspector.togglePseudo.tooltip=Toggle pseudo-classes
+
+# LOCALIZATION NOTE (inspector.noProperties): In the case where there are no CSS
+# properties to display e.g. due to search criteria this message is
+# displayed.
+inspector.noProperties=No CSS properties found.
deleted file mode 100644
--- a/devtools/client/locales/en-US/layoutview.dtd
+++ /dev/null
@@ -1,28 +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/. -->
-
-<!-- LOCALIZATION NOTE : FILE This file contains the Layout View strings.
- - The Layout View is the panel accessible at the bottom of the Inspector
- - sidebar. -->
-
-<!-- LOCALIZATION NOTE : FILE The correct localization of this file might be to
- - keep it in English, or another language commonly spoken among web developers.
- - You want to make that choice consistent across the developer tools.
- - A good criteria is the language in which you'd find the best
- - documentation on web development on the web. -->
-
-<!-- LOCALIZATION NOTE (*.tooltip): These tooltips are not regular tooltips.
- - The text appears on the bottom right corner of the layout view when
- - the corresponding box is hovered. -->
-
-<!ENTITY layoutViewTitle "Box Model">
-<!ENTITY margin.tooltip "margin">
-<!ENTITY border.tooltip "border">
-<!ENTITY padding.tooltip "padding">
-<!ENTITY content.tooltip "content">
-
-<!-- LOCALIZATION NOTE: This label is displayed as a tooltip that appears when
- - hovering over the button that allows users to edit the position of an
- - element in the page. -->
-<!ENTITY geometry.button.tooltip "Edit position">
deleted file mode 100644
--- a/devtools/client/locales/en-US/styleinspector.dtd
+++ /dev/null
@@ -1,38 +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/. -->
-
-<!-- LOCALIZATION NOTE : FILE The correct localization of this file might be to
- - keep it in English, or another language commonly spoken among web developers.
- - You want to make that choice consistent across the developer tools.
- - A good criteria is the language in which you'd find the best
- - documentation on web development on the web. -->
-
-<!-- LOCALIZATION NOTE (browserStylesLabel): This is the label for the checkbox
- - that specifies whether the styles that are not from the user's stylesheet
- - should be displayed or not. -->
-<!ENTITY browserStylesLabel "Browser styles">
-
-<!-- LOCALIZATION NOTE (filterStylesPlaceholder): This is the placeholder that goes in
- - the search box when no search term has been entered. -->
-<!ENTITY filterStylesPlaceholder "Filter Styles">
-
-<!-- LOCALIZATION NOTE (addRuleButtonTooltip): This is the tooltip shown when
- - hovering the `Add new rule` button in the rules view toolbar. This should
- - match ruleView.contextmenu.addNewRule in styleinspector.properties -->
-<!ENTITY addRuleButtonTooltip "Add new rule">
-
-<!-- LOCALIZATION NOTE (selectedElementLabel): This is the label for the path of
- - the highlighted element in the web page. This path is based on the document
- - tree. -->
-<!ENTITY selectedElementLabel "Selected element:">
-
-<!-- LOCALIZATION NOTE (togglePseudoClassPanel): This is the tooltip
- - shown when hovering over the `Toggle Pseudo Class Panel` button in the
- - rule view toolbar. -->
-<!ENTITY togglePseudoClassPanel "Toggle pseudo-classes">
-
-<!-- LOCALIZATION NOTE (noPropertiesFound): In the case where there are no CSS
- - properties to display e.g. due to search criteria this message is
- - displayed. -->
-<!ENTITY noPropertiesFound "No CSS properties found.">
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -23,33 +23,30 @@
through it, and the outline is hidden. */
#computedview-container-focusable {
height: 100%;
outline: none;
}
#computedview-toolbar {
display: flex;
+ align-items: center;
}
#browser-style-checkbox {
/* Bug 1200073 - extra space before the browser styles checkbox so
they aren't squished together in a small window. Put also
an extra space after. */
margin-inline-start: 5px;
margin-inline-end: 5px;
+
}
#browser-style-checkbox-label {
margin-right: 5px;
-
- /* Vertically center the 'Browser styles' checkbox in the
- Computed panel with its label. */
- display: flex;
- align-items: center;
}
#propertyContainer {
-moz-user-select: text;
overflow-y: auto;
overflow-x: hidden;
flex: auto;
}
--- a/devtools/shared/locales/en-US/styleinspector.properties
+++ b/devtools/shared/locales/en-US/styleinspector.properties
@@ -48,22 +48,16 @@ rule.userAgentStyles=(user agent)
# LOCALIZATION NOTE (rule.pseudoElement): Shown for CSS rules
# pseudo element header
rule.pseudoElement=Pseudo-elements
# LOCALIZATION NOTE (rule.pseudoElement): Shown for CSS rules
# pseudo element header
rule.selectedElement=This Element
-# LOCALIZATION NOTE (helpLinkTitle): For each style property
-# the user can hover it and get a help link button which allows one to
-# quickly jump to the documentation from the Mozilla Developer Network site.
-# This is the link title shown in the hover tooltip.
-helpLinkTitle=Read the documentation for this property
-
# LOCALIZATION NOTE (rule.warning.title): When an invalid property value is
# entered into the rule view a warning icon is displayed. This text is used for
# the title attribute of the warning icon.
rule.warning.title=Invalid property value
# LOCALIZATION NOTE (rule.filterProperty.title): Text displayed in the tooltip
# of the search button that is shown next to a property that has been overridden
# in the rule view.
@@ -137,17 +131,17 @@ styleinspector.contextmenu.toggleOrigSou
styleinspector.contextmenu.showMdnDocs=Show MDN Docs
# LOCALIZATION NOTE (styleinspector.contextmenu.showMdnDocs.accessKey): Access key for
# the rule view context menu "Show MDN docs" entry.
styleinspector.contextmenu.showMdnDocs.accessKey=D
# LOCALIZATION NOTE (styleinspector.contextmenu.addNewRule): Text displayed in the
# rule view context menu for adding a new rule to the element.
-# This should match addRuleButton.tooltip in styleinspector.dtd
+# This should match inspector.addRule.tooltip in inspector.properties
styleinspector.contextmenu.addNewRule=Add New Rule
# LOCALIZATION NOTE (styleinspector.contextmenu.addRule.accessKey): Access key for
# the rule view context menu "Add rule" entry.
styleinspector.contextmenu.addNewRule.accessKey=R
# LOCALIZATION NOTE (styleinspector.contextmenu.selectAll): Text displayed in the
# computed view context menu.
