Issue backdrop#364: Implementing JS/CSS icon support and implementing…

… in admin_bar.

core/includes/common.inc

@@ -5075,6 +5075,7 @@ function backdrop_aggregate_js(&$js_groups) {
  * to elements using the #attached property. The #attached property is an
  * associative array, where the keys are the the attachment types and the values
  * are the attached data. For example:
+ *
  * @code
  * $build['#attached'] = array(
  *   'js' => array(backdrop_get_path('module', 'taxonomy') . '/js/taxonomy.admin.js'),
@@ -5122,6 +5123,7 @@ function backdrop_aggregate_js(&$js_groups) {
  * @see backdrop_add_library()
  * @see backdrop_add_js()
  * @see backdrop_add_css()
+ * @see backdrop_add_icon()
  * @see backdrop_render()
  */
 function backdrop_process_attached($elements, $group = JS_DEFAULT, $dependency_check = FALSE, $every_page = NULL) {
@@ -5130,6 +5132,7 @@ function backdrop_process_attached($elements, $group = JS_DEFAULT, $dependency_c
     'library' => array(),
     'js' => array(),
     'css' => array(),
+    'icons' => array(),
   );
 
   // Add the libraries first.
@@ -5175,6 +5178,10 @@ function backdrop_process_attached($elements, $group = JS_DEFAULT, $dependency_c
     unset($elements['#attached'][$type]);
   }
 
+  // Icons are added all at once, no need to apply separate options.
+  backdrop_add_icons($elements['#attached']['icons']);
+  unset($elements['#attached']['icons']);
+
   // Add additional types of attachments specified in the render() structure.
   // Libraries, JavaScript and CSS have been added already, as they require
   // special handling.
@@ -5396,6 +5403,7 @@ function backdrop_add_library($module, $name, $every_page = NULL) {
         'library' => $library['dependencies'],
         'js' => $library['js'],
         'css' => $library['css'],
+        'icons' => $library['icons'],
       );
       $added[$module][$name] = backdrop_process_attached($elements, JS_LIBRARY, TRUE, $every_page);
     }
@@ -5454,7 +5462,12 @@ function backdrop_get_library($module, $name = NULL) {
     foreach ($module_libraries as $key => $data) {
       if (is_array($data)) {
         // Add default elements to allow for easier processing.
-        $module_libraries[$key] += array('dependencies' => array(), 'js' => array(), 'css' => array());
+        $module_libraries[$key] += array(
+          'dependencies' => array(),
+          'js' => array(),
+          'css' => array(),
+          'icons' => array(),
+        );
         foreach ($module_libraries[$key]['js'] as $file => $options) {
           $module_libraries[$key]['js'][$file]['version'] = $module_libraries[$key]['version'];
         }
@@ -5471,6 +5484,34 @@ function backdrop_get_library($module, $name = NULL) {
   return $libraries[$module];
 }
 
+/**
+ * Adds icons to the page to make them available in JS and CSS files.
+ *
+ * The icon name is resolved to a file path and then added to the page as both
+ * as a JavaScript variable (Backdrop.icons['icon-name']) and as a CSS variable
+ * (--icon-[icon-name]). Note that use of this function is not necessary if
+ * embedding an icon directly onto the page using the icon() function. This is
+ * only needed if using icons in JS and CSS files.
+ *
+ * @param string[] $icon_names
+ *   An array of unique icon names be added, without the extensions. Most icon
+ *   names can be found by browsing the core/misc/icons directory.
+ *
+ * @see icon()
+ */
+function backdrop_add_icons(array $icon_names) {
+  $icon_paths = array();
+  foreach ($icon_names as $icon_name) {
+    if ($icon_path = icon_get_path($icon_name)) {
+      $icon_paths[$icon_name] = base_path() . $icon_path;
+    }
+  }
+  if ($icon_paths) {
+    backdrop_add_js(array('icons' => $icon_paths), 'setting');
+    backdrop_add_library('system', 'backdrop.icons');
+  }
+}
+
 /**
  * Assists in adding the tableDrag JavaScript behavior to a themed table.
  *

core/includes/icon.inc

@@ -28,28 +28,8 @@
  * @return string
  */
 function icon($icon_name, $options = array()) {
-  // If not immutable, core is overridden by modules, and modules are overridden
-  // by themes (themes get the final say).
-  if (empty($options['immutable'])) {
-    $icon_path = _icon_from_theme($icon_name);
-    if (!$icon_path) {
-      $icon_path = _icon_from_module($icon_name);
-    }
-    if (!$icon_path) {
-      $icon_path = _icon_from_core($icon_name);
-    }
-  }
-  // Immutable icons can be defined by core, modules, or themes, but cannot be
-  // overridden (the original icon is always used).
-  else {
-    $icon_path = _icon_from_core($icon_name);
-    if (!$icon_path) {
-      $icon_path = _icon_from_module($icon_name);
-    }
-    if (!$icon_path) {
-      $icon_path = _icon_from_theme($icon_name);
-    }
-  }
+  $immutable = !empty($options['immutable']);
+  $icon_path = icon_get_path($icon_name, $immutable);
 
   if ($icon_path) {
     unset($options['immutable']);
@@ -63,6 +43,52 @@ function icon($icon_name, $options = array()) {
   return t('Icon %name not found.', array('%name' => $icon_name));
 }
 
+/**
+ * Locates an icon and returns its path.
+ *
+ * Icons can be provided by themes, modules, and core. Normally, icons are
+ * provided by core (from the core/misc/icons directory), but modules can
+ * provide additional icons or override core ones. Modules must implement
+ * hook_icon_info() to provide icons. Themes can also provide icons or override
+ * existing ones by placing icons in their "icons" subdirectory.
+ *
+ * @param string $icon_name
+ *   The name of an icon without a file extension. Most icon names can be
+ *   determined by looking in the core/misc/icons directory.
+ * @param boolean $immutable
+ *   Immutable icons cannot be modified by themes or modules. Instead of
+ *   allowing overrides, the first system that defines an icon name defines
+ *   its path. This allows certain icons to lock to the icon provided by core
+ *   or a module without allowing a theme to override it. Useful in situations
+ *   where an icon is used across multiple themes (like in the admin bar).
+ *
+ * @return string|NULL
+ *    The path to an icon, relative to the Backdrop installation root, with the
+ *    file extension (usually .svg). Or NULL if an icon is not found.
+ *
+ * @see hook_icon_info()
+ * @see hook_icon_info_alter()
+ */
+function icon_get_path($icon_name, $immutable = FALSE) {
+  $search_functions = array(
+    '_icon_from_theme',
+    '_icon_from_module',
+    '_icon_from_core',
+  );
+  // Immutable searches core, then modules, then themes.
+  if ($immutable) {
+    $search_functions = array_reverse($search_functions);
+  }
+
+  $icon_path = NULL;
+  foreach ($search_functions as $function) {
+    if ($icon_path = $function($icon_name)) {
+      break;
+    }
+  }
+  return $icon_path;
+}
+
 /**
  * Checks if the current theme provides an icon.
  *

core/misc/icons.js

@@ -25,7 +25,7 @@
    */
   Backdrop.addIcon = function (iconName, iconPath) {
     Backdrop.icons[iconName] = iconPath;
-    document.documentElement.style.setProperty('--icon-' + iconName, iconPath);
+    document.documentElement.style.setProperty('--icon-' + iconName, 'url(' + iconPath + ')');
   };
 
 })(jQuery);

core/modules/admin_bar/admin_bar.inc

@@ -59,7 +59,7 @@ function admin_bar_output($complete = FALSE) {
 
       $content['menu']['menu'] = admin_bar_links_menu(admin_bar_tree('management'));
       $content['menu']['menu']['#title'] = t('Admin bar');
-      $content['menu']['menu']['#options']['icon'] = 'dots-three-outline-vertical';
+      $content['menu']['menu']['#options']['icon'] = 'list';
     }
 
     // Check for status report errors.

core/modules/admin_bar/admin_bar.module

@@ -289,6 +289,8 @@ function admin_bar_library_info() {
     ),
     'icons' => array(
       'magnifying-glass',
+      'arrow-square-right',
+      'arrow-square-left',
     ),
   );
   return $libraries;

core/modules/admin_bar/css/admin_bar.css

@@ -217,11 +217,25 @@
 
 /* Second-and-more-level hovering. */
 #admin-bar .dropdown li li.expandable > a {
-  background: #45454A url(../images/arrow.png) no-repeat 145px center; /* LTR */
+  background: #45454A;
+}
+#admin-bar .dropdown li li.expandable > a::before {
+  content: '';
+  /*noinspection CssUnresolvedCustomProperty*/
+  mask-image: var(--icon-arrow-square-right); /* LTR */
+  mask-repeat: no-repeat;
+  background: #FFF;
+  width: 11px;
+  height: 11px;
+  position: absolute;
+  margin-top: 2px;
+  right: 5px; /* LTR */
 }
-[dir="rtl"] #admin-bar .dropdown li li.expandable > a {
-  background-image: url(../images/arrow-rtl.png);
-  background-position: 5px center;
+[dir="rtl"] #admin-bar .dropdown li li.expandable > a::before {
+  /*noinspection CssUnresolvedCustomProperty*/
+  background-image: var(--icon-arrow-square-left);
+  right: auto;
+  left: 5px;
 }
 #admin-bar .dropdown li li a.expanded-trail {
   background-color: #111;
@@ -260,11 +274,11 @@
 #admin-bar-extra .icon {
   float: right; /* LTR */
   margin-left: 8px; /* LTR */
-  margin-right: 0px; /* LTR */
+  margin-right: 0; /* LTR */
 }
 [dir="rtl"] #admin-bar-extra .icon {
   float: left; /* LTR */
-  margin-left: 0px; /* LTR */
+  margin-left: 0; /* LTR */
   margin-right: 8px; /* LTR */
 }
 
