Bug 1350210 - Part 3 - Add uidensity icons and only show uidensity settings in Photon. r=nhnt11

MozReview-Commit-ID: 6uI2oeQk8hw

--HG--
extra : rebase_source : e8aa4141f294433ab6f070f3d0e4fe4c42e073ea

browser/components/customizableui/content/customizeMode.inc.xul

@@ -51,6 +51,7 @@
           </hbox>
         </panel>
       </button>
+#ifdef MOZ_PHOTON_THEME
       <button id="customization-uidensity-button"
               label="&customizeMode.uidensity;"
               class="customizationmode-button"
@@ -106,6 +107,7 @@
 #endif
         </panel>
       </button>
+#endif
 
       <spacer id="customization-footer-spacer"/>
       <button id="customization-undo-reset-button"

browser/components/customizableui/test/browser_customizemode_uidensity.js

@@ -116,10 +116,20 @@ async function testModeButton(mode, modePref) {
 }
 
 add_task(async function test_compact_mode_button() {
+  if (!AppConstants.MOZ_PHOTON_THEME) {
+    ok(true, "Skipping test because Photon is not enabled.");
+    return;
+  }
+
   await testModeButton("compact", window.gUIDensity.MODE_COMPACT);
 });
 
 add_task(async function test_touch_mode_button() {
+  if (!AppConstants.MOZ_PHOTON_THEME) {
+    ok(true, "Skipping test because Photon is not enabled.");
+    return;
+  }
+
   // OSX doesn't get touch mode for now.
   if (AppConstants.platform == "macosx") {
     is(document.getElementById("customization-uidensity-menu-button-touch"), null,

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -256,10 +256,17 @@
   width: 16px;
   height: 16px;
   border-radius: 2px;
-  background-image: url("chrome://browser/content/default-theme-icon.svg");
   background-size: contain;
 }
 
+#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
+  background-image: url("chrome://browser/content/default-theme-icon.svg");
+}
+
+#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon {
+  background-image: url("chrome://browser/skin/customizableui/density-normal.svg");
+}
+
 %ifndef MOZ_PHOTON_THEME
 #main-window[customize-entered] #customization-panel-container {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"),
@@ -451,11 +458,22 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
   padding-inline-start: 0;
 }
 
-.customization-uidensity-menu-button,
 .customization-lwtheme-menu-theme[defaulttheme] {
   list-style-image: url(chrome://browser/content/default-theme-icon.svg);
 }
 
+#customization-uidensity-menu-button-normal {
+  list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg");
+}
+
+#customization-uidensity-menu-button-compact {
+  list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg");
+}
+
+#customization-uidensity-menu-button-touch {
+  list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg");
+}
+
 .customization-uidensity-menu-button[active="true"],
 .customization-uidensity-menu-button:hover,
 .customization-lwtheme-menu-theme[active="true"],

browser/themes/shared/customizableui/density-compact.svg

@@ -0,0 +1,21 @@
+<!-- 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="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .479 2 1.071V14H1V2.071C1 1.479 1.9 1 3 1z" fill="#f9f9fa"/>
+  <path d="M1 13.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M3.5 7.5h6"/>
+    <path stroke-linejoin="round" d="M6.5 4.5l-3 3 3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M18.5 7.5h-6"/>
+    <path stroke-linejoin="round" d="M15.5 4.5l3 3-3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M28.5 4.5v2h-2"/>
+    <path d="M27.623 9.614a3.03 3.03 0 1 1 .636-3.324"/>
+  </g>
+</svg>

browser/themes/shared/customizableui/density-normal.svg

@@ -0,0 +1,18 @@
+<!-- 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="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .627 2 1.4V18H1V2.4C1 1.627 1.9 1 3 1z" fill="#f9f9fa"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M25.5 9.5h-6"/>
+    <path stroke-linejoin="round" d="M22.5 6.5l3 3-3 3"/>
+  </g>
+  <path d="M2 17.5h29" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="9.5" cy="9.5" r="6" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M6.5 9.5h6"/>
+    <path stroke-linejoin="round" d="M9.5 6.5l-3 3 3 3"/>
+  </g>
+</svg>

browser/themes/shared/customizableui/density-touch.svg

@@ -0,0 +1,14 @@
+<!-- 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="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M2.942 1.073l26-.145a1.88 1.88 0 0 1 2.01 1.718l.108 19.27-30 .168L.951 2.813a1.88 1.88 0 0 1 1.991-1.74z" fill="#f9f9fa"/>
+  <path d="M1 21.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="15.5" cy="11.5" r="8" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M12.5 11.5h6"/>
+    <path stroke-linejoin="round" d="M15.5 8.5l-3 3 3 3"/>
+  </g>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -39,6 +39,9 @@
 #ifdef MOZ_PHOTON_THEME
   skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
   skin/classic/browser/customizableui/empty-overflow-panel@2x.png  (../shared/customizableui/empty-overflow-panel@2x.png)
+  skin/classic/browser/customizableui/density-compact.svg      (../shared/customizableui/density-compact.svg)
+  skin/classic/browser/customizableui/density-normal.svg       (../shared/customizableui/density-normal.svg)
+  skin/classic/browser/customizableui/density-touch.svg        (../shared/customizableui/density-touch.svg)
 #else
   skin/classic/browser/customizableui/customize-illustration.png  (../shared/customizableui/customize-illustration.png)
   skin/classic/browser/customizableui/customize-illustration@2x.png  (../shared/customizableui/customize-illustration@2x.png)