Bug 1533863 - Use icons instead of text for buttons in about:config r=fluent-reviewers,jaws,flod
authorMark Striemer <mstriemer@mozilla.com>
Thu, 29 Aug 2019 21:03:13 +0000
changeset 554464 144a7271e9c385143ae9362b09fb30e69b8553dc
parent 554463 0667a378d933a6386dc338e20b1bf3aefe187870
child 554465 30a9a7af1b7bb70ca975a43b5a61135c9287faef
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfluent-reviewers, jaws, flod
bugs1533863
milestone70.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 1533863 - Use icons instead of text for buttons in about:config r=fluent-reviewers,jaws,flod Differential Revision: https://phabricator.services.mozilla.com/D43627
browser/components/aboutconfig/content/aboutconfig.css
browser/components/aboutconfig/content/aboutconfig.js
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/icons/edit.svg
browser/components/aboutlogins/jar.mn
browser/locales/en-US/browser/aboutConfig.ftl
browser/themes/shared/icons/edit.svg
browser/themes/shared/icons/toggle.svg
browser/themes/shared/jar.inc.mn
python/l10n/fluent_migrations/bug_1533863_aboutconfig_button_labels.py
--- a/browser/components/aboutconfig/content/aboutconfig.css
+++ b/browser/components/aboutconfig/content/aboutconfig.css
@@ -133,8 +133,47 @@ body.config-warning {
 }
 
 td.cell-value > form > input[type="text"],
 td.cell-value > form > input[type="number"] {
   -moz-appearance: textfield;
   width: 100%;
   box-sizing: border-box;
 }
+
+.button-add,
+.button-save,
+.button-edit,
+.button-toggle,
+.button-delete,
+.button-reset {
+  -moz-context-properties: fill;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  fill: currentColor;
+  min-width: auto;
+  width: 32px;
+}
+
+.button-add {
+  background-image: url("chrome://browser/skin/add.svg");
+}
+
+.button-save {
+  background-image: url("chrome://global/skin/icons/check.svg");
+}
+
+.button-edit {
+  background-image: url("chrome://browser/skin/edit.svg");
+}
+
+.button-toggle {
+  background-image: url("chrome://browser/skin/toggle.svg");
+}
+
+.button-delete {
+  background-image: url("chrome://global/skin/icons/delete.svg");
+}
+
+.button-reset {
+  background-image: url("chrome://browser/skin/undo.svg");
+}
--- a/browser/components/aboutconfig/content/aboutconfig.js
+++ b/browser/components/aboutconfig/content/aboutconfig.js
@@ -205,21 +205,24 @@ class PrefRow {
         value: "" + this.value,
       });
       outerSpan.appendChild(span);
       this.valueCell.textContent = "";
       this.valueCell.append(outerSpan);
       if (this.type == "Boolean") {
         document.l10n.setAttributes(
           this.editButton,
-          "about-config-pref-toggle"
+          "about-config-pref-toggle-button"
         );
         this.editButton.className = "button-toggle";
       } else {
-        document.l10n.setAttributes(this.editButton, "about-config-pref-edit");
+        document.l10n.setAttributes(
+          this.editButton,
+          "about-config-pref-edit-button"
+        );
         this.editButton.className = "button-edit";
       }
       this.editButton.removeAttribute("form");
       delete this.inputField;
     } else {
       this.valueCell.textContent = "";
       // The form is needed for the validation report to appear, but we need to
       // prevent the associated button from reloading the page.
@@ -233,17 +236,20 @@ class PrefRow {
           this.inputField.type = "number";
           this.inputField.required = true;
           this.inputField.min = -2147483648;
           this.inputField.max = 2147483647;
         } else {
           this.inputField.type = "text";
         }
         form.appendChild(this.inputField);
-        document.l10n.setAttributes(this.editButton, "about-config-pref-save");
+        document.l10n.setAttributes(
+          this.editButton,
+          "about-config-pref-save-button"
+        );
         this.editButton.className = "primary button-save";
       } else {
         delete this.inputField;
         for (let type of ["Boolean", "Number", "String"]) {
           let radio = document.createElement("input");
           radio.type = "radio";
           radio.name = "type";
           radio.value = type;
@@ -265,38 +271,41 @@ class PrefRow {
               this.value = true;
             } else if (type == "Number") {
               this.value = 0;
             } else {
               this.value = "";
             }
           }
         });