@@ -280,7 +294,8 @@
   padding: 6px 0 0;
 }
 #admin-bar .admin-bar-search input {
-  background: #fff url(../images/search--gray--64.png) center right no-repeat;
+  /*noinspection CssUnresolvedCustomProperty*/
+  background: #fff var(--icon-magnifying-glass) center right no-repeat;
   background-position: right 5px center; /* LTR */
   background-size: 12px;
   border: none;
@@ -333,7 +348,6 @@ html.js fieldset.collapsible div.fieldset-wrapper {
  * Tweaks permissions, if enabled.
  */
 tr.admin-bar-tweak-permissions-processed {
-  cursor: pointer;
   cursor: hand;
 }
 tr.admin-bar-tweak-permissions-processed td.module {

core/modules/admin_bar/js/admin_bar.js

@@ -216,11 +216,6 @@ Backdrop.adminBar.behaviors.resizeCollapse = function (context, settings, $admin
       $menu.addClass('dropdown').removeClass('top-level');
     }
 
-    console.log(availableWidth);
-    console.log(menuWidth);
-    console.log(extraWidth);
-
-
     $adminBar.trigger('afterResize');
   };
 

core/modules/layout/templates/block.tpl.php

@@ -19,7 +19,6 @@
   <h2 class="block-title"><?php print $title; ?></h2>
 <?php endif; ?>
 <?php print render($title_suffix); ?>
-
   <div class="block-content">
     <?php print render($content); ?>
   </div>

core/modules/system/system.api.php

@@ -319,6 +319,10 @@ function hook_js_alter(&$javascript) {
  *   'type' => 'setting', and the actual settings must be contained in a 'data'
  *   element of the value.
  * - 'css': Like 'js', an array of CSS elements passed to backdrop_add_css().
+ * - 'icons': A simple array with only icon names. Each icon in the list will be
+ *   resolved to a file path and then added to the page as both a JavaScript
+ *   variable (Backdrop.icons['icon-name']) and as a CSS variable
+ *   (--icon-[icon-name]).
  * - 'dependencies': An array of libraries that are required for a library. Each
  *   element is an array listing the module and name of another library. Note
  *   that all dependencies for each dependent library will also be added when
@@ -350,6 +354,12 @@ function hook_library_info() {
         'media' => 'screen',
       ),
     ),
+    // A full list of icons available from core can be found in the
+    // core/misc/icons directory.
+    'icons' => array(
+      'pencil',
+      'image',
+    ),
   );
   // Library Two.
   $libraries['library-2'] = array(

core/modules/system/system.module

@@ -1233,6 +1233,15 @@ function system_library_info() {
     ),
   );
 
+  // Backdrop's icon API library.
+  $libraries['backdrop.icons'] = array(
+    'title' => 'Backdrop icons',
+    'version' => BACKDROP_VERSION,
+    'js' => array(
+      'core/misc/icons.js' => array('group' => JS_LIBRARY),
+    ),
+  );
+
   // Backdrop's states library.
   $libraries['backdrop.states'] = array(
     'title' => 'Backdrop states',