Bug 977169 - Apply aria-label "x panel" to Toolbox r=bgrins f=marcoz

browser/devtools/framework/toolbox.js

@@ -264,6 +264,7 @@ Toolbox.prototype = {
       // Load the toolbox-level actor fronts and utilities now
       this._target.makeRemote().then(() => {
         iframe.setAttribute("src", this._URL);
+        iframe.setAttribute("aria-label", toolboxStrings("toolbox.label"))
         let domHelper = new DOMHelpers(iframe.contentWindow);
         domHelper.onceDOMReady(domReady);
       });
@@ -808,6 +809,9 @@ Toolbox.prototype = {
     };
 
     iframe.setAttribute("src", definition.url);
+    if (definition.panelLabel) {
+      iframe.setAttribute("aria-label", definition.panelLabel);
+    }
 
     // Depending on the host, iframe.contentWindow is not always
     // defined at this moment. If it is not defined, we use an

browser/devtools/main.js

@@ -70,6 +70,7 @@ Tools.options = {
   icon: "chrome://browser/skin/devtools/tool-options.svg",
   invertIconForLightTheme: true,
   bgTheme: "theme-body",
+  panelLabel: l10n("options.panelLabel", toolboxStrings),
   tooltip: l10n("optionsButton.tooltip", toolboxStrings),
   inMenu: false,
   isTargetSupported: function(target) {
@@ -92,6 +93,7 @@ Tools.webConsole = {
   url: "chrome://browser/content/devtools/webconsole.xul",
   label: l10n("ToolboxTabWebconsole.label", webConsoleStrings),
   menuLabel: l10n("MenuWebconsole.label", webConsoleStrings),
+  panelLabel: l10n("ToolboxWebConsole.panelLabel", webConsoleStrings),
   tooltip: l10n("ToolboxWebconsole.tooltip", webConsoleStrings),
   inMenu: true,
   commands: "devtools/webconsole/console-commands",
@@ -123,6 +125,7 @@ Tools.inspector = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
+  panelLabel: l10n("inspector.panelLabel", inspectorStrings),
   tooltip: l10n("inspector.tooltip", inspectorStrings),
   inMenu: true,
   commands: [
@@ -157,6 +160,7 @@ Tools.jsdebugger = {
   highlightedicon: "chrome://browser/skin/devtools/tool-debugger-paused.svg",
   url: "chrome://browser/content/devtools/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
+  panelLabel: l10n("ToolboxDebugger.panelLabel", debuggerStrings),
   tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
   inMenu: true,
   commands: "devtools/debugger/debugger-commands",
@@ -181,6 +185,7 @@ Tools.styleEditor = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
+  panelLabel: l10n("ToolboxStyleEditor.panelLabel", styleEditorStrings),
   tooltip: l10n("ToolboxStyleEditor.tooltip2", styleEditorStrings),
   inMenu: true,
   commands: "devtools/styleeditor/styleeditor-commands",
@@ -203,6 +208,7 @@ Tools.shaderEditor = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/shadereditor.xul",
   label: l10n("ToolboxShaderEditor.label", shaderEditorStrings),
+  panelLabel: l10n("ToolboxShaderEditor.panelLabel", shaderEditorStrings),
   tooltip: l10n("ToolboxShaderEditor.tooltip", shaderEditorStrings),
 
   isTargetSupported: function(target) {
@@ -223,6 +229,7 @@ Tools.canvasDebugger = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/canvasdebugger.xul",
   label: l10n("ToolboxCanvasDebugger.label", canvasDebuggerStrings),
+  panelLabel: l10n("ToolboxCanvasDebugger.panelLabel", canvasDebuggerStrings),
   tooltip: l10n("ToolboxCanvasDebugger.tooltip", canvasDebuggerStrings),
   isTargetSupported: function(target) {
     return !target.isAddon;
@@ -241,6 +248,7 @@ Tools.webAudioEditor = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/webaudioeditor.xul",
   label: l10n("ToolboxWebAudioEditor1.label", webAudioEditorStrings),
+  panelLabel: l10n("ToolboxWebAudioEditor1.panelLabel", webAudioEditorStrings),
   tooltip: l10n("ToolboxWebAudioEditor1.tooltip", webAudioEditorStrings),
   isTargetSupported: function(target) {
     return !target.isAddon;
@@ -262,6 +270,7 @@ Tools.jsprofiler = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/profiler.xul",
   label: l10n("profiler.label", profilerStrings),
+  panelLabel: l10n("profiler.panelLabel", profilerStrings),
   tooltip: l10n("profiler.tooltip2", profilerStrings),
   inMenu: true,
   commands: "devtools/profiler/commands",
@@ -287,6 +296,7 @@ Tools.netMonitor = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/netmonitor.xul",
   label: l10n("netmonitor.label", netMonitorStrings),
+  panelLabel: l10n("netmonitor.panelLabel", netMonitorStrings),
   tooltip: l10n("netmonitor.tooltip", netMonitorStrings),
   inMenu: true,
 
@@ -309,6 +319,7 @@ Tools.scratchpad = {
   invertIconForLightTheme: true,
   url: "chrome://browser/content/devtools/scratchpad.xul",
   label: l10n("scratchpad.label", scratchpadStrings),
+  panelLabel: l10n("scratchpad.panelLabel", scratchpadStrings),
   tooltip: l10n("scratchpad.tooltip", scratchpadStrings),
   inMenu: false,
   commands: "devtools/scratchpad/scratchpad-commands",

browser/locales/en-US/chrome/browser/devtools/canvasdebugger.properties

@@ -15,6 +15,10 @@
 # displayed inside the developer tools window and in the Developer Tools Menu.
 ToolboxCanvasDebugger.label=Canvas
 
+# LOCALIZATION NOTE (ToolboxCanvasDebugger.panelLabel):
+# This is used as the label for the toolbox panel.
+ToolboxCanvasDebugger.panelLabel=Canvas Panel
+
 # LOCALIZATION NOTE (ToolboxCanvasDebugger.tooltip):
 # This string is displayed in the tooltip of the tab when the Shader Editor is
 # displayed inside the developer tools window.

browser/locales/en-US/chrome/browser/devtools/debugger.properties

@@ -15,6 +15,10 @@
 # displayed inside the developer tools window and in the Developer Tools Menu.
 ToolboxDebugger.label=Debugger
 
+# LOCALIZATION NOTE (ToolboxDebugger.panelLabel):
+# This is used as the label for the toolbox panel.
+ToolboxDebugger.panelLabel=Debugger Panel
+
 # LOCALIZATION NOTE (DebuggerWindowTitle):
 # The title displayed for the debugger window.
 DebuggerWindowTitle=Browser Debugger

browser/locales/en-US/chrome/browser/devtools/inspector.properties

@@ -36,6 +36,7 @@ nodeMenu.tooltiptext=Node operations
 inspector.label=Inspector
 inspector.commandkey=C
 inspector.accesskey=I
+inspector.panelLabel=Inspector Panel
 
 # LOCALIZATION NOTE (markupView.more.*)
 # When there are too many nodes to load at once, we will offer to

browser/locales/en-US/chrome/browser/devtools/netmonitor.properties

@@ -15,6 +15,10 @@
 # displayed inside the developer tools window and in the Developer Tools Menu.
 netmonitor.label=Network
 
+# LOCALIZATION NOTE (netmonitor.panelLabel):
+# This is used as the label for the toolbox panel.
+netmonitor.panelLabel=Network Panel
+
 # LOCALIZATION NOTE (netmonitor.commandkey, netmonitor.accesskey)
 # Used for the menuitem in the tool menu
 netmonitor.commandkey=Q

browser/locales/en-US/chrome/browser/devtools/profiler.properties

@@ -15,6 +15,10 @@
 # displayed inside the developer tools window and in the Developer Tools Menu.
 profiler.label=Profiler
 
+# LOCALIZATION NOTE (profiler.panelLabel):
+# This is used as the label for the toolbox panel.
+profiler.panelLabel=Profiler Panel
+
 # LOCALIZATION NOTE (profiler2.commandkey, profiler.accesskey)
 # Used for the menuitem in the tool menu
 profiler2.commandkey=VK_F5

browser/locales/en-US/chrome/browser/devtools/scratchpad.properties

@@ -95,6 +95,10 @@ connectionTimeout=Connection timeout. Check the Error Console on both ends for p
 # in the Developer Tools Menu.
 scratchpad.label=Scratchpad
 
+# LOCALIZATION NOTE (scratchpad.panelLabel): this is used as the
+# label for the toolbox panel.
+scratchpad.panelLabel=Scratchpad Panel
+
 # LOCALIZATION NOTE (scratchpad.tooltip):  This string is displayed in the
 # tooltip of the tab when the Scratchpad is displayed inside the developer tools
 # window.

browser/locales/en-US/chrome/browser/devtools/shadereditor.properties

@@ -15,6 +15,10 @@
 # displayed inside the developer tools window and in the Developer Tools Menu.
 ToolboxShaderEditor.label=Shader Editor
 
+# LOCALIZATION NOTE (ToolboxShaderEditor.panelLabel):
+# This is used as the label for the toolbox panel.
+ToolboxShaderEditor.panelLabel=Shader Editor Panel
+
 # LOCALIZATION NOTE (ToolboxShaderEditor.tooltip):
 # This string is displayed in the tooltip of the tab when the Shader Editor is
 # displayed inside the developer tools window.

browser/locales/en-US/chrome/browser/devtools/styleeditor.properties

@@ -73,6 +73,10 @@ saveStyleSheet.commandkey=S
 # displayed inside the developer tools window and in the Developer Tools Menu.
 ToolboxStyleEditor.label=Style Editor
 
+# LOCALIZATION NOTE (ToolboxStyleEditor.panelLabel):
+# This is used as the label for the toolbox panel.
+ToolboxStyleEditor.panelLabel=Style Editor Panel
+
 # LOCALIZATION NOTE (ToolboxStyleEditor.tooltip2):
 # This string is displayed in the tooltip of the tab when the style editor is
 # displayed inside the developer tools window.

browser/locales/en-US/chrome/browser/devtools/toolbox.properties

@@ -35,10 +35,18 @@ toolbox.titleTemplate=%1$S - %2$S
 # name when no tool is selected.
 toolbox.defaultTitle=Developer Tools
 
+# LOCALIZATION NOTE (toolbox.label): This is used as the label for the
+# toolbox as a whole
+toolbox.label=Developer Tools
+
 # LOCALIZATION NOTE (optionsButton.tooltip): This is used as the tooltip
 # for the options panel tab.
 optionsButton.tooltip=Toolbox Options
 
+# LOCALIZATION NOTE (options.panelLabel): This is used as the label for the
+# toolbox panel.
+options.panelLabel=Toolbox Options Panel
+
 # LOCALIZATION NOTE (options.toolNotSupported): This is the template
 # used to add a * marker to the label for the Options Panel tool checkbox for the
 # tool which is not supported for the current toolbox target.

browser/locales/en-US/chrome/browser/devtools/webaudioeditor.properties

@@ -16,6 +16,10 @@
 # is displayed inside the developer tools window and in the Developer Tools Menu.
 ToolboxWebAudioEditor1.label=Web Audio
 
+# LOCALIZATION NOTE (ToolboxWebAudioEditor1.panelLabel):
+# This is used as the label for the toolbox panel.
+ToolboxWebAudioEditor1.panelLabel=Web Audio Panel
+
 # LOCALIZATION NOTE (ToolboxWebAudioEditor1.tooltip):
 # This string is displayed in the tooltip of the tab when the Web Audio Editor is
 # displayed inside the developer tools window.

browser/locales/en-US/chrome/browser/devtools/webconsole.properties

@@ -167,6 +167,10 @@ MenuWebconsole.label=Web Console
 # label of the tab in the devtools window.
 ToolboxTabWebconsole.label=Console
 
+# LOCALIZATION NOTE (ToolboxWebConsole.panelLabel): the string used as the
+# label for the toolbox panel.
+ToolboxWebConsole.panelLabel=Console Panel
+
 # LOCALIZATION NOTE (ToolboxWebconsole.tooltip): the string displayed in the
 # tooltip of the tab when the Web Console is displayed inside the developer
 # tools window.