Pack Resources

ios/app/resources/BUILD.gn

@@ -12,7 +12,13 @@ group("resources") {
 repack("repack_unscaled_resources") {
   visibility = [ ":resources" ]
   output = "$target_gen_dir/brave_resources.pak"
-  sources = [ "$root_gen_dir/components/brave_components_resources.pak" ]
-  deps = [ "//brave/components/resources" ]
+  sources = [ 
+    "$root_gen_dir/components/brave_components_resources.pak", 
+    "$root_gen_dir/brave/ios/browser/components/brave_ios_components_resources.pak", 
+  ]
+  deps = [ 
+    "//brave/components/resources", 
+    "//brave/ios/browser/components/resources", 
+  ]
   copy_data_to_bundle = true
 }

ios/browser/components/resources/BUILD.gn

@@ -0,0 +1,27 @@
+import("//build/config/locales.gni")
+import("//brave/resources/brave_grit.gni")
+import("//tools/grit/repack.gni")
+
+repack("resources") {
+  deps = [
+    ":static_resources",
+  ]
+  sources = [
+    "$root_gen_dir/brave/ios/browser/components/brave_ios_components_static.pak",
+  ]
+
+  output = "$root_gen_dir/brave/ios/browser/components/brave_ios_components_resources.pak"
+}
+
+brave_grit("static_resources") {
+  source = "components_resources.grd"
+
+  output_name = "brave_ios_components_resources_new"
+
+  outputs = [
+    "grit/brave_ios_components_resources.h",
+    "brave_ios_components_static.pak",
+  ]
+
+  output_dir = "$root_gen_dir/brave/ios/browser/components"
+}

ios/browser/components/resources/components_resources.grd

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/brave_ios_components_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="brave_ios_components_static.pak" type="data_package" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <part file="./components_ui/components.grdp" />
+    </includes>
+  </release>
+</grit>

ios/browser/components/resources/components_ui/BUILD.gn

@@ -0,0 +1,18 @@
+# Copyright 2019 The Chromium Authors
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//ui/webui/resources/tools/build_webui.gni")
+
+build_webui("build") {
+  grd_prefix = "components"
+  static_files = [
+    "components.html",
+    "components.css",
+  ]
+  non_web_component_files = [ "components.ts" ]
+
+  ts_definitions = [ "//tools/typescript/definitions/chrome_send.d.ts" ]
+  ts_deps = [ "//ui/webui/resources/js:build_ts" ]
+  webui_context_type = "trusted"
+}

ios/browser/components/resources/components_ui/components.css

@@ -0,0 +1,237 @@
+/* Copyright 2013 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+body {
+  margin: 10px;
+  min-width: 47em;
+}
+
+a {
+  color: blue;
+  font-size: 103%;
+}
+
+#header {
+  background: url(chrome://resources/images/extension.svg)
+      left center / 48px no-repeat;
+  box-sizing: border-box;
+  margin-bottom: 1.05em;
+  overflow: hidden;
+  padding-inline-start: 0;
+  position: relative;
+}
+
+html[dir=rtl] #header {
+  background-position-x: right;
+}
+
+#header h1 {
+  line-height: 48px;
+  padding-inline-start: 51px;
+}
+
+h1 {
+  font-size: 156%;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
+
+#disabled-container {
+  font-size: 120%;
+  padding-bottom: 1.5em;
+}
+
+#disabled-header {
+  color: red;
+  font-weight: bold;
+}
+
+.content {
+  margin-top: 5px;
+}
+
+.section-header {
+  background: rgb(235, 239, 249);
+  border-top: 1px solid rgb(181, 199, 222);
+  font-size: 99%;
+  padding-bottom: 2px;
+  padding-inline-start: 5px;
+  padding-top: 3px;
+  width: 100%;
+}
+
+.section-header > table tr td:first-child {
+  width: 100%;
+}
+
+.section-header > table tr {
+  vertical-align: center;
+}
+
+.section-header > table {
+  width: 100%;
+  border-collapse:collapse
+}
+
+.section-header-title {
+  font-weight: bold;
+}
+
+#top {
+  padding-inline-end: 5px;
+}
+
+.show-in-tmi-mode {
+  overflow: hidden;
+}
+
+body.hide-tmi-mode-initial .show-in-tmi-mode {
+  height: 0 !important;
+  opacity: 0;
+}
+
+body.hide-tmi-mode .show-in-tmi-mode {
+  height: 0 !important;
+  opacity: 0;
+  transition: all 100ms ease-out;
+}
+
+body.show-tmi-mode-initial .show-in-tmi-mode {
+  opacity: 1;
+}
+
+body.show-tmi-mode .show-in-tmi-mode {
+  opacity: 1;
+  transition: all 100ms ease-in;
+}
+
+.tmi-mode-image {
+  margin-top: 2px;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+}
+
+.tmi-mode-link {
+  margin-inline-end: 3px;
+  white-space: nowrap;
+}
+
+.tmi-mode-link a {
+  font-size: 97%;
+}
+
+.tmi-mode {
+  background: rgb(244, 246, 252);
+  border-bottom: 1px solid rgb(237, 239, 245);
+  font-size: 89%;
+  padding-bottom: 0.8em;
+  padding-inline-start: 10px;
+  padding-top: 0.8em;
+  width: 100%;
+}
+
+.component-disabled {
+  background-color: #f0f0f0;
+  color: #a0a0a0;
+}
+
+.component > tr > td {
+  padding-bottom: 4px;
+  padding-top: 5px;
+  vertical-align: top;
+}
+
+.component > table {
+  width: 100%;
+  border-collapse:collapse
+}
+
+.plugin-file {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.component {
+  border-bottom: 1px solid #cdcdcd;
+}
+
+.critical {
+  color: red;
+}
+
+/* Indent the text related to each plug-in. */
+.component-text {
+  padding-inline-start: 5px;
+}
+
+.component-name {
+  font-weight: bold;
+}
+
+.no-components {
+  font-size: 1.2em;
+  margin: 6em 0 0;
+  text-align: center;
+}
+
+/* Use tables for layout, so eliminate extra spacing. */
+.plugin-details table {
+  -webkit-border-horizontal-spacing: 0;
+  -webkit-border-vertical-spacing: 0;
+}
+
+.plugin-details {
+  padding-inline-start: 1em;
+}
+
+/* Separate the inital line, Description, Location, and MIME Types lines. */
+.plugin-details > div {
+  padding-top: 0.1em
+}
+
+/* Align rows of tables along the top. */
+.plugin-details tr {
+  vertical-align: top;
+}
+
+/* Separate columns by 1em for the most part. */
+.plugin-details td+td {
+  padding-inline-start: 1em;
+}
+
+/* Make the MIME Types tables smaller. */
+.plugin-details .mime-types {
+  font-size: 95%;
+}
+
+/* Separate the header from the contents in each MIME Types table. */
+.plugin-details .mime-types .header td {
+  border-bottom: 1px solid black;
+  padding-bottom: 0.1em;
+}
+
+/* Separate the columns for tables used for horizontal listings only a bit. */
+.hlisting td+td {
+  padding-inline-start: 0.4em;
+}
+
+/* Match the indentation of .plugin-text. */
+.component-actions {
+  margin-bottom: 0.2em;
+  margin-top: 0.2em;
+  padding-inline-start: 5px;
+}
+
+.always-allow {
+  margin-inline-start: 30px;
+}
+
+button {
+  font-size: 104%;
+}
+
+button[disabled] {
+  color: #999;
+}

ios/browser/components/resources/components_ui/components.grdp

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit-part>
+  <include name="IDR_COMPONENTS_COMPONENTS_HTML" file="./components.html" type="BINDATA" />
+  <include name="IDR_COMPONENTS_COMPONENTS_CSS" file="./components.css" type="BINDATA" />
+  <include name="IDR_COMPONENTS_COMPONENTS_JS" file="./components.js" type="BINDATA" />
+</grit-part>