-        document.l10n.setAttributes(this.editButton, "about-config-pref-add");
+        document.l10n.setAttributes(
+          this.editButton,
+          "about-config-pref-add-button"
+        );
         this.editButton.className = "button-add";
       }
       this.valueCell.appendChild(form);
       this.editButton.setAttribute("form", "form-edit");
     }
     this.editButton.disabled = this.isLocked;
     if (!this.isLocked && this.hasUserValue) {
       if (!this.resetButton) {
         this.resetButton = document.createElement("button");
         this.resetCell.appendChild(this.resetButton);
       }
       if (!this.hasDefaultValue) {
         document.l10n.setAttributes(
           this.resetButton,
-          "about-config-pref-delete"
+          "about-config-pref-delete-button"
         );
-        this.resetButton.className = "";
+        this.resetButton.className = "button-delete";
       } else {
         document.l10n.setAttributes(
           this.resetButton,
-          "about-config-pref-reset"
+          "about-config-pref-reset-button"
         );
         this.resetButton.className = "button-reset";
       }
     } else if (this.resetButton) {
       this.resetButton.remove();
       delete this.resetButton;
     }
 
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -79,17 +79,17 @@ input[type="url"][readOnly] {
 }
 
 .delete-button {
   background-image: url("chrome://global/skin/icons/delete.svg");
   padding-inline-start: 30px; /* 8px on each side, and 14px for icon width */
 }
 
 .edit-button {
-  background-image: url("chrome://browser/content/aboutlogins/icons/edit.svg");
+  background-image: url("chrome://browser/skin/edit.svg");
   padding-inline-start: 32px; /* 8px on each side, and 16px for icon width */
 }
 
 input[type="url"][readOnly] {
   color: var(--in-content-link-color) !important;
   cursor: pointer;
 }
 
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -17,17 +17,16 @@ browser.jar:
   content/browser/aboutlogins/components/login-footer.js       (content/components/login-footer.js)
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
   content/browser/aboutlogins/components/login-list.css        (content/components/login-list.css)
   content/browser/aboutlogins/components/login-list.js         (content/components/login-list.js)
   content/browser/aboutlogins/components/login-list-item.js    (content/components/login-list-item.js)
   content/browser/aboutlogins/components/menu-button.css       (content/components/menu-button.css)
   content/browser/aboutlogins/components/menu-button.js        (content/components/menu-button.js)
-  content/browser/aboutlogins/icons/edit.svg          (content/icons/edit.svg)
   content/browser/aboutlogins/icons/favicon.svg       (content/icons/favicon.svg)
   content/browser/aboutlogins/icons/hide-password.svg (content/icons/hide-password.svg)
   content/browser/aboutlogins/icons/show-password.svg (content/icons/show-password.svg)
   content/browser/aboutlogins/icons/intro-illustration.svg (content/icons/intro-illustration.svg)
   content/browser/aboutlogins/aboutLogins.css   (content/aboutLogins.css)
   content/browser/aboutlogins/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)
   content/browser/aboutlogins/aboutLoginsUtils.js (content/aboutLoginsUtils.js)
--- a/browser/locales/en-US/browser/aboutConfig.ftl
+++ b/browser/locales/en-US/browser/aboutConfig.ftl
@@ -9,22 +9,28 @@ about-config-warning-checkbox = Annoy me
 about-config-warning-button = I accept the risk
 
 about-config2-title = Advanced Configurations
 
 about-config-search-input =
     .placeholder = Search
 about-config-show-all = Show All
 
