From 6d5e17f4515e7c21c18bf7cf03c9d47c6f3e90cc Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Wed, 21 Sep 2016 12:15:30 +0200 Subject: [PATCH] Bug 1294186 - Migrate inspector.xul from DTDs to .properties files;r=pbro MozReview-Commit-ID: 7YE3QzqiPoG --HG-- extra : rebase_source : 5e8274100ca70661087dad13d7f73d31218b7f27 --- devtools/client/inspector/inspector-panel.js | 5 +- devtools/client/inspector/inspector.xhtml | 98 +++++++++---------- .../client/locales/en-US/boxmodel.properties | 37 +++++++ .../client/locales/en-US/font-inspector.dtd | 16 --- .../locales/en-US/font-inspector.properties | 29 ++++++ devtools/client/locales/en-US/inspector.dtd | 27 ----- .../client/locales/en-US/inspector.properties | 37 ++++++- devtools/client/locales/en-US/layoutview.dtd | 28 ------ .../client/locales/en-US/styleinspector.dtd | 38 ------- devtools/client/themes/computed.css | 7 +- .../locales/en-US/styleinspector.properties | 8 +- 11 files changed, 154 insertions(+), 176 deletions(-) create mode 100644 devtools/client/locales/en-US/boxmodel.properties delete mode 100644 devtools/client/locales/en-US/font-inspector.dtd create mode 100644 devtools/client/locales/en-US/font-inspector.properties delete mode 100644 devtools/client/locales/en-US/inspector.dtd delete mode 100644 devtools/client/locales/en-US/layoutview.dtd delete mode 100644 devtools/client/locales/en-US/styleinspector.dtd diff --git a/devtools/client/inspector/inspector-panel.js b/devtools/client/inspector/inspector-panel.js index 1b2811230148..33ccf246bbd4 100644 --- a/devtools/client/inspector/inspector-panel.js +++ b/devtools/client/inspector/inspector-panel.js @@ -31,7 +31,7 @@ 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"); @@ -119,6 +119,9 @@ 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(); diff --git a/devtools/client/inspector/inspector.xhtml b/devtools/client/inspector/inspector.xhtml index 967ae63d87ae..61f07bae83e8 100644 --- a/devtools/client/inspector/inspector.xhtml +++ b/devtools/client/inspector/inspector.xhtml @@ -18,12 +18,7 @@ - %inspectorDTD; - %styleinspectorDTD; - %fontinspectorDTD; - %layoutviewDTD; -]> + @@ -38,29 +33,27 @@ - - + + + data-localization="placeholder=inspectorSearchHTML.label3"/> + role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0" /> @@ -80,19 +73,20 @@ - + + data-localization="placeholder=inspector.filterStyles.placeholder"/> - - + + - + + data-localization="placeholder=inspector.filterStyles.placeholder"/> - - &browserStylesLabel; + + - + - &layoutViewTitle; + - &margin.tooltip; - - &border.tooltip; - - &padding.tooltip; - - + + + + + + + @@ -161,13 +157,16 @@ - + + + - + @@ -181,22 +180,21 @@ - + - + - + - &showAllFontsUsed; + @@ -210,13 +208,15 @@ - &system; - &remote; + + - &usedAs; "" + + "" + diff --git a/devtools/client/locales/en-US/boxmodel.properties b/devtools/client/locales/en-US/boxmodel.properties new file mode 100644 index 000000000000..cea31ff05778 --- /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 diff --git a/devtools/client/locales/en-US/font-inspector.dtd b/devtools/client/locales/en-US/font-inspector.dtd deleted file mode 100644 index 342a9098ef5b..000000000000 --- a/devtools/client/locales/en-US/font-inspector.dtd +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - diff --git a/devtools/client/locales/en-US/font-inspector.properties b/devtools/client/locales/en-US/font-inspector.properties new file mode 100644 index 000000000000..6b1f3bafa631 --- /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 diff --git a/devtools/client/locales/en-US/inspector.dtd b/devtools/client/locales/en-US/inspector.dtd deleted file mode 100644 index ba0c1abb20dd..000000000000 --- a/devtools/client/locales/en-US/inspector.dtd +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties index 0495c413d867..be1590e1e998 100644 --- a/devtools/client/locales/en-US/inspector.properties +++ b/devtools/client/locales/en-US/inspector.properties @@ -313,12 +313,39 @@ inspector.sidebar.ruleViewTitle=Rules # 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. diff --git a/devtools/client/locales/en-US/layoutview.dtd b/devtools/client/locales/en-US/layoutview.dtd deleted file mode 100644 index 50dfcde34f59..000000000000 --- a/devtools/client/locales/en-US/layoutview.dtd +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/devtools/client/locales/en-US/styleinspector.dtd b/devtools/client/locales/en-US/styleinspector.dtd deleted file mode 100644 index 57fb1ac229f6..000000000000 --- a/devtools/client/locales/en-US/styleinspector.dtd +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css index 40e24c282fc6..9f4d5f183684 100644 --- a/devtools/client/themes/computed.css +++ b/devtools/client/themes/computed.css @@ -28,6 +28,7 @@ #computedview-toolbar { display: flex; + align-items: center; } #browser-style-checkbox { @@ -36,15 +37,11 @@ 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 { diff --git a/devtools/shared/locales/en-US/styleinspector.properties b/devtools/shared/locales/en-US/styleinspector.properties index b56f36437512..c1c9d53590f5 100644 --- a/devtools/shared/locales/en-US/styleinspector.properties +++ b/devtools/shared/locales/en-US/styleinspector.properties @@ -53,12 +53,6 @@ rule.pseudoElement=Pseudo-elements # 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. @@ -142,7 +136,7 @@ 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