添加格式化规则功能；规则条块颜色调整 (#163)

* 添加格式化规则功能；规则条块颜色调整

* update mainifest version number

* delete unvalid class

CHANGELOG-v3-0.10.x.md

@@ -4,6 +4,11 @@
 
 ## [一个完整的 测试环境例子 可用于查看优秀的源码 ](https://github.com/jingjingxyk/extension-v3-test)
 
+## CHANGELOG for v3 0.10.25 [2023-03-05 23:25:00 +0800]
+
+> 1. v3 版本 添加 格式化规则功能
+> 1. v3 版本 修改 规则条块颜色调整
+
 ## CHANGELOG for v3 0.10.24 [2023-02-19 21:25:00 +0800]
 
 > 1. v3 版本 添加 默认候选规则，规则 id=9999，priority=9999（暂不启用)

extension/manifest.json

@@ -1,11 +1,11 @@
 {
   "name": "Replace Google CDN",
-  "version": "0.10.23",
+  "version": "0.10.25",
   "manifest_version": 3,
   "icons": {
     "128": "icons/128.png"
   },
-  "description": "将 Google CDN 替换为国内镜像 v3 更新日期：2023-02-19",
+  "description": "将 Google CDN 替换为国内镜像 v3 更新日期：2023-03-05",
   "background": {
     "service_worker": "js/background.js",
     "type": "module"

extension/options_ui/advance.html

@@ -203,7 +203,7 @@ <h5></h5>
                 </button>
                 <span class="placeholder-box"></span>
                 <button type="button" class="format-rule-code">
-                  格式化当前规则（未开发）
+                  格式化当前规则
                 </button>
               </div>
               <div><span class="notice"></span></div>

extension/options_ui/css/app.css

@@ -103,6 +103,41 @@ button {
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
+
+.goto-sync-remote-rule,
+.add-rule,
+.add-special-rule,
+.update-rule {
+  background-color: #50cd89;
+  border-color: #50cd89;
+}
+
+.goto-sync-remote-rule:hover,
+.add-rule:hover,
+.add-special-rule:hover,
+.update-rule:hover {
+  background-color: #73d7a1;
+  border-color: #73d7a1;
+}
+.delete-all-dynamic-rule,
+.delete-sync-remote-rule,
+.delete-self-define-rule,
+.delete-self-define-special-rule {
+  background-color: #f1416c;
+  border-color: #f1416c;
+}
+
+.backup-all-dynamic-rule,
+.back-new-rule-to-json {
+  background-color: #009ef7;
+  border-color: #009ef7;
+}
+
+.reset_default_domain {
+  background-color: rgba(114, 57, 234, 0.85);
+  border-color: rgba(114, 57, 234, 0.85);
+}
+
 iframe {
   border: none;
 }
@@ -193,35 +228,35 @@ font-size: 1.3rem;
   /*
   background-color: #732e7e;
    */
-  background-color: rgb(156, 39, 176);
+  background-color: rgba(62, 151, 255, 0.85);
 }
 
 .self_define_special_rule {
   /*
   background-color: #808883;
 
    */
-  background-color: rgb(0, 150, 136);
+  background-color: rgba(241, 65, 108, 0.85);
 }
 
 .self_define_rule {
   /*
   background-color: #9db1a0;
   background-color: #4c8bf5;
    */
-  background-color: rgb(3, 169, 244);
+  background-color: rgba(80, 205, 137, 0.85);
 }
 
 .sync_remote_static_rule {
-  background-color: #8b8bdd;
+  background-color: rgba(255, 199, 0, 0.85);
 }
 
 .sync_remote_rule {
-  background-color: #d2ae8c;
+  background-color: rgba(114, 57, 234, 0.85);
 }
 
 .all_dynamic_rule {
-  background-color: #58665e;
+  background-color: rgba(80, 205, 205, 0.85);
 }
 
 .all_dynamic_rule_test {
@@ -236,4 +271,5 @@ font-size: 1.3rem;
   background-color: #efefef;
   background-color: #bd7a07;
 */
+  background-color: rgba(63, 66, 84, 0.85);
 }

extension/options_ui/index.html

@@ -111,7 +111,7 @@ <h5></h5>
                 </button>
                 <span class="placeholder-box"></span>
                 <button type="button" class="format-rule-code">
-                  格式化当前规则（未开发）
+                  格式化当前规则
                 </button>
               </div>
               <div><span class="notice"></span></div>

extension/options_ui/js/component/show-rule.js

@@ -203,6 +203,26 @@ let showRuleList = (type = "all_dynamic_rule") => {
       document.querySelector(".notice").innerText = "静态规则不允许修改";
     }
   });
+
+  /*
+   * 启用 规则 格式化
+   */
+  document
+    .querySelector(".format-rule-code")
+    .addEventListener("click", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      let content_box = document.querySelector("#rule-content-container");
+      let content = content_box.value;
+      if (content) {
+        let button = document.querySelector(
+          "#jsoneditor .jse-button.jse-format"
+        );
+        if (button) {
+          button.click();
+        }
+      }
+    });
 };
 
 export { showRuleList };

extension/test/README.md

@@ -10,7 +10,7 @@
 1. [`developers.google.com` 替换为 `developers.google.cn` 打开 `https://developers.google.com/` 查看结果 ](https://developers.google.com)
 1. [`code.jquery.com/jquery-` 替换为 `lib.baomitu.com/jquery/` 打开 `https://releases.jquery.com/` 查看结果 ](https://releases.jquery.com/)
 1. [`code.jquery.com/ui/` 替换为 `ajax.aspnetcdn.com/ajax/jquery.ui` 打开 `https://releases.jquery.com/` 查看结果 ](https://releases.jquery.com/)
-1. [`commondatastorage.googleapis.com/chromium-browser-snapshots/` 替换为 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip` 打开 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/` 查看结果 ](https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip)
+1. [`commondatastorage.googleapis.com/chromium-browser-snapshots/` 替换为 `https://registry.npmmirror.com/-/binary/chromium-browser-snapshots//Mac/1086244/chrome-mac.zip` 打开 `https://commondatastorage.googleapis.com/chromium-browser-snapshots/` 查看结果 ](https://commondatastorage.googleapis.com/chromium-browser-snapshots/Mac/1086244/chrome-mac.zip)
 1. [developer.android.com](https://developer.android.com/?hl=zh-cn)
 1. [source.android.com](https://source.android.com)
 1. [jquery](https://releases.jquery.com/)