-about-config-pref-add = Add
-about-config-pref-toggle = Toggle
-about-config-pref-edit = Edit
-about-config-pref-save = Save
-about-config-pref-reset = Reset
-about-config-pref-delete = Delete
+about-config-pref-add-button =
+    .title = Add
+about-config-pref-toggle-button =
+    .title = Toggle
+about-config-pref-edit-button =
+    .title = Edit
+about-config-pref-save-button =
+    .title = Save
+about-config-pref-reset-button =
+    .title = Reset
+about-config-pref-delete-button =
+    .title = Delete
 
 ## Labels for the type selection radio buttons shown when adding preferences.
 about-config-pref-add-type-boolean = Boolean
 about-config-pref-add-type-number = Number
 about-config-pref-add-type-string = String
 
 ## Preferences with a non-default value are differentiated visually, and at the
 ## same time the state is made accessible to screen readers using an aria-label
rename from browser/components/aboutlogins/content/icons/edit.svg
rename to browser/themes/shared/icons/edit.svg
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/toggle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill">
+  <path d="M15 9H.5c-.39.39-.39 1.61 0 2l4.793 4.707a1 1 0 0 0 1.414-1.414L3.414 11H15a1 1 0 0 0 0-2zM1 6.988h14.5c.39-.39.39-1.61 0-2L10.707.28a1 1 0 0 0-1.414 1.414l3.293 3.293H1a1 1 0 0 0 0 2z"/>
+</svg>
+
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -163,16 +163,17 @@
   skin/classic/browser/check-animation.svg            (../shared/icons/check-animation.svg)
   skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
   skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
   skin/classic/browser/device-phone.svg               (../shared/icons/device-phone.svg)
   skin/classic/browser/device-tablet.svg              (../shared/icons/device-tablet.svg)
   skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
   skin/classic/browser/device-tv.svg                  (../shared/icons/device-tv.svg)
   skin/classic/browser/device-vr.svg                  (../shared/icons/device-vr.svg)
+  skin/classic/browser/edit.svg                       (../shared/icons/edit.svg)
   skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
   skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
   skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
   skin/classic/browser/folder.svg                     (../shared/icons/folder.svg)
   skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
   skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
   skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
   skin/classic/browser/fullscreen-exit.svg            (../shared/icons/fullscreen-exit.svg)
@@ -212,16 +213,17 @@
   skin/classic/browser/sidebars-right.svg             (../shared/icons/sidebars-right.svg)
 #ifndef XP_LINUX
   skin/classic/browser/sort.svg                       (../shared/icons/sort.svg)
 #endif
   skin/classic/browser/stop.svg                       (../shared/icons/stop.svg)
   skin/classic/browser/stop-to-reload.svg             (../shared/icons/stop-to-reload.svg)
   skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
   skin/classic/browser/tab.svg                        (../shared/icons/tab.svg)
+  skin/classic/browser/toggle.svg                     (../shared/icons/toggle.svg)
   skin/classic/browser/undo.svg                       (../shared/icons/undo.svg)
   skin/classic/browser/unpin-tab.svg                  (../shared/icons/unpin-tab.svg)
   skin/classic/browser/whatsnew.svg                   (../shared/icons/whatsnew.svg)
   skin/classic/browser/window.svg                     (../shared/icons/window.svg)
   skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
   skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
 
 
new file mode 100644
--- /dev/null
+++ b/python/l10n/fluent_migrations/bug_1533863_aboutconfig_button_labels.py
@@ -0,0 +1,37 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+import fluent.syntax.ast as FTL
+from fluent.migrate.helpers import transforms_from
+from fluent.migrate import COPY_PATTERN
+
+TARGET_FILE = "browser/browser/aboutConfig.ftl"
+SOURCE_FILE = TARGET_FILE
+
+
+def migrate(ctx):
+    """Bug 1533863 - Move about:config buttons text to title, part {index}"""
+
+    ctx.add_transforms(
+        TARGET_FILE,
+        SOURCE_FILE,
+        transforms_from(
+"""
+about-config-pref-add-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-add")}
+about-config-pref-toggle-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-toggle")}
+about-config-pref-edit-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-edit")}
+about-config-pref-save-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-save")}
+about-config-pref-reset-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-reset")}
+about-config-pref-delete-button =
+    .title = {COPY_PATTERN(from_path, "about-config-pref-delete")}
+""",
+        from_path=SOURCE_FILE),
+    )