Bug 1270010 - Add tooltips to doorhangers noting what they're doing; r=pbro
authorAndrew Chen <andch43212@gmail.com>
Tue, 24 May 2016 18:07:00 +0200
changeset 338490 640f046e0e79d18aa0d4c0efac7e9f5d365f09a0
parent 338489 7275ea8867397514d89c360b7397b7dcabd0b4a2
child 338491 c79906974f052c8060195d4d81e067f3bb4cd338
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1270010
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1270010 - Add tooltips to doorhangers noting what they're doing; r=pbro
devtools/client/inspector/rules/views/text-property-editor.js
devtools/shared/locales/en-US/styleinspector.properties
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -338,55 +338,63 @@ TextPropertyEditor.prototype = {
         // knows about
         this.ruleView.tooltips.colorPicker.addSwatch(span, {
           onShow: this._onStartEditing,
           onPreview: this._onSwatchPreview,
           onCommit: this._onSwatchCommit,
           onRevert: this._onSwatchRevert
         });
         span.on("unit-change", this._onSwatchCommit);
+        let title = CssLogic.l10n("rule.colorSwatch.tooltip");
+        span.setAttribute("title", title);
       }
     }
 
     // Attach the cubic-bezier tooltip to the bezier swatches
     this._bezierSwatchSpans =
       this.valueSpan.querySelectorAll("." + bezierSwatchClass);
     if (this.ruleEditor.isEditable) {
       for (let span of this._bezierSwatchSpans) {
         // Adding this swatch to the list of swatches our colorpicker
         // knows about
         this.ruleView.tooltips.cubicBezier.addSwatch(span, {
           onShow: this._onStartEditing,
           onPreview: this._onSwatchPreview,
           onCommit: this._onSwatchCommit,
           onRevert: this._onSwatchRevert
         });
+        let title = CssLogic.l10n("rule.bezierSwatch.tooltip");
+        span.setAttribute("title", title);
       }
     }
 
     // Attach the filter editor tooltip to the filter swatch
     let span = this.valueSpan.querySelector("." + filterSwatchClass);
     if (this.ruleEditor.isEditable) {
       if (span) {
         parserOptions.filterSwatch = true;
 
         this.ruleView.tooltips.filterEditor.addSwatch(span, {
           onShow: this._onStartEditing,
           onPreview: this._onSwatchPreview,
           onCommit: this._onSwatchCommit,
           onRevert: this._onSwatchRevert
         }, outputParser, parserOptions);
+        let title = CssLogic.l10n("rule.filterSwatch.tooltip");
+        span.setAttribute("title", title);
       }
     }
 
     this.angleSwatchSpans =
       this.valueSpan.querySelectorAll("." + angleSwatchClass);
     if (this.ruleEditor.isEditable) {
       for (let angleSpan of this.angleSwatchSpans) {
         angleSpan.on("unit-change", this._onSwatchCommit);
+        let title = CssLogic.l10n("rule.angleSwatch.tooltip");
+        angleSpan.setAttribute("title", title);
       }
     }
 
     // Populate the computed styles.
     this._updateComputed();
 
     // Update the rule property highlight.
     this.ruleView._updatePropertyHighlight(this);
--- a/devtools/shared/locales/en-US/styleinspector.properties
+++ b/devtools/shared/locales/en-US/styleinspector.properties
@@ -72,16 +72,32 @@ rule.filterProperty.title=Filter rules c
 # LOCALIZATION NOTE (ruleView.empty): Text displayed when the highlighter is
 # first opened and there's no node selected in the rule view.
 rule.empty=No element selected.
 
 # LOCALIZATION NOTE (ruleView.selectorHighlighter.tooltip): Text displayed in a
 # tooltip when the mouse is over a selector highlighter icon in the rule view.
 rule.selectorHighlighter.tooltip=Highlight all elements matching this selector
 
+# LOCALIZATION NOTE (rule.colorSwatch.tooltip): Text displayed in a tooltip
+# when the mouse is over a color swatch in the rule view.
+rule.colorSwatch.tooltip=Click to open the color picker, shift+click to change the color format
+
+# LOCALIZATION NOTE (rule.bezierSwatch.tooltip): Text displayed in a tooltip
+# when the mouse is over a cubic-bezier swatch in the rule view.
+rule.bezierSwatch.tooltip=Click to open the timing-function editor
+
+# LOCALIZATION NOTE (rule.filterSwatch.tooltip): Text displayed in a tooltip
+# when the mouse is over a filter swatch in the rule view.
+rule.filterSwatch.tooltip=Click to open the filter editor
+
+# LOCALIZATION NOTE (rule.angleSwatch.tooltip): Text displayed in a tooltip
+# when the mouse is over a angle swatch in the rule view.
+rule.angleSwatch.tooltip=Shift+click to change the angle format
+
 # LOCALIZATION NOTE (styleinspector.contextmenu.copyColor): Text displayed in the rule
 # and computed view context menu when a color value was clicked.
 styleinspector.contextmenu.copyColor=Copy Color
 
 # LOCALIZATION NOTE (styleinspector.contextmenu.copyColor.accessKey): Access key for
 # the rule and computed view context menu "Copy Color" entry.
 styleinspector.contextmenu.copyColor.accessKey=L