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

--HG--
rename : browser/components/aboutlogins/content/icons/edit.svg => browser/themes/shared/icons/edit.svg
extra : moz-landing-system : lando

browser/components/aboutconfig/content/aboutconfig.css

@@ -138,3 +138,42 @@ td.cell-value > form > input[type="number"] {
   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");
+}

browser/components/aboutconfig/content/aboutconfig.js

@@ -210,11 +210,14 @@ class PrefRow {
       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");
@@ -238,7 +241,10 @@ class PrefRow {
           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;
@@ -270,7 +276,10 @@ class PrefRow {
             }
           }
         });
-        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);
@@ -285,13 +294,13 @@ class PrefRow {
       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";
       }

browser/components/aboutlogins/content/components/login-item.css

@@ -84,7 +84,7 @@ input[type="url"][readOnly] {
 }
 
 .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 */
 }
 

browser/components/aboutlogins/jar.mn

@@ -22,7 +22,6 @@ browser.jar:
   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)

browser/locales/en-US/browser/aboutConfig.ftl

@@ -14,12 +14,18 @@ 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

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>
+

browser/themes/shared/jar.inc.mn

@@ -168,6 +168,7 @@
   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)
@@ -217,6 +218,7 @@
   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)

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),
+    )