showPanel = on => {
      // Find the 'connector_rules' or create it if it doesn't exist.
      let connRules = $id('connector_rules')
      if (!connRules) {
        connRules = document.createElement('style')
        connRules.setAttribute('id', 'connector_rules')
        document.getElementsByTagName('head')[0].appendChild(connRules)
      }

      // Update the content of <style> element to either hide or show certain elements.
      connRules.textContent = !on
        ? ''
        : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }'

      // Update the display property of the <style> element itself based on the 'on' value.
      if ($id('connector_rules')) {
        $id('connector_rules').style.display = on ? 'block' : 'none'
      }
    }
showPanel
@param {boolean} on - Determines whether to show or hide the elements.
@returns {void}